Question

我的页面上有HTML表格，它是动态构建的。我让一些单元格可编辑。此外，一个单元格包含基于同一行中另外两个单元格的计算值。这是我表的一部分：

<tr class="mattersRow">
    <td class="editableCell hours">0.50</td>
    <td class="editableCell rate">170</td>
    <td class="editableCell amount">85.00</td>
</tr>

在jQuery中，我通过双击使我的单元格可编辑：

        $('.editableCell').dblclick(function (e) {

            if ($(this).find('input').length) {
                return;
            }
            var input = $("<input type='text' class='form-control' />")
                              .val($(this).text());

            $(this).empty().append(input);

            $(this).find('input')
                   .focus()
                   .blur(function (e) {
                       $(this).parent('td').text(
                          $(this).val()
                       );
                   });

在触发器更改事件方面，我扩展了var（）方法

$(function () {
            // Extending the val method so that the change event is triggered when value is changed using the val function.
            // caching the val function.
            var $valFn = $.fn.val;
            $.fn.extend({
                val: function () {
                    // Our custom val function calls the original val and then triggers the change event.
                    var valCatch = $valFn.apply(this, arguments);
                    if (arguments.length) {
                        $(this).change();
                    }
                    return valCatch;
                }
            });
        });

现在，当值发生变化时，我会触发此事件：

input.change(function () {
       $(this).closest('.amount').val($(this).closest('.hours').val() * $(this).parents('.rate').val()); 
// This is I can't get value of hours and rate cells...             
});

如何获得费率和小时数的值，计算并放入数量单元格？

Answer 1

您通过将文本转换为值并进行编辑正确启动，但在最终计算中，您尝试获取文本条目的值。为什么不将您的单元格条目转换为具有可以轻松使用的值的输入字段？ E.g。

<td> <input type='text' class="editableCell hours" size='5' value='0.50'></td>
<td> <input type='text' class="editableCell rate" size='3' value='170'></td>
<td> <input type='text' class="editableCell amount" size='8' value='85.00'></td>

Answer 2

最近的函数沿着dom树向上移动，获得元素的父元素，类似于父元素。您的费率和小时td元素不是父母，所以它不会找到它们。您可以尝试获取输入父母的兄弟姐妹。

$(this).parent().siblings(".rate");

此外，您似乎在移除模糊输入，因此您需要获取文本而不是值。

$(this).parent().siblings(".rate").text();

Answer 3

最后，几个小时后，我发现了一个正确的方法=）所以，基本上我不需要触发更改事件，我可以在替换输入回到td的文本后重新计算值，只需记住输入处于活动状态时的当前行。 jQuery代码：

$(this).find('input')
     .focus()
     .blur(function (e) {
          var row = $(this).closest('tr'); // Remember row
          $(this).parent('td').text($(this).val());
          row.find('.amount').text(parseFloat(row.find('.rate').text()) * parseFloat(row.find('.hours').text())); // Calculate and put in the amount cell
     });

更改一列时如何更新HTML表格行中的单元格？

3 个答案: