Question

我想我一直在看这段代码。

目标：添加并删除所选行中的列

我差点遇到这个问题。什么工作：

将列添加到所选行 ONCE
如果列中包含其他行而另一行已选中，请从原始列中删除列并添加到新选定的
重新选择时从行中删除列

例如：

假设我选择ID = 2的行......将显示该行的额外列。然后我重新选择同一行...不删除额外的列。但是，如果我再次选择该行，连续第3次，则不会显示额外的列。

我发现造成这种情况的原因是因为我的上一个if语句，所以列永远不会重新添加。

的jQuery

      var lastClicked;
      $(document).ready(function() {
          var tr = $('tbody tr');
          $(tr).each(function () {
              $(this).addClass("notShown");
          });

          $(tr).click(function() {

              var rowID = $(this).attr('id');
              var editRow = "<td><a href='edit?id=" + rowID + "' id='editBtn'>Edit</a></td>";
              var deleteRow = "<td><a id='deleteBtn' onclick='confirmDelete(" + rowID + ")'>Delete</a></td>";

              $(tr).each(function () {
                  if ($(this).hasClass('shown')) {
                      for (var i = 0; i < 2; i++) {
                          $(this).find("td:first-child").remove();
                      }
                      $(this).removeClass("shown").addClass("notShown");
                  }
              });
              if (lastClicked != $(this).attr('id')) {
                  $(this).prepend(editRow);
                  $(this).prepend(deleteRow);
                  $(this).removeClass("notShown").addClass("shown");
              }

              lastClicked = $(this).attr('id');
          });
      });

Answer 1

我不确定我是否理解你想要实现的目标，但是你觉得这样做有点不对劲。

而不是添加和删除列，为什么不隐藏和显示其中的不同内容？

我写了一个简短的例子，说明我在jsfiddle的意思： User-Agent

你显然必须编写一些代码来代替小提琴，所以继承了我写的javascript和html：

$("table tr").click(function(){
  // To just change current row
  $(this).find("td:last-child > *").toggleClass("hide");

  // To change all rows
  //$(this).parent().find("td:last-child > *").toggleClass("hide");
});

<table>
  <thead>
    <tr>
      <th>ID</th>
      <th>Info 1</th>
      <th>Info 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Hello</td>
      <td><span class="hide">delete</span><span>edit</span></td>
    </tr>
    <tr>
      <td>2</td>
      <td>Hello</td>
      <td><span class="hide">delete</span><span>edit</span></td>
    </tr>
  </tbody>
</table>

通过类jQuery向表添加列

1 个答案: