如何为服务器返回的表格每行添加按钮，点击后提交行内容至服务器

没问题，我帮你把这个需求完整落地，咱们分步骤来实现：

1. 核心思路拆解 #

• 先通过GET请求拉取服务器返回的XML数据，解析后动态生成带操作按钮的表格
• 给表格每一行绑定提交逻辑，点击按钮时收集当前行数据，通过POST请求发回服务器

2. 完整代码实现 #

HTML部分（表格容器） #

<!-- 用来承载生成的表格 -->
<table id="dataTable" border="1">
  <thead>
    <!-- 可根据XML实际字段调整表头 -->
    <tr>
      <th>商品名称</th>
      <th>价格</th>
      <th>库存</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody id="tableBody"></tbody>
</table>

JavaScript部分 #

// 加载XML数据并生成表格
function loadDoc() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    // 确保请求成功完成
    if (this.readyState == 4 && this.status == 200) {
      parseXMLAndBuildTable(this);
    }
  };
  // 替换为你的完整GET接口地址
  xhttp.open("GET", "http://10.114.56.217:8080/Online_shop/getProducts", true);
  xhttp.send();
}

// 解析XML并构建带按钮的表格
function parseXMLAndBuildTable(xml) {
  var xmlDoc = xml.responseXML;
  // 假设XML中数据节点为<product>，需根据实际结构调整标签名
  var products = xmlDoc.getElementsByTagName("product");
  var tableBody = document.getElementById("tableBody");

  // 遍历每个数据节点生成表格行
  for (var i = 0; i < products.length; i++) {
    var row = document.createElement("tr");
    
    // 提取XML字段值，需匹配你的XML子节点名称
    var name = products[i].getElementsByTagName("name")[0].textContent;
    var price = products[i].getElementsByTagName("price")[0].textContent;
    var stock = products[i].getElementsByTagName("stock")[0].textContent;

    // 创建内容单元格
    [name, price, stock].forEach(text => {
      var cell = document.createElement("td");
      cell.textContent = text;
      row.appendChild(cell);
    });

    // 创建操作按钮单元格
    var actionCell = document.createElement("td");
    var submitBtn = document.createElement("button");
    submitBtn.textContent = "提交该行";
    
    // 绑定点击事件：收集当前行数据并发送POST
    submitBtn.onclick = function() {
      var currentRow = this.parentElement.parentElement;
      var rowData = {
        name: currentRow.cells[0].textContent,
        price: currentRow.cells[1].textContent,
        stock: currentRow.cells[2].textContent
      };
      sendRowData(rowData);
    };

    actionCell.appendChild(submitBtn);
    row.appendChild(actionCell);
    tableBody.appendChild(row);
  }
}

// 发送行数据到服务器的POST请求函数
function sendRowData(data) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4) {
      this.status == 200 
        ? alert("数据提交成功！") 
        : alert("提交失败，请重试");
    }
  };
  // 替换为你的完整POST接口地址
  xhttp.open("POST", "http://10.114.56.217:8080/Online_shop/submitProduct", true);
  // 设置请求头，告知服务器数据格式为JSON
  xhttp.setRequestHeader("Content-Type", "application/json");
  // 将数据转为JSON字符串发送
  xhttp.send(JSON.stringify(data));
}

// 页面加载完成后自动触发数据加载
window.onload = loadDoc;

3. 关键细节调整提示 #

• XML解析适配：请根据服务器返回的XML实际结构，修改getElementsByTagName的参数（比如数据节点、子节点名称）
• POST数据格式：如果服务器接收表单格式而非JSON，可将Content-Type改为application/x-www-form-urlencoded，并把数据转为name=xxx&price=xxx的格式
• 错误处理优化：可将alert替换为页面内的提示组件，提升用户体验

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