如果我编辑同一行中的另一个单元格，如何更改表格中一个单元格的文本？答案

【问题标题】：How can I change the text of one cell in my table, if I edit another cell in the same row?如果我编辑同一行中的另一个单元格，如何更改表格中一个单元格的文本？
【发布时间】：2017-01-25 11:35:26
【问题描述】：

如果我在a 或b 列中编辑单元格，c 列中的值应该会改变。但是现在c 中所有列的值都在变化。但我只需要在我进行更改的特定行中更改值。

$(".table").each(function () {
    $(this).find('.total').data('total',text);
    $(this).find('.total').text(text);
});


    // Editable Cells

    $(document).on('click', '.editable', function (event) {
        if ($(this).children("input").length > 0)
            return false;
        var tdObj = $(this);
        var preText = tdObj.html();
        var inputObj = $("<input type='text' />");
        tdObj.html("");
        inputObj.width(tdObj.width())
            .height(tdObj.height())
            .css({
                border: "0px",
                height: "25px",
                width: "50%",
            })
            .val(preText)
            .appendTo(tdObj)
            .trigger("focus")
            .trigger("select");
        inputObj.keyup(function (event) {
            if (13 == event.which) { // press ENTER-key
                var text = $(this).val();
                tdObj.html(text);
                $("table").each(function () {
                    $(this).find('.total').text(text);
                });

            } else if (27 == event.which) { // press ESC-key
                tdObj.html(preText);
            }
        });
        inputObj.click(function () {
            return false;
        });
        inputObj.blur(function (event) {
            tdObj.html(preText);
        });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:50%">
  <tr>
    <th>a</th>
    <th>b</th> 
    <th>c</th>
  </tr>
  <tr>
    <td class="editable">20</td>
    <td class="editable">30</td> 
    <td class="total">50</td>
  </tr>
  <tr>
    <td class="editable">10</td>
    <td class="editable">20</td> 
    <td class="total">94</td>
  </tr>
</table>

【问题讨论】：

既然你给 C 赋予了相同的类名，即总，它对两者都发生了变化
是的，但我无法更改这一点，需要具有相同的类名。所以我想找到最接近已编辑单元格的“总数”

标签： jquery function html-table each

【解决方案1】：

使用.closest('tr').find('.total')

$(document).ready(function() {
  $('.editable').keyup(function() {
    var sum = parseInt($(this).text())
           // select next .editable, that is not currently selected
           + parseInt($(this).closest('tr').find('.editable').not(this).text());

    $(this).closest('tr').find('.total').text(sum);
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:50%">
  <tr>
    <th>a</th>
    <th>b</th>
    <th>c</th>
  </tr>
  <tr>
    <td class="editable" contenteditable="true">20</td>
    <td class="editable" contenteditable="true">30</td>
    <td class="total">50</td>
  </tr>
  <tr>
    <td class="editable" contenteditable="true">10</td>
    <td class="editable" contenteditable="true">20</td>
    <td class="total">94</td>
  </tr>
</table>

【讨论】：