Javascript 使用JQuery为HTML表格单元格赋值

有一个表显示模型条目，每个字段指定一个唯一的div id，该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，Nbound=5，ntposition=-24，nvariable=3，nfix=26，nfposition=-21，在测试视图时都显示为int，但是ntotal，Nbound和nfix在console.log中显示NaN，并导致在ninput=5之后在测试视图中显示NaN。

您需要知道，和之间的区别

val用于获取和设置表单元素、输入、选择等的值。 文本用于获取和设置非表单元素的纯无格式文本。 html用于从节点获取和设置内部html 所以你想要的是：

$tp.text($nh.text() + $i.val() - $nt.text());
$fp.text($nh.text() + $i.val() - $f.text());

还要小心，因为+在javascript中既是数学加法又是字符串串联，所以您可能希望将解析字符串转换为适当的数字类型。

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

---

这里不需要使用id属性，这样做会使代码过于复杂。使用相对选择器-$'input'.keyupfunction{var cells=$this.closest'tr'。children'td'；然后您可以使用var nh=cells.eq2.text；等访问单元格的值。请注意它的文本不是Val谢谢Stephen Muecke。我对jQuery中的相对选择器不熟悉，所以我会看看。我更喜欢这个答案，而不是我的懒惰答案，但我会更改硬编码的单元格索引，因为使用单元格的添加、删除或重新排序。我建议使用类或$'[id^=ntposition]'在行的上下文中。谢谢Stephen Muecke！这两个总数显示了NaN错误，但我正在检查它。@jle，添加一些console.log语句以打印出I、nt、nh和f的值，以确保它们实际上是数字。您真的想要。keyup吗？我怀疑应该是。changeYes，。change也可以工作。我将测试这两个值xperiences.console.log显示i为和int，但nt、nh和f为NaN。在模型中，这些字段为int？类型。这可能是它们在表中读取为数字，但无法通过脚本中的数字转换的原因吗？您必须给出一些返回NaN的表单元格中的值的示例。如果属性为int？和如果没有值，则数字返回0，因此不应该是一个问题，因此单元格中的实际值存在一些问题。谢谢Jon P-这是一个很好的答案。我在对加法中涉及的文本值使用parseInt时，正在与基数作斗争，但这似乎可以解决问题。