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

JavaScript08

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'/>就好

代码如下:

<script>

  //js放到table下,才能检测到tr数组

  var trs = document.getElementById("tableBox").getElementsByTagName("tr")

 var trs=document.getElementById("tableBox").getElementsByTagName("tr")

     $(function(){

         for(var i=0i<trs.lengthi++){

             trs[i].onmousedown = function(){

                 mousedownclick(this)

             }

         }

     })

     function mousedownclick(obj){

         for(var j=0j<trs.lengthj++){

             if(trs[j]==obj){

                 trs[j].style.background='blue'

             }else{

                 trs[j].style.background=''

             }

         }

     }

</script>

扩展资料

js操作table的各种用法:

(1)得到table 中tbody 的内容 :$('#simple-table').find('tbody').html()

(2)点击td时,获取点击的行号:

$('#simple-table tbody').on( 'click', 'td', function (e) {

normalRowIndex = $(this).parent().index()//行号

console.log("正常工作表行:"+normalRowIndex)

})

(3)为table追加一行:

function addNormalTR(){

$('#simple-table').find('tbody').append(trtd)//tdtd为拼接的trtd 的html内容。

}

(4) 点击td中的元素获取,当前行号: obj.parentNode.parentNode.rowIndex//obj 为元素对象

function init()

 {

   vartable =document.getElementById("tab1")

   varrows = table.rows.length

   alert('行数'+rows)

   varcolums = table.rows[0].cells.length

   alert('列数'+colums)

 }

----根据列数自动循环显示隐藏