如何用jQuery获取多输入框的标签总数并生成选项表格？

一、计算所有输入框的标签总数 #

你的思路是对的，绑定change事件后遍历所有.tags输入框就行，关键是要正确处理每个输入框里的标签字符串，避免空值干扰。这里推荐用jQuery的.each()方法遍历，比for循环更简洁，同时要注意过滤掉无效的空标签（比如多个逗号产生的空字符串）：

$('.tags').on('change', function(event){
  let totalTags = 0;
  
  // 遍历每个带tags类的输入框
  $('.tags').each(function() {
    // 获取当前输入框的内容，先去掉首尾空格
    const tagContent = $(this).val().trim();
    
    if (tagContent) {
      // 按逗号分割成数组，过滤掉空字符串（处理多个连续逗号的情况）
      const validTags = tagContent.split(',').filter(tag => tag.trim() !== '');
      // 累加有效标签数
      totalTags += validTags.length;
    }
  });
  
  // 这里可以把总数输出到控制台，或者显示到页面的某个元素里
  console.log('所有标签的总数：', totalTags);
  // 比如显示到id为total-tag-count的元素：$('#total-tag-count').text(totalTags);
});

细节说明： #

• 用.trim()去掉首尾空格，避免输入框内容是",red,"这种情况导致的空标签
• .filter(tag => tag.trim() !== '')是为了过滤掉分割后产生的空字符串，比如用户输入red,,blue时，分割后会有一个空元素，这一步把它去掉，保证统计的是有效标签

二、生成对应样式的选项表格 #

我们可以动态创建表格，把每个输入框的标签信息（序号、标签列表、标签数量）展示出来，同时可以自定义样式让表格更美观。

步骤1：先在页面里加一个表格容器 #

<div id="tag-table-wrapper"></div>

步骤2：编写生成表格的函数，并在change事件中调用 #

// 生成标签表格的函数
function renderTagTable() {
  // 先清空容器，避免重复生成
  $('#tag-table-wrapper').empty();
  
  // 创建表格元素，添加自定义样式类（也可以用Bootstrap的table类）
  const $table = $('<table>').addClass('custom-tag-table');
  
  // 构建表头
  const $thead = $('<thead>').append(
    $('<tr>').append(
      $('<th>').text('输入框序号'),
      $('<th>').text('标签列表'),
      $('<th>').text('标签数量')
    )
  );
  $table.append($thead);
  
  // 构建表体
  const $tbody = $('<tbody>');
  $('.tags').each(function(index) {
    const tagContent = $(this).val().trim();
    let validTags = [];
    let tagCount = 0;
    
    if (tagContent) {
      validTags = tagContent.split(',').filter(tag => tag.trim() !== '');
      tagCount = validTags.length;
    }
    
    // 生成当前输入框对应的行
    const $row = $('<tr>').append(
      $('<td>').text(index + 1), // 序号从1开始
      $('<td>').text(validTags.join(', ')), // 格式化标签列表
      $('<td>').text(tagCount)
    );
    $tbody.append($row);
  });
  
  $table.append($tbody);
  $('#tag-table-wrapper').append($table);
}

// 绑定change事件，同时统计总数和生成表格
$('.tags').on('change', function(event){
  // 先统计总数（代码同第一部分）
  let totalTags = 0;
  $('.tags').each(function() {
    const tagContent = $(this).val().trim();
    if (tagContent) {
      const validTags = tagContent.split(',').filter(tag => tag.trim() !== '');
      totalTags += validTags.length;
    }
  });
  console.log('所有标签的总数：', totalTags);
  
  // 生成表格
  renderTagTable();
});

// 页面加载完成后，先初始化一次表格
$(document).ready(function() {
  renderTagTable();
});

步骤3：添加表格样式（自定义CSS） #

你可以根据需求调整样式，比如：

.custom-tag-table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  font-size: 14px;
}

.custom-tag-table th, .custom-tag-table td {
  border: 1px solid #e0e0e0;
  padding: 10px;
  text-align: left;
}

.custom-tag-table th {
  background-color: #f5f5f5;
  font-weight: bold;
}

.custom-tag-table tr:hover {
  background-color: #fafafa;
}

这样每次输入框的内容变化时，表格都会自动更新，展示最新的标签信息。

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