js动态添加表格数据使用插入行和插入单元格实现

效果图：

代码： js动态添加表格数据_2.html复制代码代码如下：DOCTYPE html html xmlns=' http://www .w3。org/1999/XHTML ' head meta http-equiv=' Content-Type ' Content=' text/html；charset=utf-8'/titlejs动态添加表格数据_2 使用插入行和插入单元格方法实现/title脚本类型=' text/JavaScript ' var mailArr=[{ ' title ' : '一个c#问题，'姓名' : '张三，'日期' : '2014-03-21' },{ '标题' : '一个爪哇岛描述语言问题，'姓名' : '李四，'日期' : '2014-03-21' },{ '标题' : '一个c问题，'姓名' : '五五，'日期' : '2014-03-21' },{ '标题' : '一个c问题，'姓名' : '赵六，' date ' : ' 2014-03-21 ' }]；var tab=nullwindow。onload=function(){ LoadTab()；//全选document.getElementById('selA ').onclick=function(){ if(document。getelementbyid(' selA ').checked==true) { seleAll(tab，true)；} else { seleAll(tab，false)；} };//删除所有的选中的文件。getelementbyid(' delSel ').onclick=function() { //遍历所有的投入控件即可（除了最后一个全选用的复选框)var chks=document。getelementsbytagname(' input ')；for(var I=chks。长度-2；I=0；I-){ var chk=chks[I]；if (chk.checked==true) { //选中行删除处理var row now=chk。父节点。父节点；现在划船。父节点。删除子级(现在行)；} else { alert('真');} } };};函数LoadTab(){ TAb=document。GetElementBYid(' TB ')；//把mailArr循环遍历方式以tr的方式加入表格中for(var行索引=0；row index mailarr . length row index){//var tr=tab。insert row(-1)；//-1指最后一行var tr=tab。insertrow(制表符。行。长度-1)；//插入到末二行，最后一行要给全选那一行保留着var td1=tr。insert cell(-1)；td1。inner html=' input type=' checkbox '/'；var td2=tr。insert cell(-1)；TD 2。inner html=MailArr[行索引].标题；var td3=tr。insert cell(-1)；TD 3。InnerHTML=MailArr[行索引].姓名；var td4=tr。insert cell(-1)；TD 4。InnerHTML=MailArr[行索引].日期；} } //要使全选按钮生效，就要遍历所有的表格的行函数seleAll(mailTab，ISsel){ for(var I=0；我有邮件标签。行。长度；I){ var tr=Mailtab。行[I]；tr.cells[0].子节点[0]。checked=ISsel } }/script/head body表id=' TB '边框=' 1 '样式='边框-折叠：折叠；'tr th序列/th标题/th发邮人/th发件时间/th /tr！-循环增加- !-全选- tr td colspan='4 '输入id='selA ' type=' checkbox '/标签为=' SelA '全选/label a href='#' id='delSel '删除/a/td /tr /table /body /html