如何动态在原有table中添加多列

Question

如我的代码：
<table id="tblDetail">
  <thead>
    <tr>
<th>Color </th>
<th>Inseam</th>
<th>L Order Qty</th>
<th>L Hold Qty </th>
<th>M Order Qty</th>
<th>M Hold Qty</th>
<th>S Order Qty</th>
<th>S Hold Qty</th>
<th>XL Order Qty</th>
<th>XL Hold Qty</th>
        //我想在这里用js动态添加多个<th></th>，如何能添加进去呢？
    </tr>
   </thead>
   <tbody id="TBtblDetail">
     <tr>
<td id="cellColorCode"><input type="text" id="tbDetColor" value="Blue" /></td>
<td id="cellGradingCode"><input type="text" id="tbDetGrading" value="L" /></td>
<td id="cell"><input type="text" id="caDetOrderQty1" value="1.00" /></td>
<td id="cell"><input type="text" id="caDetHoldQty1" value="2.00" /></td>
<td id="cell"><input type="text" id="caDetOrderQty2" value="6.00" /></td>
<td id="cell"><input type="text" id="caDetHoldQty2" value="4.00" /></td>
<td id="cell"><input type="text" id="caDetOrderQty3" value="0.00" /></td>
<td id="cell"><input type="text" id="caDetHoldQty3" value="0.00" /></td>
<td id="cell"><input type="text" id="caDetOrderQty4" value="0.00" /></td>
<td id="cell"><input type="text" id="caDetHoldQty4" value="0.00" /></td>
        //还有这个位置也要添加多个<td></td>，我就不知道怎么找到它的位置。有哪位能写个javascript去动态添加呢？谢谢
     </tr>
   </tbody>
</table>

Answer 1

function add(){
var t = document.getElementById("tblDetail");
var thead = t.getElementsByTagName("THEAD")[0];
var tbody = t.getElementsByTagName("TBODY")[0];
var theadTr = thead.getElementsByTagName("TR")[0];
//增加TH
var theadCell = theadTr.insertCell();
theadCell.innerText = "add1";
var tbodyTrs = tbody.getElementsByTagName("TR");
for(var i=0;i<tbodyTrs.length;i++){
var tbodyCell = tbodyTrs[i].insertCell();
tbodyCell.innerText = "row"+(i+1);
}
}

Answer 2

添加多列，多次调用add()即可

Answer 3

var thcell = document.createElement("th");
document.getElementById("tblDetail").appendChild();<table id="tblDetail"> 
  <thead> 
    <tr id="tr1"> 
<th>Color </th> 
<th>Inseam </th> 
<th>L Order Qty </th> 
<th>L Hold Qty </th> 
<th>M Order Qty </th> 
<th>M Hold Qty </th> 
<th>S Order Qty </th> 
<th>S Hold Qty </th> 
<th>XL Order Qty </th> 
<th>XL Hold Qty </th> 
<script>
   var thcell = document.createElement("th");
   document.getElementById("tr1").appendChild(thcell);
</script>
    </tr> 
  </thead> 
  <tbody id="TBtblDetail"> 
    <tr id="tr2"> 
<td id="cellColorCode"> <input type="text" id="tbDetColor" value="Blue" /> </td> 
<td id="cellGradingCode"> <input type="text" id="tbDetGrading" value="L" /> </td> 
<td id="cell"> <input type="text" id="caDetOrderQty1" value="1.00" /> </td> 
<td id="cell"> <input type="text" id="caDetHoldQty1" value="2.00" /> </td> 
<td id="cell"> <input type="text" id="caDetOrderQty2" value="6.00" /> </td> 
<td id="cell"> <input type="text" id="caDetHoldQty2" value="4.00" /> </td> 
<td id="cell"> <input type="text" id="caDetOrderQty3" value="0.00" /> </td> 
<td id="cell"> <input type="text" id="caDetHoldQty3" value="0.00" /> </td> 
<td id="cell"> <input type="text" id="caDetOrderQty4" value="0.00" /> </td> 
<td id="cell"> <input type="text" id="caDetHoldQty4" value="0.00" /> </td> 
<script>
   var tdcell = document.createElement("td");
   document.getElementById("tr2").appendChild(tdcell);
</script>
    </tr> 
  </tbody> 
</table>

Answer 4

luckylongge
你这样不行的，你为什么要在我的tr中加上id的值呢？

Answer 5

有没有一次同时添加几列啊，我是要实现动态计算Order Qty的总数量和Hold Qty的总数量。不能循环添加。只能点击一个按钮多列显示出来。

Answer 6

一下子全出来那就做个循环好勒^_^function addTime(num){
    for(var i=0;i<num;i++){
        add();//此函数在1楼已有
    }
}
点击按钮直接调用addTime函数，num为添加的列数

Answer 7

id不能重复
function AddTableCol()
{
    var tr=document.getElementById("mytr");
    newtd=tr.insertCell();
    newtd.id="td"+step;
    var id = "ddl"+step;  
    newtd.style.width="100px";  
}

Answer 8

谁知道用iframe作浮动页面，但是在<iframe src="a.htm" ></iframe>
不能加载a.html页面，我的意思是用js能不能动态创建iframe，
并且在iframe中添加栏位。用js创建iframe我会，
如：我想在iframe中添加两个栏位，姓名、邮箱。
怎样添加呢？谁有例子呢？