怎么用js实现表格新增一行

Question

我的那个jsp页面的列有10列，如果用innerhTML的方法的话，会很麻烦，还有用cloneNode的方法的也有问题，请各位看下有什么办法吗，在线等！！下面是jsp<table id="tb1" width="100%" border="1" cellspacing="0" cellpadding="0" class="thintable" >
<tr>
<td style="width:3%" align="center" bgcolor="#dfeffc"><input type="checkbox" ID="ID" name="ID" value="" onclick="selectAll(this)"  style="width:100%"/></td>
<td style="width:3%" align="center" bgcolor="#dfeffc">序号</td>
<td style="width:10%" align="center" bgcolor="#dfeffc">物资编码</td>
<td style="width:14%" align="center" bgcolor="#dfeffc">物资名称</td>
<td style="width:14%" align="center" bgcolor="#dfeffc">规格型号</td>
<td style="width:3%" align="center" bgcolor="#dfeffc">单位</td>
<td style="width:6%" align="center" bgcolor="#dfeffc">计划数量</td>
<td style="width:6%" align="center" bgcolor="#dfeffc">实际数量</td>
<td style="width:6%" align="center" bgcolor="#dfeffc">单价（元）</td>
<td style="width:6%" align="center" bgcolor="#dfeffc">计划金额（元）</td>
<td style="width:6%" align="center" bgcolor="#dfeffc">实际金额（元）</td>
<td style="width:13%" align="center" bgcolor="#dfeffc">地址信息</td>
<td style="width:10%" align="center" bgcolor="#dfeffc">备注</td>
</tr>
<c:set var="xh" value="1" />
<c:forEach items="${detailList}" var="d">
<tr>
<td align="center">
      <input type="hidden" ID="list_xh" name="list_xh" value="${xh}"/>
<input type="hidden" ID="list_ID${xh}" name="list_ID${xh}" value="${d.ID}"/>
<input type="hidden" ID="list_JJWZ_NAME_ID${xh}" name="list_JJWZ_NAME_ID${xh}" value="${d.JJWZ_NAME_ID}"/>
<input type="checkbox" ID="list_selectedxh" name="list_selectedxh" value="${xh}" style="width:100%"/>
</td>
<td align="center">${xh}</td>
<td align="center"><input id="list_JJWZ_NO${xh}" name="list_JJWZ_NO${xh}" type="text" value="${d.JJWZ_NO}" style="width:80px;text-align:left"/>
<input type="button" value="选择" onclick="selectJjWzName(null,null,${xh})"/></td>
<td align="center"><input id="list_JJWZ_NAME${xh}" name="list_JJWZ_NAME${xh}" type="text" value="${d.JJWZ_NAME}" style="width:100%;text-align:left"/></td>
<td align="center"><input id="list_SPEC_TYPE${xh}" name="list_SPEC_TYPE${xh}" type="text" value="${d.SPEC_TYPE}" style="width:100%;text-align:left"/></td>
<td align="center"><span id="list_UNIT${xh}">${d.UNIT}</span></td>
<td align="center"><input id="list_NUM1${xh}" name="list_NUM1${xh}" type="text" value="${d.NUM1}" style="width:100%;text-align:right" onchange="calcMoney1(${xh})" /></td>
<td align="center"><input id="list_NUM${xh}" name="list_NUM${xh}" type="text" value="${d.NUM}" style="width:100%;text-align:right" onchange="calcMoney(${xh})"/></td>
<td align="center"><input id="list_PRICE${xh}" name="list_PRICE${xh}" type="text" value="${d.PRICE}" style="width:100%;text-align:right" onchange="calcMoney(${xh});calcMoney1(${xh})"/></td>
<td align="right" style="text-align:right"><span id="list_MONEY1${xh}">${d.MONEY1}</span></td>
<td align="right" style="text-align:right"><span id="list_MONEY${xh}">${d.MONEY}</span></td>
<td align="center"><input id="list_ADDR${xh}" name="list_ADDR${xh}" type="text" value="${d.ADDR}" style="width:100%"/></td>
<td align="center"><input id="list_REMARKS${xh}" name="list_REMARKS${xh}" type="text" value="${d.REMARKS}" style="width:100%" onKeyPress="keyDown()"/></td>
</tr>
<c:set var="xh" value="${xh+1}" />
</c:forEach>
<c:forEach begin="0" end="9" step="1" >
<tr>
<td align="center">
<input type="hidden" ID="list_xh" name="list_xh" value="${xh}"/>
<input type="hidden" ID="list_ID${xh}" name="list_ID${xh}" value=""/>
<input type="hidden" ID="list_JJWZ_NAME_ID${xh}" name="list_JJWZ_NAME_ID${xh}" value=""/>
<input type="checkbox" ID="list_selectedxh" name="list_selectedxh" value="${xh}" style="width:100%"/>
</td>
<td align="center">${xh}</td>
<td align="center"><input id="list_JJWZ_NO${xh}" name="list_JJWZ_NO${xh}" type="text" value="" style="width:80px;text-align:left"/>
<input type="button" value="选择" onclick="selectJjWzName(null,null,${xh})"/></td>
<td align="center"><input id="list_JJWZ_NAME${xh}" name="list_JJWZ_NAME${xh}" type="text" value="" style="width:100%;text-align:left"/></td>
<td align="center"><input id="list_SPEC_TYPE${xh}" name="list_SPEC_TYPE${xh}" type="text" value="" style="width:100%;text-align:left"/></td>
<td align="center"><span id="list_UNIT${xh}"></span></td>
<td align="center"><input id="list_NUM1${xh}" name="list_NUM1${xh}" type="text" value="" style="width:100%;text-align:right" onchange="calcMoney1(${xh})"/></td>
<td align="center"><input id="list_NUM${xh}" name="list_NUM${xh}" type="text" value="" style="width:100%;text-align:right" onchange="calcMoney(${xh})"/></td>
<td align="center"><input id="list_PRICE${xh}" name="list_PRICE${xh}" type="text" value="" style="width:100%;text-align:right" onchange="calcMoney(${xh});calcMoney1(${xh})"/></td>
<td align="right" style="text-align:right"><span id="list_MONEY1${xh}"></span></td>
<td align="right" style="text-align:right"><span id="list_MONEY${xh}"></span></td>
<td align="center"><input id="list_ADDR${xh}" name="list_ADDR${xh}" type="text" value="" style="width:100%"/></td>
<td align="center"><input id="list_REMARKS${xh}" name="list_REMARKS${xh}" type="text" value="" style="width:100%" /></td>
</tr>
<c:set var="xh" value="${xh+1}" />
</c:forEach>
</table>

Answer 1

楼主搜下 js增加tr 吧，太多相关信息了。

Answer 2

楼主代码太多，所以写了个简单给你参考如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <title>修改对象原型</title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        function add() {
            var table = document.getElementById("table");
            var tr = table.insertRow(-1);
            var td = tr.insertCell(-1);
            td.innerHTML = "B";
        }
</script>
 </head>
 <body>
 <input type="button" value="add" onclick="add()"/>
 <table id="table" border="1">
<tr>
<td>a
</td>
</tr>
</table>
 </body>
</html>

Answer 3

3楼的代码可行，但我的如果都用innerhTML来的话，那代码量太大了

Answer 4

上面的代码中用
<c:forEach begin="0" end="9" step="1" >
循环了10次，所有共有10行
我想在最后一列按回车的时候新增一行，该怎么处理

Answer 5

在你的最后一列加上onkeydown事件。如果 keyCode==13 则调用 add() 函数。

Answer 6

<script language="javascript">
function clone()
{
var tbody=tableid.lastChild;
newrow=tbody.lastChild.cloneNode(true);
tbody.appendChild(newrow);
}
</script>
下面调用这个函数即可

Answer 7

7楼的方法是复制某一行，但是我的是通过<c:forEach begin="0" end="9" step="1" >
循环出来的，有些数据时动态生成的，比如上面的jsp代码中${xh}的值，如果复制的话，这些值就改变不了了

Answer 8

$("table").append("<tr><td>aa</td><td>cc</td></tr>");
$("table")  //此处可以用 #id

Answer 9

   $("#id").append("<tr><td>表格代码</td></tr>")

Answer 10

不是这样的，请看一下我以下的jsp代码

Answer 11

<table id="tbl" width="100%" border="1" cellspacing="0" cellpadding="0" class="thintable" >
<tr>
<td style="width:3%" align="center" bgcolor="#dfeffc"><input type="checkbox" ID="ID" name="ID" value="" onclick="selectAll(this)"  style="width:100%"/></td>
<td style="width:3%" align="center" bgcolor="#dfeffc">序号</td>
<td style="width:10%" align="center" bgcolor="#dfeffc">物资编码</td>
<td style="width:14%" align="center" bgcolor="#dfeffc">物资名称</td>
<td style="width:14%" align="center" bgcolor="#dfeffc">规格型号</td>
<td style="width:3%" align="center" bgcolor="#dfeffc">单位</td>
<td style="width:6%" align="center" bgcolor="#dfeffc">计划数量</td>
<td style="width:6%" align="center" bgcolor="#dfeffc">实际数量</td>
<td style="width:6%" align="center" bgcolor="#dfeffc">单价（元）</td>
<td style="width:6%" align="center" bgcolor="#dfeffc">计划金额（元）</td>
<td style="width:6%" align="center" bgcolor="#dfeffc">实际金额（元）</td>
<td style="width:13%" align="center" bgcolor="#dfeffc">地址信息</td>
<td style="width:10%" align="center" bgcolor="#dfeffc">备注</td>
</tr>
<c:set var="xh" value="1" />
<c:forEach items="${detailList}" var="d">
<tr>
<td align="center">
      <input type="hidden" ID="list_xh" name="list_xh" value="${xh}"/>
<input type="hidden" ID="list_ID${xh}" name="list_ID${xh}" value="${d.ID}"/>
<input type="hidden" ID="list_JJWZ_NAME_ID${xh}" name="list_JJWZ_NAME_ID${xh}" value="${d.JJWZ_NAME_ID}"/>
<input type="checkbox" ID="list_selectedxh" name="list_selectedxh" value="${xh}" style="width:100%"/>
</td>
<td align="center">${xh}</td>
<td align="center"><input id="list_JJWZ_NO${xh}" name="list_JJWZ_NO${xh}" type="text" value="${d.JJWZ_NO}" style="width:80px;text-align:left"/>
<input type="button" value="选择" onclick="selectJjWzName(null,null,${xh})"/></td>
<td align="center"><input id="list_JJWZ_NAME${xh}" name="list_JJWZ_NAME${xh}" type="text" value="${d.JJWZ_NAME}" style="width:100%;text-align:left"/></td>
<td align="center"><input id="list_SPEC_TYPE${xh}" name="list_SPEC_TYPE${xh}" type="text" value="${d.SPEC_TYPE}" style="width:100%;text-align:left"/></td>
<td align="center"><span id="list_UNIT${xh}">${d.UNIT}</span></td>
<td align="center"><input id="list_NUM1${xh}" name="list_NUM1${xh}" type="text" value="${d.NUM1}" style="width:100%;text-align:right" onchange="calcMoney1(${xh})" /></td>
<td align="center"><input id="list_NUM${xh}" name="list_NUM${xh}" type="text" value="${d.NUM}" style="width:100%;text-align:right" onchange="calcMoney(${xh})"/></td>
<td align="center"><input id="list_PRICE${xh}" name="list_PRICE${xh}" type="text" value="${d.PRICE}" style="width:100%;text-align:right" onchange="calcMoney(${xh});calcMoney1(${xh})"/></td>
<td align="right" style="text-align:right"><span id="list_MONEY1${xh}">${d.MONEY1}</span></td>
<td align="right" style="text-align:right"><span id="list_MONEY${xh}">${d.MONEY}</span></td>
<td align="center"><input id="list_ADDR${xh}" name="list_ADDR${xh}" type="text" value="${d.ADDR}" style="width:100%"/></td>
<td align="center"><input id="list_REMARKS${xh}" name="list_REMARKS${xh}" type="text" value="${d.REMARKS}" style="width:100%" onKeyPress="keyDown()"/></td>
</tr>
<c:set var="xh" value="${xh+1}" />
</c:forEach>
<c:forEach begin="0" end="9" step="1" >
<tr>
<td align="center">
<input type="hidden" ID="list_xh" name="list_xh" value="${xh}"/>
<input type="hidden" ID="list_ID${xh}" name="list_ID${xh}" value=""/>
<input type="hidden" ID="list_JJWZ_NAME_ID${xh}" name="list_JJWZ_NAME_ID${xh}" value=""/>
<input type="checkbox" ID="list_selectedxh" name="list_selectedxh" value="${xh}" style="width:100%"/>
</td>
<td align="center">${xh}</td>
<td align="center"><input id="list_JJWZ_NO${xh}" name="list_JJWZ_NO${xh}" type="text" value="" style="width:80px;text-align:left"/>
<input type="button" value="选择" onclick="selectJjWzName(null,null,${xh})"/></td>
<td align="center"><input id="list_JJWZ_NAME${xh}" name="list_JJWZ_NAME${xh}" type="text" value="" style="width:100%;text-align:left"/></td>
<td align="center"><input id="list_SPEC_TYPE${xh}" name="list_SPEC_TYPE${xh}" type="text" value="" style="width:100%;text-align:left"/></td>
<td align="center"><span id="list_UNIT${xh}"></span></td>
<td align="center"><input id="list_NUM1${xh}" name="list_NUM1${xh}" type="text" value="" style="width:100%;text-align:right" onchange="calcMoney1(${xh})"/></td>
<td align="center"><input id="list_NUM${xh}" name="list_NUM${xh}" type="text" value="" style="width:100%;text-align:right" onchange="calcMoney(${xh})"/></td>
<td align="center"><input id="list_PRICE${xh}" name="list_PRICE${xh}" type="text" value="" style="width:100%;text-align:right" onchange="calcMoney(${xh});calcMoney1(${xh})"/></td>
<td align="right" style="text-align:right"><span id="list_MONEY1${xh}"></span></td>
<td align="right" style="text-align:right"><span id="list_MONEY${xh}"></span></td>
<td align="center"><input id="list_ADDR${xh}" name="list_ADDR${xh}" type="text" value="" style="width:100%"/></td>
<td align="center"><input id="list_REMARKS${xh}" name="list_REMARKS${xh}" type="text" value="" style="width:100%" onKeyPress="keyDown()"/></td>
</tr>
<c:set var="xh" value="${xh+1}" />
</c:forEach>
</table>