javascript - HTML 表格，其中包含可通过 JavaScript 访问的可编辑字段。

Question

我正在尝试构建一个表格，允许用户更改单元格的值，然后“提交”该数据 将表数据转换为 json 数据集的 JavaScript(仅请)方法。

我首先尝试仅更新一个字段的值。在这种情况下数量。我能够循环表并获取静态值，但无法捕获用户输入值。

问题:什么是仅 JavaScript(如果可能)从表中捕获用户更改(可)值的方法？

function updateQTY() {

  //getData from table
  //gets table
  var lines = "";
  var oTable = document.getElementById('items');

  //gets rows of table
  var rowLength = oTable.rows.length;
  var line = "";
  //loops through rows, skips firts row/header
  for (i = 1; i < rowLength; i++) {

    //gets cells of current row
    var oCells = oTable.rows.item(i).cells;
    var qty = oCells.item(2).innerHTML;
    //alert("qty: " + wty);
    qty = qty.substr(oCells.item(2).innerHTML.indexOf('value=') + 7);
    qty = qty.substr(0, qty.indexOf('" class='));
    //alert(qty);
    line = line +
      '{ "item": "' + oCells.item(0).innerHTML + '",' +
      ' "discription": "' + oCells.item(1).innerHTML + '",' +
      ' "qty": "' + qty + '"},'

  }
  //alert(line);
  var jsonData = JSON.parse('[' + line + '{"quickwayto":"dealwith,leftbyloop"}]');
  alert("lines: " + JSON.stringify(jsonData));
}

<form action='#'>
  <table class='mdl-data-table mdl-js-data-table' id='items'>
    <thead>
      <tr>
        <th>item</th>
        <th>discription</th>
        <th>QTY</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class='mdl-data-table__cell--non-numeric'> widget_1 </td>
        <td class='mdl-data-table__cell--non-numeric'>it's fun</td>
        <td>
          <div class='mdl-textfield mdl-js-textfield'><input type='text' name='qty1' id='value1' value='5' class='mdl-textfield__input'></div>
        </td>
      </tr>
      <tr>
        <td class='mdl-data-table__cell--non-numeric'> widget_2 </td>
        <td class='mdl-data-table__cell--non-numeric'>it's super fun</td>
        <td>
          <div class='mdl-textfield mdl-js-textfield'><input type='text' name='qty2' id='value2' value='5' class='mdl-textfield__input'></div>
        </td>
      </tr>
    </tbody>
  </table>
  <div>
    <input type='button' value='update' onclick='updateQTY()' class='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect'>
  </div>
</form>

谢谢

Answer 1

不要选择整个 td 元素，而是使用 querySelector 仅检索您真正需要的内容(或者如果可能的话使用 jQuery)。找到输入元素并访问值，这比对整个单元格的内部 html 进行所有不必要的解析要容易得多。

function updateQTY() {

  //getData from table
  //gets table
  var lines = "";
  var oTable = document.getElementById('items');

  //gets rows of table
  var rowLength = oTable.rows.length;
  var line = "";
  //loops through rows, skips firts row/header
  for (i = 1; i < rowLength; i++) {

    //gets cells of current row
    var oCells = oTable.rows.item(i).cells;
    var qty = oCells.item(2).querySelector(".mdl-textfield__input").value;
    line = line +
      '{ "item": "' + oCells.item(0).innerHTML + '",' +
      ' "discription": "' + oCells.item(1).innerHTML + '",' +
      ' "qty": "' + qty + '"},'

  }
  //alert(line);
  var jsonData = JSON.parse('[' + line + '{"quickwayto":"dealwith,leftbyloop"}]');
  alert("lines: " + JSON.stringify(jsonData));
}

<form action='#'>
  <table class='mdl-data-table mdl-js-data-table' id='items'>
    <thead>
      <tr>
        <th>item</th>
        <th>discription</th>
        <th>QTY</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class='mdl-data-table__cell--non-numeric'> widget_1 </td>
        <td class='mdl-data-table__cell--non-numeric'>it's fun</td>
        <td>
          <div class='mdl-textfield mdl-js-textfield'><input type='text' name='qty1' id='value1' value='5' class='mdl-textfield__input'></div>
        </td>
      </tr>
      <tr>
        <td class='mdl-data-table__cell--non-numeric'> widget_2 </td>
        <td class='mdl-data-table__cell--non-numeric'>it's super fun</td>
        <td>
          <div class='mdl-textfield mdl-js-textfield'><input type='text' name='qty2' id='value2' value='5' class='mdl-textfield__input'></div>
        </td>
      </tr>
    </tbody>
  </table>
  <div>
    <input type='button' value='update' onclick='updateQTY()' class='mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect'>
  </div>
</form>