Как мне получить html данные таблицы с несколькими строками в Javascript

Question

HTML таблица

<table id="dataTable" border="1px" style="width:355px; BORDER-COLLAPSE:collapse">
    <tr>
        <td id="0" align="center"></td>
        <td id="1" align="center">Name</td>
        <td id="2" align="center">Designation</td>
        <td id="3" align="center">PAN</td>
        <td id="4" align="center">Address</td>
    </tr>
    <tr>
        <td><input type="checkbox" name="chk" id ="chk" size="6"/></td>
        <td><input type="text" name="txtRow1" id="txtRow1" size="8"/></td>
        <td><input type="text" name="txtRow2" id="txtRow2" size="8"/></td>
        <td><input type="text" name="txtRow3" id="txtRow3" size="8"/></td>
        <td><input type="text" name="txtRow4" id="txtRow4" size="8"/></td>
    </tr>
</table>
<table>
    <tr>
        <td><input type="button" value="Add Row" onclick="addRowTable('dataTable')" /></td>
        <td><input type="button" value="Delete Row" onclick="deleteRowTable('dataTable')" /></td>
    </tr>  
</table>

После ввода данных в таблицу HTML я хочу получить эти данные в javascript, чтобы я мог сохранить их в базе данных , Таблица HTML содержит несколько строк и четыре столбца. Пользователь может добавить строки, если они хотят добавить столбец для ввода данных. Я хочу получить все данные столбца в javascript. Как мне это сделать .. Пожалуйста, помогите мне

Мой HTML Код:

function addRowTable(tableID) {

    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    if (rowCount > 10) {
        alert("Maximum 10 rows allowed");
        return false;
    }
    var row = table.insertRow(rowCount);

    var cell1 = row.insertCell(0);
    var element1 = document.createElement("input");
    element1.type = "checkbox";
    element1.name = "chkbox[]";
    cell1.appendChild(element1);
    element1.size = 8;
    /*var cell2 = row.insertCell(1);
    cell2.innerHTML = rowCount + 1;*/

    var cell2 = row.insertCell(1);
    var element2 = document.createElement("input");
    element2.type = "text";
    element2.name = "txtbox[]";
    cell2.appendChild(element2);
    element2.size = 8;

    var cell3 = row.insertCell(2);
    var element3 = document.createElement("input");
    element3.type = "text";
    element3.name = "txtbox[]";
    cell3.appendChild(element3);
    element3.size = 8;

    var cell4 = row.insertCell(3);
    var element4 = document.createElement("input");
    element4.type = "text";
    element4.name = "txtbox[]";
    cell4.appendChild(element4);
    element4.size = 8;

    var cell5 = row.insertCell(4);
    var element5 = document.createElement("input");
    element5.type = "text";
    element5.name = "txtbox[]";
    cell5.appendChild(element5);
    element5.size = 8;

}

function deleteRowTable(tableID) {
    try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for (var i = 0; i < rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if (null != chkbox && true == chkbox.checked) {
                table.deleteRow(i);
                rowCount--;
                i--;
            }
        }
    } catch (e) {
        /*alert(e);*/
    }
}

Мой javascript код для добавления и удаления строк таблицы:

Сейчас после того, как столбцы таблицы заполнены, я хочу получить эти данные в javascript. Я попытался сделать, как показано ниже. Но это не работает. Я получаю нулевые значения. Я не получаю фактические значения.

var rowCount = table.rows.length;
        for (var i = 1; i < rowCount; i++) 
        {
            var Name = $("dataTable").find("tr").eq(i).find("td").eq(0).text();
            var Designation = $("dataTable").find("tr").eq(i).find("td").eq(1).text();
            var PAN = $("dataTable").find("tr").eq(i).find("td").eq(2).text();
            var Address = $("dataTable").find("tr").eq(i).find("td").eq(3).text();
        }

Пожалуйста, дайте мне знать, что я делаю неправильно и что мне делать. Спасибо!

Answer 1

Вы на правильном пути, но обратите внимание на некоторые детали:

• В своем решении вы выбираете 'td', а не input внутри него.
• Если вы используете вход, вы не можете получить innterText, вызывая .text (), вместо этого вы хотите использовать метод .val () для получения значения
• Называйте свои входы последовательно. В первой строке вы называете их «txtRow1» - «textRow4» ... но когда вы добавляете новые строки, вы называете их «txtbox []»: Прежде всего я думаю, что вы имеете в виду txtCol, а не txtRow ... просто подумайте об этом. Во-вторых, если вы хотите сгруппировать свои входные данные по col umn, затем добавьте скобки «[]» к именам, которые принадлежат друг другу, например: «txtCol1 []» - «txtCol4 []»

Я собрал все это для вас:

function addRowTable(tableID) {

  var table = document.getElementById(tableID);

  var rowCount = table.rows.length;
  if (rowCount > 10) {
    alert("Maximum 10 rows allowed");
    return false;
  }
  var row = table.insertRow(rowCount);

  var cell1 = row.insertCell(0);
  var element1 = document.createElement("input");
  element1.type = "checkbox";
  element1.name = "chkbox[]";
  cell1.appendChild(element1);
  element1.size = 8;
  /*var cell2 = row.insertCell(1);
  cell2.innerHTML = rowCount + 1;*/

  var cell2 = row.insertCell(1);
  var element2 = document.createElement("input");
  element2.type = "text";
  element2.name = "txtCol1[]";
  cell2.appendChild(element2);
  element2.size = 8;

  var cell3 = row.insertCell(2);
  var element3 = document.createElement("input");
  element3.type = "text";
  element3.name = "txtCol2[]";
  cell3.appendChild(element3);
  element3.size = 8;

  var cell4 = row.insertCell(3);
  var element4 = document.createElement("input");
  element4.type = "text";
  element4.name = "txtCol3[]";
  cell4.appendChild(element4);
  element4.size = 8;

  var cell5 = row.insertCell(4);
  var element5 = document.createElement("input");
  element5.type = "text";
  element5.name = "txtCol4[]";
  cell5.appendChild(element5);
  element5.size = 8;

}

function deleteRowTable(tableID) {
  try {
    var table = document.getElementById(tableID);
    var rowCount = table.rows.length;

    for (var i = 0; i < rowCount; i++) {
      var row = table.rows[i];
      var chkbox = row.cells[0].childNodes[0];
      if (null != chkbox && true == chkbox.checked) {
        table.deleteRow(i);
        rowCount--;
        i--;
      }
    }
  } catch (e) {
    /*alert(e);*/
  }
}

function readData(tableID){
  var rowCount = $(tableID + ' tr').length;
  var results = [];
  for (var i = 1; i < rowCount; i++) 
  {
    results.push({
      Name: $(tableID).find('tr').eq(i).find('[name="txtCol1[]"]').val(),
      Designation: $(tableID).find('tr').eq(i).find('[name="txtCol2[]"]').val(),
      PAN: $(tableID).find('tr').eq(i).find('[name="txtCol3[]"]').val(),
      Address: $(tableID).find('tr').eq(i).find('[name="txtCol4[]"]').val(),
    });
  }
  console.log(results);
  return results;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="dataTable" border="1px" style="width:355px; BORDER-COLLAPSE:collapse">
  <tr>
    <td id="0" align="center"></td>
    <td id="1" align="center">Name</td>
    <td id="2" align="center">Designation</td>
    <td id="3" align="center">PAN</td>
    <td id="4" align="center">Address</td>

  </tr>
  <tr>
    <td><input type="checkbox" name="chkbox[]" id="chk" size="6" /></td>
    <td><input type="text" name="txtCol1[]" id="txtCol1" size="8" /></td>
    <td><input type="text" name="txtCol2[]" id="txtCol2" size="8" /></td>
    <td><input type="text" name="txtCol3[]" id="txtCol3" size="8" /></td>
    <td><input type="text" name="txtCol4[]" id="txtCol4" size="8" /></td>
  </tr>
</table>
<table>
  <tr>
    <td><input type="button" value="Add Row" onclick="addRowTable('dataTable')" /></td>
    <td><input type="button" value="Delete Row" onclick="deleteRowTable('dataTable')" /></td>
    <td><input type="button" value="Read Data" onclick="readData('#dataTable')"  /></td>
  </tr>
</table>

Answer 2

Данные таблицы HTML могут храниться в массиве JS, это проще, чем помещать данные в переменные (которые хранят только последнюю строку).

var rows = table.rows,
    len = rows.length,
    data = [],
    cells;
for (var n = 1; n < len; n++) {
    cells = rows[n].cells;
    data.push([
        cells[0].firstElementChild.checked,
        cells[1].firstElementChild.value,
        cells[2].firstElementChild.value,
        cells[3].firstElementChild.value,
        cells[4].firstElementChild.value
   ]);
}

Теперь это легко читать значения из массива data при необходимости.