使用JQuery为HTML表格单元格分配一个值
Assign a Value to a HTML Table Cell using JQuery
有一个显示模型条目的表,每个字段指定一个唯一的div id,结合一个关键字和每一行的id。当用户在表的输入列中输入一个数字时,脚本应该:获取同一行上单元格的位置;并根据其他单元格的值更改两个预定单元格的值。在最终更新之前,测试似乎是成功的。我尝试过使用。val()、。value和。html(),结果单元格变为空白,如果脚本没有错误,则显示0。有人请张贴正确的jQuery命令,为什么它的工作?提前感谢。
表:<table id="dt_Positions" class="table table-striped">
<thead>
<tr>
<th class="text-center">Month</th>
<th class="text-center">Owed</th>
<th class="text-center">Bought</th>
<th class="text-center">Total Position</th>
<th class="text-center">Non-Fixed</th>
<th class="text-center">Fixed</th>
<th class="text-center">Fixed Position</th>
<th class="text-center">Proposed</th>
</tr>
</thead>
<tbody>
@if (Model.Forecasts.Any())
{
foreach (var record in Model.Summaries)
{
<tr>
<td id="nmonth@(record.fID)" align="center">@String.Format("{0:d}", @record.Month)</td>
<td id="ntotal@(record.fID)" align="center">@record.NTotal</td>
<td id="nbought@(record.fID)" align="center">@record.NBought</td>
<td id="ntposition@(record.fID)" align="center">@record.NTotalPosition</td>
<td id="nvariable@(record.fID)" align="center">@record.NVariable</td>
<td id="nfixed@(record.fID)" align="center">@record.NFixed</td>
<td id="nfposition@(record.fID)" align="center">@record.NFPosition</td>
<td id="ninput@(record.fID)" align="center"><input class="nInput" type="number" name="quantity" min="1" max="50000"></td>
</tr>
}
}
</tbody>
</table>
脚本:
@section Scripts
{
<script src="~/Scripts/jquery-2.1.3.js"></script>
<script type="text/javascript" language="javascript">
$(function () {
$('[id^=ninput]').keyup(function (e) {
var $id = $(this).attr('id');
var $i = $(this);
var $idNum = $id.slice(6);
var $tp = $('#ntposition' + $idNum);
var $fp = $('#nfposition' + $idNum);
var $nt = $('#ntotal' + $idNum);
var $nh = $('#nbought' + $idNum);
var $f = $('#nfixed' + $idNum);
//The lines below appear to be the hiccup
$tp.val($nh.val() + $i.html() - $nt.val());
$fp.val($nh.val() + $i.html() - $f.val());
debugger;
});
});
</script>
}
EDIT:返回"NaN"的id示例如下:ntotal = 29, nbought = 5, ntposition = -24, nvariable = 3, nfixed = 26, nfposition = -21,所有从测试视图中显示为int,但ntotal, nbought和nfixed在console.log中显示"NaN",并导致"NaN"在ninput = 5之后出现在测试视图中
$i
是文本框,因此要获取其值需要使用$i.val()
。其他元素是表格单元格,因此要获取或设置值,您需要.text()
,而不是.val()
。但是,使用id
属性会使代码过于复杂。相反,删除它们并使用相对选择器
$('input').keyup(function() { // or $('.nInput').keyup
var i = Number$(this).val());
var cells = $(this).closest('tr').children('td');
var tp = cells.eq(3);
var fp = cells.eq(6);
// Get current cell values as a number
var nt = Number(cells.eq(1).text());
var nh = Number(cells.eq(2).text());
var f = Number(cells.eq(5).text());
// Update totals
tp.text(nh + i - nt);
fp.text(nh + i - f);
});
旁注:var i = $(this).val();
的值可以是null
,但不确定你想如何处理这个-可能只是使用
var i = $(this).val();
if (!i) {
return; // don't do any calculations
}
您需要知道val(), text()和html()之间的区别
-
val()
用于获取和设置表单元素的值,input
,select
等。 -
text()
用于获取和设置非表单元素的纯格式文本。 -
html()
用于从节点获取和设置内部Html
所以你想要的是:
$tp.text($nh.text() + $i.val() - $nt.text());
$fp.text($nh.text() + $i.val() - $f.text());
也要小心,因为+
是数学加法和javascript中的字符串连接,所以你可能想要将你的解析字符串转换为适当的数字类型。
相关文章:
- 将jsp文件下拉列表中的选定项分配给一个java变量(比如String selection)
- 将节点数据分配给另一个变量jstree
- '这'在使用之前分配给了一个var
- 为了避免创建全局变量,可以将所有变量分配给一个对象吗
- 使用一个表达式将两个变量分配给相同的值
- 在javascript中获取servlet值,并使用ajax将该值分配给一个文本框
- 为什么在Javascript中将一个对象分配给另一个变量也会更改初始对象
- 仅将 CSS 规则应用于
中的第一个 ,而不分配类/ID - 为什么我们被教导将document.getElementById(“id”)分配给一个变量,然后将该变量与属性一起使用
- 多个图像显示带有动态创建的画布的最后一个图像并分配给图像
- 如何在javascript中将变量的值分配给另一个方法
- 使用 JQuery 从另一个元素的 id 为图像分配属性
- 可以't分配给一个对象数组javascript
- 在jquery中创建和分配一个css类
- 在getJSON函数中分配一个变量
- 编写一个代码来拆分字符串“test”,并将Name的值分配给文本框,将ok的值分配到复选框
- 如何将行数计数分配给另一个值,该值稍后可在Protractor中的测试用例中使用
- ExtJS:为存储中的数据分配一个变量
- JavaScript 创建一个随机表生成器并为单元格分配颜色
- 我可以使用一个函数来帮助分配和验证作为对象传递的属性吗