2

我有一个表单，我想允许用户添加任意​​数量的字段，然后将他们给我的信息插入到数据库中。如果有任何未使用的行，他们可以通过单击删除文本来删除它们，这样我的数据库中就没有一堆空行。

我已经完成了使用 jQuery 添加行并将数据插入数据库，但我正在努力删除不需要的行。当 jQuery 运行 remove() 函数时，它只是给 tr 显示 none 使用户无法看到行但它们仍然存在并将空行插入我的数据库中。有没有办法完全摆脱表格中的整行，从而无法输入空白数据？

这是我的代码：

html:

<table width="960px" border="0" id="entries">
<tr>
  <td><b></b></td>
  <td><b>Department</b></td>
  <td><b>Class</b></td>
  <td><b>Lot #</b></td>
  <td><b>Short Description</b></td>
</tr>

<tr>
  <td><b>1</b></td>
  <td class="firstEntry"><input type="text" name="fields[]"></td>
  <td><input type="text" name="class[]"></td>
  <td><input type="text" name="lot[]" size="5"></td>
  <td><input type="text" name="description[]" size="86"></td>
  <td></td>
</tr>


<div id="container">
<p id="add_field"><a href="#"><span>Add Entries.....</span></a></p>

jQuery：

<script type="text/javascript">
var count = 0;
$(function(){
    var count = 1;
    $('p#add_field').click(function(){

        count +=1;

    $('table#entries').append(
        '<tr><td><strong>' + count + '</strong></td>' + 
        '<td><input id="department_' + count + '" name="fields[]' + '" type="text" /></td>' +
        '<td><input id="class_' + count + '" name="class[]' + '" type="text" /></td>' +
        '<td><input id="lot_' + count + '" name="lot[]' + '" type="text" size="5"/></td>' +
        '<td><input id="description_' + count + '" name="description[]' + '" type="text" size="86"/></td>' +
        '<td><span class="delete">Remove</span></td></tr>' );

     $(".delete").click(function () {
      $(this).closest('tr').remove("slow");
    });

    });



});

4

2 回答 2

2

它可以在没有“慢”的情况下工作：

    $(".delete").click(function () {
        $(this).closest('tr').remove();
    });

http://jsfiddle.net/kn3eB/

.remove()的参数是一个选择器。您可能会想到.hide()需要持续时间的速度。

于 2013-03-20T17:14:32.883 回答
2

.remove()不以动画效果为参数，仅以选择器为参数。也许您对它与.fadeOut()不透明度和显示属性的更改感到困惑？

试试这个jsFiddle 例子

$(this).closest('tr').fadeOut(function () {
    $(this).remove()
});
于 2013-03-20T17:15:46.597 回答