table表格加复选框，js中怎么写

JavaScript026

table表格加复选框，js中怎么写,第1张

trHtml="<tr>"+

"<th style='width: 5%'><input class='awsui-checkbox'  id='checkboxStyle' value='' type='checkbox'/></th>"+

"<th style='width: 6%'>序号</th>"+

"<th style='width: 8%'>类型</th>"+

"<th style='width: 23%'>公司</th>"+

"<th style='width: 23%'>付款方</th>"+

"<th style='width: 12%'>金额</th>"+

"<th style='width: 15%'>日期</th>"+

"<th style='width: 8%'>状态</th>"+

"</tr>"

$("thead").append(trHtml)

直接用<input class='awsui-checkbox'  id='checkboxStyle' value='' type='checkbox'/>就好

给你思路，你自己实现：

因工作原因那个按钮或者其他，添加点击事件；

在外面定一个全局变量，用来记录使显示还是不显示；

点击事件中，判断显示变量；

如果是显示，用javascript/jquery，在本行下插入一行，并赋值，具体方法是，找到本td的父tr，在tr后追加html新的tr，并填充内容（例：可以用jquery的td:contains('xx').parent().append("<tr ><td>..."),在赋值内容$("#abc").val("xxxxxx"))；如果你的那行本身存在，那就更容易了，找到对应的那个tr，可以设置高度，并且还可以用jquery加一些动画效果slideDown 这类的，然后填充内容。

如果是不显示，找到对应新加的那行tr，hide或这直接删掉；或者变回原来那样，看自己需求。

总之就是，要会怎么拿td和tr。好多方法都可以，自己百度下吧。

var T=document.getElementsByTagName('table').item(0)

var td=T.getElementsByTagName('td')

var len=td.length

alert(len)

for(var i=0i<leni++){

td.item(i).innerHTML=i

}