js代码如下
var i=1; var max=20;//最大tr添加行数
$("#btnAdd").click(function () {
if (i <= max) {
$str = '';
$str += '<tr><td colspan="3" ><table style="border: solid 0px ; width: 100%;height:100%;" align="left"><tr>';
$str += '<td><input id="txtAddTr' + i + '" name="txtAddTr" type="text" value="" style="width: 140px" /><span style="color: red">*</span></td>';
$str += '<td id="btnDel" style="cursor:pointer" ><input style="cursor: pointer;" title="双击删除" type="button" value="删除" /> </td> ';
$str += '</tr>';
$str += '</table></td></tr>';
$("#addTr").append($str);
i++;
count++;
}
});
//删除js代码
$('#btnDel').live('dblclick', function () {
$(this).parent().remove(); i--;
});
html代码
<tbody id="addTr">
.................................................
<input id="btnAdd" type="button" style="cursor: pointer;" value="添加" />
.................................................
</tbody >
我每次点击添加的时候会出现一行,但是我删除之后,该行的位置被空白占领,再添加在空白下面,占的位置很难看,如下图所示,哪位有办法去掉那个空白不?
就是要把$str整个删掉洛
$(this).parent().remove(); 改为$(this).parent().parent().parent().parent().remove();
谢谢各位,是只删除到 删除按钮的一级,楼上正解。
$(this).parent() 打出来看是个啥,或许不是tr呢
可以用$(this).parent("tr").remove();
<html> <head> <script type="text/javascript" src="jquery-1.8.0.js"></script> <script type="text/javascript"> var i=0; $(function(){ $("#btnAdd").click(function () { var $str=""; $str += "<tr><td colspan=\"3\" >hello"+(i++)+"</td><td><input type=\"button\" value=\"delete\" onclick=\"deletetr(this)\" /></td></tr>"; $("#table>tbody").append($str); }); }); function deletetr(e) { $(e).parent().parent().remove(); } </script> </head> <body> <input id="btnAdd" type="button" style="cursor: pointer;" value="添加" /> <table id="table"> <tbody> </tbody> </table> </body> </html>