基于表格内文本框值的数据过滤问题咨询：取值方法、动态行过滤及无jQuery替代方案

1. 如何获取表格td元素内文本框的值？ #

你当前代码里的问题在于直接对td:nth(1)调用val()，但val()是表单元素专属方法，td本身没有value属性——你需要先定位到td内部的<input>元素，再获取它的值。

修正后的jQuery代码片段：

// 替换你原来的var id = ...这一行
var inputValue = $row.find("td:nth(1) input").val().trim();

这里用td:nth(1) input精准定位到第二个td里的文本框，再调用val()就能拿到正确内容，trim()是为了去掉前后空格，避免不必要的匹配误差。

2. 添加额外行后实现基于文本框值的数据过滤？ #

你的现有过滤逻辑是每次键盘输入时遍历表格所有行，只要新增的行结构和现有行一致（第二个td里包含文本框），只需要确保过滤时每次都重新遍历所有数据行，新增的行就会被自动纳入过滤范围。

可以把过滤逻辑封装成独立函数，这样无论是搜索框输入还是新增行后，都能随时调用：

function filterTable() {
  var value = $("#srch").val().trim();
  $("#Filtertable tbody tr").each(function() {
    var inputValue = $(this).find("td:nth(1) input").val().trim();
    // 这里用indexOf判断是否包含输入值，你也可以改回开头匹配的逻辑（inputValue.indexOf(value) === 0）
    if (inputValue.indexOf(value) !== -1) {
      $(this).show();
    } else {
      $(this).hide();
    }
  });
}

// 绑定搜索框的keyup事件
$("#srch").on("keyup", filterTable);

// 示例：新增行的函数
function addNewRow(text) {
  var newRow = `
    <tr>
      <td><input type="checkbox"></td>
      <td><input type="text" value="${text}"></td>
    </tr>
  `;
  $("#Filtertable tbody").append(newRow);
  // 新增行后主动调用一次过滤，保持结果一致
  filterTable();
}

这样不管你什么时候调用addNewRow()添加新行，过滤逻辑都会自动覆盖这些新行。

3. 不使用jQuery的原生JavaScript替代方案 #

完全可以用原生JS实现相同的过滤功能，逻辑和jQuery版本一致，只是API不同：

// 获取元素
const searchInput = document.getElementById('srch');
const tableBody = document.querySelector('#Filtertable tbody');

// 过滤函数
function filterTableNative() {
  const value = searchInput.value.trim().toLowerCase();
  const rows = tableBody.querySelectorAll('tr');
  
  rows.forEach(row => {
    const input = row.querySelector('td:nth-child(2) input');
    const inputValue = input.value.trim().toLowerCase();
    // 这里用includes判断是否包含，你也可以改回开头匹配的逻辑（inputValue.startsWith(value)）
    row.style.display = inputValue.includes(value) ? 'table-row' : 'none';
  });
}

// 绑定事件
searchInput.addEventListener('keyup', filterTableNative);

// 原生JS新增行的示例
function addNewRowNative(text) {
  const tr = document.createElement('tr');
  tr.innerHTML = `
    <td><input type="checkbox"></td>
    <td><input type="text" value="${text}"></td>
  `;
  tableBody.appendChild(tr);
  filterTableNative();
}

原生方案不需要引入jQuery，更轻量化，同样支持新增行后的过滤功能。

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