每次单击按钮时如何将行插入现有表

问题描述 投票:0回答:1

我有以下代码:

<table id="t1"> 
<tr>
    <td>Text A</td>
    <td>Text B</td>
</tr>
<% int count1 = -1;
    for(int i=0; i<3; i++) { %>
<tr>
    <td><input type="text" id="amount<%=i%>"></td>
    <td><input type="text" id="convertedAmount<%=i%>" readonly></td>
</tr>
<%count1 =i;
}%>
<tr>
    <td><input type="button" onclick="addRow(<%=count1%>)" value="Add Row"></td>
</tr>
</table>

使用Javascript:

function appendRow(val){
   var tbody = document.getElementById("t1").getElementsByTagName("tbody")[0];
   var row = document.createElement("TR");
   var textA= document.createElement("TD");
   textA.innerHTML = '<input type="text" id="amount'+val+'">';
   var textB= document.createElement("TD");
   textB.innerHTML = '<input type="text" id="convertedAmount'+val+'" readonly>';
     row.appendChild(textA);
     row.appendChild(textB);
     tbody.appendChild(row);
   }

编辑--- 好的,所以我已经完成了这部分,感谢Barmar。所以现在的问题是如何增加val的值(从先前存在的数据继续)

如果我要使用这个Javascript,它只会添加带有文本的行。那么如何使用相应的文本框向这个表添加行,如果我要使用它,甚至还有下拉列表。可以只使用Javascript或需要使用servlet吗?

javascript html-table insert rows
1个回答
0
投票

在JavaScript函数中添加以下代码行...

val = tbody.children.length;

赋值tbody = document.getElementById('t1')后.......

© www.soinside.com 2019 - 2024. All rights reserved.