JSP 動態添加行列 適用於 IE 及 Firefox

 

 var cellCount = 0; function addTR() { cellCount++; // 得到要操作的表 var table = document.getElementById("t1"); // 動態添加行 var newRow = document.createElement ("tr"); // 動態建立列 var newCell0 = document.createElement ("td"); var newCell1 = document.createElement ("td"); // 動態新增內容 newCell0.appendChild(document.createTextNode ("欄位"+(cellCount + 1)+"")); newRow.appendChild (newCell0); newCell1.innerHTML = "<input type='text' name='cell" + cellCount + "' >"; newRow.appendChild (newCell1); document.getElementById("tbody1").appendChild (newRow); /******************* 一下方法在IE中可以，但在Firefox中不行 //動態添加行 var newRow = table.insertRow(); //在新的行裡面添加列 var newCell0 = newRow.insertCell(); newCell0.innerHTML = "欄位" + (cellCount + 1); var newCell = newRow.insertCell(); //向列裡新增內容 newCell.appendChild = (document.createTextNode("<input type='text' name='cell" + cellCount + "' >")); //newCell.innerHTML = "<input type='text' name='cell" + cellCount + "' >"; *******************/ document.getElementById("cellCount").value = (cellCount+1); } <table width="200" border="0" id="t1"> <tbody id="tbody1"> <tr> <td nowrap="nowrap"> 資料庫 </td> <td style="text-align:left;" mce_style="text-align:left;"> <jsp:include page="../includes/dbList.jsp"/> </td> </tr> <tr> <td> 表名 </td> <td> <input name="tbName" type="text" /> </td> </tr> <tr> <td> 主鍵 </td> <td> <input name="rowKey" type="text" /> </td> </tr> <tr> <td nowrap="nowrap"> 欄位1 </td> <td> <input name="cell0" type="text" /> </td> </tr> </tbody> </table> <table> <table> <tr > <td nowrap="nowrap"> <input name="" type="button" value="添加欄位" align="left" onclick="addTR();" /> </td> <td> <s:submit name="addTeicTB" value="提交" align="left" method="addTeicTB"/> </td> <td> <input type="reset" value="重設" /> </td> </tr> </table>