码迷,mamicode.com
首页 > 其他好文 > 详细

关于前端遍历td并且看checkBox是否选中问题

时间:2017-05-06 11:48:49      阅读:545      评论:0      收藏:0      [点我收藏+]

标签:根据   inpu   ntb   detail   head   cells   string   style   tail   

<table  id="detailTable">
<thead>
<th><input style="text-align: center" class="checkbox" type="checkbox" id="quanxuanCheckBox"></th>
<th>姓名</th>
<th>年龄</th>
</thead>
<tbody>
<c:forEach var=‘xusheng‘ items="${list}">
<tr>
<td>
<input class="drlsid" type="checkbox" name="checkboxes"  style="text-align: center" checked="checked" value=‘${xuesheng.id}‘>
</td>
<td style="text-align: center" title=‘${xuesheng.name}‘ class="name"> ${xuesheng.name}</td>

<td style="text-align: center" title=‘${xuesheng.age}‘ class="age"> ${xuesheng.age}</td>


</tr>
</c:forEach>
</tbody>
</table>

=================================================================

以上是一个根据后台传回数据循环构造的一个table,拥有一个checkBox和姓名,年龄两列。现在根据checkBox是否选中来获取学生

var cellNums = document.getElementById("detailTable").rows[0].cells.length//=========================获取表的列数

$("#detailTable tr").each(function(){//================遍历detailTable 下的每一个tr

if(($(this).find("input[type=‘checkbox‘]").is(‘:checked‘))&&index!=0){//========$(this)指向的是遍历到的当前行  index是全局的一个值,因为第一列是表头不需要
var data={};
i++;
for(var m=0;m<cellNums;m++){
if(m==0){//===================第一列是checkBox,用来获取学生id
var str=$(this).children(‘td‘).find(‘input‘).attr("value");//====同样$(this)指向当前行,这一句的意思是当前行的子级td里面找到input类型的元素,获取他的值
var className=$(this).children(‘td‘).find(‘input‘).attr("class");
data[className]=str;

}else{
var str=$(this).children(‘td‘).eq(m).html();
var className=$(this).children(‘td‘).eq(m).attr("class");//=========eq(m)的意思是第m-1个元素
if(className=="gllxid"||className=="zblyid"||className=="zjxzid"){
var listRes=str.split("]");
str=listRes[0].substring(1)

}
if(str!==null){
data[className]=str;
}

}

}

list.push(data);

}
index++;
});

关于前端遍历td并且看checkBox是否选中问题

标签:根据   inpu   ntb   detail   head   cells   string   style   tail   

原文地址:http://www.cnblogs.com/tqliu/p/6816038.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!