gpt4 book ai didi

javascript - 使用 JQuery 为 HTML 表格单元格赋值

转载 作者:太空宇宙 更新时间:2023-11-04 16:15:13 24 4
gpt4 key购买 nike

有一个显示模型条目的表格,每个字段指定一个唯一的 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>
}

编辑:返回“NaN”的 ID 示例如下:ntotal = 29,nbought = 5,ntposition = -24,nvariable = 3,nfixed = 26,nfposition = -21,从测试 View 来看,所有这些都显示为 int,但 ntotal、nbought 和 nfixed 在 View 中显示“NaN” console.log 并导致“NaN”在 ninput = 5 后出现在测试 View 中。

最佳答案

$i 是文本框,因此要获取它的值,您需要使用 $i.val()。其他元素是表格单元格,因此要获取或设置值,您需要 .text(),而不是 .val()。但是,您通过使用 id 属性使代码过于复杂。相反,删除 then 并使用相对选择器

$('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
}

关于javascript - 使用 JQuery 为 HTML 表格单元格赋值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32576207/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com