Question

我正在尝试在单击“编辑”按钮时使表格行可编辑。我尝试过的方法正在运行，但它不仅选择当前行而且选择表格的整行。有没有什么办法可以让选择器上的条件只能编辑当前行？

HTML

{% for i in data %}
<tr>
<td class="cell">{{i['roll_no']}}</td>
<td class="cell">{{i['name']}}</td>
<td class="cell">{{i['username']}}</td>
<td class="cell">{{i['password']}}</td>
<td><a class="btn btn-new" id="edit" href="#">Edit</a></td>
<td><a class="btn btn-new" id="delete" href="#">Delete</a></td>
</tr>
{% endfor %}
</tbody>

的Javascript

$('#edit').on('click', function() {
    if ($(this).html() === 'Edit') {
        $(this).html('Save');
        $('.cell').attr('contenteditable', 'True');
        $('.cell').css({'backgroundColor': 'pink','color': 'black'});
    } else {
        $(this).html('Edit');
        $(".cell").each(function() {
            var str = $(this).html();
            $(this).html(str);
        });
        $('.cell').attr('contenteditable', 'False');
        $('.cell').css({'backgroundColor': '#032F55','color': 'white'});
    }
});

Answer 1

分配一个CSS类，然后Class Selector (".class")可用于定位元素并附加事件处理程序。

HTML 的

 <a class="btn btn-new edit" id="edit" href="#">Edit</a>

在事件处理程序中，使用.closest()遍历父级TR元素，然后您可以使用.find()获取.cell元素

脚本

$('.edit').on('click', function () {
    var cells = $(this).closest('tr').find('.cell');
    if ($(this).html() === 'Edit') {
        $(this).html('Save');
        .attr('contenteditable', 'True');
        cells.css({
            'backgroundColor': 'pink',
            'color': 'black'
        });
    } else {
        $(this).html('Edit');
        cells.each(function () {
            var str = $(this).html();
            $(this).html(str);
        });
        cells.attr('contenteditable', 'False');
        cells.css({
            'backgroundColor': '#032F55',
            'color': 'white'
        });
    }
});

Answer 2

您正在使用类名.cell，因此它选择了具有类.cell的所有行。所以尝试像

这样的东西

 $(this).closest('tr').find('.cell') instead of ('.cell').

这将找到编辑所在的当前行

代码将如下：

$('#edit').on('click', function() {
    if ($(this).html() === 'Edit') {
        $(this).html('Save');
        $ $(this).closest('tr').find('.cell').attr('contenteditable', 'True');
         $(this).closest('tr').find('.cell').css({'backgroundColor': 'pink','color': 'black'});
    } else {
        $(this).html('Edit');
        $(".cell").each(function() {
            var str = $(this).html();
            $(this).html(str);
        });
         $(this).closest('tr').find('.cell').attr('contenteditable', 'False');
         $(this).closest('tr').find('.cell').css({'backgroundColor': '#032F55','color': 'white'});
    }
});

Answer 3

选择父tr然后找到具有类单元格的元素

$('#edit').on('click', function() {
    if ($(this).html() === 'Edit') {
        $(this).html('Save');
        $('.cell').attr('contenteditable', 'True');
        $('.cell').css({'backgroundColor': 'pink','color': 'black'});
    } else {
        $(this).html('Edit');
        $(".cell").each(function() {
            var str = $(this).html();
            $(this).html(str);
        });
        $(this).closest('tr').find('.cell').attr('contenteditable', 'False');
        $(this).closest('tr').find('.cell').css({'backgroundColor': '#032F55','color': 'white'});
    }
});

Answer 4

您的代码中有几个问题：

您正在循环data数组以创建行，因此为edit链接设置公共标识Edit是一种不好的做法。您可以使用循环索引来创建Edit锚点的唯一ID。
您只需选择td链接相同行中的Edit，即可获取相应的行，其中包含您点击的Edit链接然后找到td将分类.cell。
对于动态生成的元素，使用JQuery类选择器而不是id选择器总是一个好习惯。

$('.edit').on('click', function() {
    if ($(this).html() === 'Edit') {
        $(this).html('Save');
        var cellElements = $(this).closest('tr').find('.cell');
        cellElements.attr('contenteditable', 'True');
        cellElements.css({'backgroundColor': 'pink','color': 'black'});
    } else {
        $(this).html('Edit');
        var cellElements = $(this).closest('tr').find('.cell');
        cellElements.each(function() {
            var str = $(this).html();
            $(this).html(str);
        });
        cellElements.attr('contenteditable', 'False');
        cellElements.css({'backgroundColor': '#032F55','color': 'white'});
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <table border='1'>
    <tr>
      <td class="cell">Roll No 1</td>
      <td class="cell">Name 1</td>
      <td class="cell">username 1</td>
      <td class="cell">password 1</td>
      <td><a class="btn btn-new edit" href="#">Edit</a></td>
      <td><a class="btn btn-new" id="delete" href="#">Delete</a></td>
    </tr>
     <tr>
      <td class="cell">Roll No 2</td>
      <td class="cell">Name 2</td>
      <td class="cell">username 2</td>
      <td class="cell">password 2</td>
      <td><a class="btn btn-new edit" href="#">Edit</a></td>
      <td><a class="btn btn-new" id="delete" href="#">Delete</a></td>
    </tr>
  </table>
</div>

如何在jQuery中定义条件类选择器？

4 个答案: