JQuery获取当前行的数据
需求来自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了
- 在按钮处添加一个
onclick="update_action(this)"
函数触发器 - 实现update_action(object)函数
- 对于上图,首先寻找$(object)到标签
tr
的父节点 - 遍历该父节点下名称为
td
的子节点 - 用eq()限定选择哪个子节点,.html()用来取值
以上