更改一列时如何更新HTML表格行中的单元格？
更改一列时如何更新HTML表格行中的单元格？
提问于 2013-11-18 09:22:25
我的页面上有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...
});如何得到速率和小时细胞的值，计算并放入数量单元格？
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-11-18 12:23:47
最后，几个小时后，我找到了一个合适的way=)，因此，基本上我不需要触发更改事件，我可以在将输入替换回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
});Stack Overflow用户
发布于 2013-11-18 09:34:46
通过将文本转换为值并对其进行编辑，您正确地开始了，但是在最后的计算中，您正在尝试获取文本条目的值。为什么不将单元格条目转换为输入字段，这些字段有您可以轻松处理的值？例如。
<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>Stack Overflow用户
发布于 2013-11-18 12:10:24
最近的函数在dom树上传递，得到元素的父函数，类似于父函数。您的费率和小时td元素不是父母，所以它不会找到他们。你可以试着得到输入父母的兄弟姐妹。
$(this).parent().siblings(".rate");此外，它看起来像您删除您的输入在模糊，所以您将需要得到文本，而不是价值。
$(this).parent().siblings(".rate").text(); 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20053843
复制相关文章
点击加载更多
相似问题
如何更改html表格单元格类型
单击表格时如何更改表格中单元格的内容
如何在html中更改表格单元格的颜色
更改html表格中表格单元格的高度
如何使用Jquery更改表格单元格中的html
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
