jquery操作表格 添加行 删除行的浏览器兼容性有关问题
日期：2014-05-16 浏览次数：20441 次
jquery操作表格 添加行 删除行的浏览器兼容性问题
首先这个代码我也是从网上搜索找到使用的，一开始觉得用起来不错，很好用，比别的代码要好
好的原因在于：添加很多表格行之后，比如填写了后面几行，再删除前面的第一行或第二行，后面表格行里文本框的值还会保留存在。这个功能一定要的。
问题来了，在ie8.0浏览器下测试正常，但是chrome浏览器有问题，问题体现在：
比如添加了新的一行后，填写好该行文本框里的数据，再点新增一行，前面第一行文本框里填好的数据，变成空的了。
------解决方案--------------------
不过整个方法BUG挺多的...
首先这个代码我也是从网上搜索找到使用的，一开始觉得用起来不错，很好用，比别的代码要好
好的原因在于：添加很多表格行之后，比如填写了后面几行，再删除前面的第一行或第二行，后面表格行里文本框的值还会保留存在。这个功能一定要的。
问题来了，在ie8.0浏览器下测试正常，但是chrome浏览器有问题，问题体现在：
比如添加了新的一行后，填写好该行文本框里的数据，再点新增一行，前面第一行文本框里填好的数据，变成空的了。
<script type="text/javascript">
var rowCount = 0;
function addRow(){
rowCount++;
var rowTemplate = '<tr class="tr_'+rowCount+'"><td>'+rowCount+'</td><td class="cl1"><input type="text" name="Add[]" value="" >'+rowCount+'</td><td class="cl1"><a href="#" onclick=delRow('+rowCount+')>删除</a></td></tr>';
var tableHtml = $("#testTable tbody").html();
tableHtml += rowTemplate;
$("#testTable tbody").html(tableHtml);
}
function delRow(_id){
$("#testTable .tr_"+_id).remove();
rowCount--;
}
</script>
<title>jquery操作表格测试</title>
</head>
<body>
<table id="testTable" border="1" width="500">
<tr>
<td>序号</td>
<td >内容</td>
<td >操作</td>
</tr>
</table>
<input type="button" value="添加行" onclick="addRow();"/>
</body>
------解决方案--------------------
$("#testTable tbody").append(rowTemplate);
不过整个方法BUG挺多的...
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
