获取表格最后一行首单元格值时出现NaN问题求助

问题描述 #

现有一个已填充数据的表格，需求是：若表格无数据，计数器从1开始；若有数据，则获取最后一行首单元格对应编号。尝试以下代码后控制台输出NaN，使用parseInt处理也无效：

var id = $(this).closest('table#this-table').find('tr:last td:first').text();
console.log(id);

完整代码如下：

JavaScript代码 #

/* Based on http://jsfiddle.net/sqrrt/2/ */

$(document).ready(function() {
  var counter = 1;

  $(".button-add").on("click", function() {
    var id = $(this).closest('table#this-table').find('tr:last td:first').text();
    console.log(id);

    if ($('#this-table tr').length > 1) {
      counter = parseInt(id);
    }

    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><input type="text" name="label' + counter + '"/></td>';
    cols += '<td><input type="text" name="colour' + counter + '"/></td>';

    cols += '<td><div class="button-delete"></div></td>';
    newRow.append(cols);
    $("table.sortable-table").append(newRow);
    counter++;
  });

  $("table.sortable-table").on("change", 'input[name^="price"]', function(event) {

  });


  $("table.sortable-table").on("click", ".button-delete", function(event) {
    $(this).closest("tr").remove();

    counter -= 1
    $('.button-add').attr('disabled', false).prop('value', "Add Row");
  });

  $(".sortable").sortable({

  });
});

CSS代码 #

@import "compass/css3";
.button-delete {
  background-color: #FFDDDB;
  border: 1px solid grey;
  color: grey;
  height: 1em;
  width: 1em;
  text-align: center;
  line-height: 0.9em;
  border-radius: 0.5em;
  &:before {
    content: "-";
  }
}

.button-add {
  background-color: #E4FFE5;
  border: 1px solid grey;
  color: grey;
  height: 1em;
  width: 1em;
  text-align: center;
  line-height: 0.9em;
  border-radius: 0.5em;
  &:before {
    content: "+";
  }
}

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="this-table" class="sortable-table">
  <thead>
    <tr>
      <td>Label</td>
      <td>Colour</td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <input type="text" name="label" />
      </td>
      <td>
        <input type="text" name="colour" />
      </td>
      <td>
        <a class="deleteRow"></a>
      </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td colspan="5" style="text-align: left;">
        <div class="button-add"></div>
      </td>
    </tr>
  </tfoot>
</table>

问题原因 #

1. 选择器错误：tr:last会选中tfoot里的按钮行，而非tbody中的数据行，导致获取的内容不是目标数据。
2. 内容获取错误：首单元格里是input元素，.text()拿到的是空文本，parseInt后自然返回NaN；初始行的input name是label而不是label1，也无法提取有效编号。
3. 行数量判断错误：$('#this-table tr').length会把thead、tfoot的行都算进去，无法准确判断数据行数量。
4. 计数器逻辑缺陷：删除行后直接减counter，但如果用户调整行顺序，计数器会和实际行编号脱节。

修正方案 #

调整JavaScript代码，解决上述问题：

$(document).ready(function() {
  // 获取当前最大编号的工具函数
  function getMaxCounter() {
    var maxNum = 0;
    // 遍历tbody里的所有数据行
    $('#this-table tbody tr').each(function() {
      var inputName = $(this).find('td:first input').attr('name');
      // 从name中提取数字，兼容初始行的"label"和新增行的"labelN"
      var num = inputName.match(/\d+$/) ? parseInt(inputName.match(/\d+$/)[0]) : 0;
      if (num > maxNum) {
        maxNum = num;
      }
    });
    // 如果没有编号，返回0，加1后从1开始
    return maxNum;
  }

  $(".button-add").on("click", function() {
    var maxCounter = getMaxCounter();
    var counter = maxCounter + 1;

    var newRow = $("<tr>");
    var cols = "";

    cols += '<td><input type="text" name="label' + counter + '"/></td>';
    cols += '<td><input type="text" name="colour' + counter + '"/></td>';
    cols += '<td><div class="button-delete"></div></td>';
    
    newRow.append(cols);
    $('#this-table tbody').append(newRow); // 追加到tbody里，而非整个表格
  });

  $("table.sortable-table").on("click", ".button-delete", function(event) {
    $(this).closest("tr").remove();
    $('.button-add').attr('disabled', false).prop('value', "Add Row");
  });

  $(".sortable").sortable({});
});

修正要点 #

• 精准定位数据行：只遍历tbody里的行，避免thead、tfoot干扰。
• 正确提取编号：用正则从input的name属性中提取数字，兼容初始行和新增行的命名规则。
• 动态计算计数器：每次添加行时重新计算当前最大编号，不受行删除、排序的影响。
• 正确追加行：把新行追加到tbody中，保持表格结构规范。

内容的提问来源于stack exchange，提问作者user8512043