JQuery获取当前行的数据

Author Avatar
Chang Zhan 5月 28, 2018
  • 在其它设备中阅读本文章

需求来自XML作业中某一个小问题,进行update操作的时候,需要将表格中对应行的数据传输到对应更新表格的字段中

以该页面为例

当点击第一行右边的编辑按钮时,需要将各字段放入以下的框体中

在此之前介绍一下该表格的形成

<script language="javaScript" for="window" event="onload">  
            // 此处xmlStr可从数据库中读取直接生成的xml字符串  
        var xmlStr = "<ArrayList><item><id>1</id><name>挪威的森林</name><author>村上春树</author><price>30</price><borrowedNumber>1</borrowedNumber><totalNumber>5</totalNumber><press>上海译文出版社</press><publishDate>1279791117000</publishDate><type>1</type></item><item><id>2</id><name>计算机组织与结构</name><author>詹昶</author><price>100</price><borrowedNumber>0</borrowedNumber><totalNumber>6</totalNumber><press>电子工业出版社</press><publishDate>1512466323000</publishDate><type>1</type></item></ArrayList>";  

        try //Internet Explorer  
        {  
            xmlDoc=new ActiveXObject("Microsoft.XMLDOM");  
            xmlDoc.async="false";  
            xmlDoc.loadXML(xmlStr);  
        }  
        catch(e)  
        {  
            try //Firefox, Mozilla, Opera, etc.  
              {  
              parser=new DOMParser();  
              xmlDoc=parser.parseFromString(xmlStr,"text/xml");  
              }  
            catch(e) {alert(e.message)}  
        }  

        //window.onlad使用参考 https://blog.csdn.net/u011413922/article/details/70048691  
        var xmlNode = xmlDoc.getElementsByTagName('item');  
        window.onload = function(){  
            var vehicle_data = document.getElementById("basketball_info");  
            var datas = "";  
            for (var i = 0; i < xmlNode.length; i++) {  
                datas += "<tr>";  
                datas += "<td>" + xmlDoc.getElementsByTagName("id")[i].childNodes[0].nodeValue +"</td>";  
                datas += "<td>" + xmlDoc.getElementsByTagName("name")[i].childNodes[0].nodeValue +"</td>";  
                datas += "<td>" + xmlDoc.getElementsByTagName("author")[i].childNodes[0].nodeValue +"</td>";  
                datas += "<td>" + xmlDoc.getElementsByTagName("price")[i].childNodes[0].nodeValue +"</td>";  
                datas += "<td>" + xmlDoc.getElementsByTagName("borrowedNumber")[i].childNodes[0].nodeValue +"</td>";  
                datas += "<td>" + xmlDoc.getElementsByTagName("totalNumber")[i].childNodes[0].nodeValue +"</td>";  
                datas += "<td>" + xmlDoc.getElementsByTagName("press")[i].childNodes[0].nodeValue +"</td>";  
                // Start 日期格式转换  
                var publishDate = xmlDoc.getElementsByTagName("publishDate")[i].childNodes[0].nodeValue;  
                var Timestamp = new Date(parseInt(publishDate)).toLocaleString().replace(/:\d{1,2}$/,' ');  
                datas += "<td>" + Timestamp +"</td>";  
                // End 日期格式转换  
                datas += "<td>" + xmlDoc.getElementsByTagName("type")[i].childNodes[0].nodeValue +"</td>";  

                // Start update button  
                datas += "<td>" + ' <button class="update-delete-hover" data-toggle="modal" data-target="#myModal1"><i class="glyphicon glyphicon-pencil"></i></button> ' +"</td>";  
                // End update button  

                // Start delete button  
                // 留出action接口  
                datas += "<td>" + ' <button id="update_vehicle_button" class="update-delete-hover"><i class="glyphicon glyphicon-trash" action=""></i></button> ' +"</td>";  
                // End delete button  
                datas += "</tr>";  
            }  
            vehicle_data.innerHTML = datas;  
        }  
        </script>


先从xmlstr处(可从后台传输一个xmlstr变量)取得xml树,通过DOM解析,并按照表格的形式存入,就形成了现在的表格
如果需要从表格中取数据就需要用到JQuery了

  1. 在按钮处添加一个onclick="update_action(this)"函数触发器
  2. 实现update_action(object)函数
  3. 对于上图,首先寻找$(object)到标签tr的父节点
  4. 遍历该父节点下名称为td的子节点
  5. 用eq()限定选择哪个子节点,.html()用来取值

以上