js tbale 表单收集

### 使用 JavaScript 收集 Table 表单数据

为了实现通过 JavaScript 来收集 HTML 中 `<table>` 元素内的表单数据，可以采用遍历表格中的每一行并读取特定单元格内输入框或其他表单控件的值的方式。下面提供了一个具体的实例来展示这一过程。

#### 示例场景描述
假设有一个简单的订单详情表格，其中包含了商品名称、数量以及单价三个字段作为可编辑项，并且每条记录对应一行。目标是在点击按钮时获取整个表格中所有有效填写的信息[^1]。

#### HTML 结构定义
首先构建基本的HTML结构，这里创建了一张带有若干列用于录入信息的表格：

<form id="orderForm">
  <table border="1" cellpadding="5" cellspacing="0">
    <thead>
      <tr>
        <th>商品名</th><th>数量</th><th>价格 (元)</th>
      </tr>
    </thead>
    <tbody>
      <!-- 动态添加的内容 -->
    </tbody>
  </table>
  <button type="button" onclick="collectTableData()">提交订单</button>
</form>

此部分利用了`<form>`标签包裹住整个表格以便后续操作；同时设置了一个按钮用来触发收集动作而不是默认提交行为[^2]。

#### 添加新行函数
为了让用户能够增加新的项目，在页面加载完成后初始化一些初始行或者允许他们手动新增行。此处给出一个简单方法向表格主体追加一行的功能：

function addRow() {
  const tbody = document.querySelector('#orderForm > table > tbody');
  
  let row = `
    <tr>
      <td><input name="itemName[]" /></td>
      <td><input name="quantity[]" /></td>
      <td><input name="price[]" /></td>
    </tr>`;
    
  tbody.insertAdjacentHTML('beforeend', row);
}
window.onload = function () {addRow();}; // 页面载入时自动调用一次

这段脚本会在每次被调用的时候往表格底部插入一个新的空白行供用户填入资料。

#### 数据收集逻辑
当按下“提交订单”的时候，则执行如下JavaScript代码片段完成实际的数据提取工作：

function collectTableData(){
  var formData = [];
  $('#orderForm').find('tbody tr').each(function(i, el){
     var $inputs = $(this).find(':input'),
         item={};
         
     $.each($inputs,function(j,inputEl){
       item[inputEl.name]=inputEl.value;
     });
     
     if(Object.keys(item).length !== 0){formData.push(item);}
  });

  console.log(formData); // 输出结果至控制台查看
}

上述代码段实现了对指定范围内所有具有 `name` 属性的 `<input>` 控件进行迭代访问，并将其键值对形式存储在一个对象里再加入数组之中。最终得到的结果是一个由多个对象组成的列表，每个对象代表一条完整的记录。