HTML table with editable fields accessed in javascript.

Question

I am trying to build a table that will allow users to change the value of a cell(s) and then "submit" that data to a JavaScript (only please) method that turns the tables data into a json dataset.

I started by trying to updated the value of just one field. QTY in this case. I am able to loop over the table and get the static values, but I am not able to catch the user input value.

question: What is a JavaScript only (if possible) way to capture user change(able) values from a table?

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>

THANK YOU

Answer 1

You're making yourself a lot of work here. You have a table. All you need to do is convert that to JSON. I would suggest you look at the library below that does that in around one line of native java-script.

http://www.developerdan.com/table-to-json/

Answer 2

Instead of selecting the entire td element, retrieve only what you really need using querySelector (or use jQuery if possible). Find the input element and access the value, it's a lot easier than doing all of that unecessary parsing of the inner html of the entire cell.

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>

Answer 3

You need to use document.getElementById('value2').value instead of .innerHTML.indexOf('value=')