如何用JavaScript控制table动态插入行

Question

     var html = "<tr id='shiTi"+tableObj.rows.length+"' align='center' height='35'>"+
    "<td><div id='baoCunQingKuang"+tableObj.rows.length+"'></div></td>"+
"<td>"+tableObj.rows.length+"</td>"+
"<td id='noSave'><div contentEditable></div></td>"+
"<td id='noSave'><div contentEditable></div></td>"+
"<td id='noSave'><div contentEditable></div></td>"+
"<td id='noSave'><div contentEditable></div></td>"+
"<td id='noSave'><div contentEditable></div></td>"+
"<td id='noSave'><div contentEditable></div></td>"+
"<td id='save'><div contentEditable></div></td></tr>";我想把以上代码插入一个table中，请问怎么新建一行？并且该行为以上内容？

Answer 1

  var tabObj = document.getElementById("tableId");
  var tr_flag = tabObj.insertRow();
  tr_flag.innerHTML = html;

Answer 2

补充一下，html 本身不要包含tr
可以通过 tr_flag 设置 tr 的属性

Answer 3

<table id="tab"></table><script>
var tableObj=document.getElementById("tab");
tab.outerHTML+="<tr id='shiTi"+tableObj.rows.length+"' align='center' height='35'>"+
                    "<td><div id='baoCunQingKuang"+tableObj.rows.length+"'></div></td>"+
                    "<td>"+tableObj.rows.length+"</td>"+
                    "<td id='noSave'><div contentEditable></div></td>"+
                    "<td id='noSave'><div contentEditable></div></td>"+
                    "<td id='noSave'><div contentEditable></div></td>"+
                    "<td id='noSave'><div contentEditable></div></td>"+
                    "<td id='noSave'><div contentEditable></div></td>"+
                    "<td id='noSave'><div contentEditable></div></td>"+
                    "<td id='save'><div contentEditable></div></td></tr>";
</script>
这样子的吗？

Answer 4

更正下
<table id="tab"></table><script>
var tableObj=document.getElementById("tab");
tableObj.outerHTML+="<tr id='shiTi"+tableObj.rows.length+"' align='center' height='35'>"+
                    "<td><div id='baoCunQingKuang"+tableObj.rows.length+"'></div></td>"+
                    "<td>"+tableObj.rows.length+"</td>"+
                    "<td id='noSave'><div contentEditable></div></td>"+
                    "<td id='noSave'><div contentEditable></div></td>"+
                    "<td id='noSave'><div contentEditable></div></td>"+
                    "<td id='noSave'><div contentEditable></div></td>"+
                    "<td id='noSave'><div contentEditable></div></td>"+
                    "<td id='noSave'><div contentEditable></div></td>"+
                    "<td id='save'><div contentEditable></div></td></tr>";
</script>

Answer 5

是以上写法.outerHTML包括整个标签，而不仅限于标签内部的内容。

Answer 6

我为table设置了onClick事件，但当我点击table的边框的时候他也会出发onClick事件，请问怎样才能让他点击table边框的时候不触发onClick事件呢？？

Answer 7

在IE下可以event.srcElement.tagName=="TABLE"来判断是否点在边框上
没有测试，LZ可以试下