Question

我想从表中删除所有空行，但每次单击按钮执行此操作时，表标题也会被删除。

我该如何解决这个问题？

这是小提琴：

FIDDLE

要重现此问题，您需要执行以下操作：

点击Edit Properties。
点击Add Row并添加一些属性（确保将一行完全留空）。
点击Save。
点击Remove Empty Rows。

Answer 1

问题是，你正在寻找第3行中的td-tags而你的头部没有td标签。因此，文本为空，将被删除。

Answer 2

请参阅http://jsfiddle.net/a8wLy18w/

我添加了一个tbody，因此您可以将主体与标题区分开来

 <table align="center" class="table table-bordered table-hover hide4" id="tab_properties">
      <thead>
        <tr>
          <th class="text-center col-lg-3"> Property </th>
          <th class="text-center col-lg-4"> Value </th>
          <th class="text-center col-lg-1"></th>
        </tr>
      </thead>
      <tbody>

      </tbody>
    </table>

然后我更改了你的添加和删除以在jquery中使用tbody

$('#click').on('click', function() {
  $("#tab_properties tbody tr").each(function() {
    var cell = $.trim($(this).find('td').text());
    if (cell.length == 0) {
      console.log('empty');
      $(this).addClass('nodisplay');
    }
  });
});

$('#add_property').unbind('click').click(function() {
  $('#tab_properties tbody').append("<tr><td><input id=\"pn" + properties_id + "\" class=\"editable-input\"></td><td><input id=\"pv" + properties_id + "\" class=\"editable-input\"></td><td><div id=\"pr" + properties_id + "\" class=\"glyphicon glyphicon-remove remove_property\" type=\"button\" style=\"cursor:pointer\"></div></td></tr>");
  properties_id++;
});

从表jQuery中删除空行

2 个答案: