获取html表格每一行输入字段的值答案

【问题标题】：Get the values of input field of each row of html table获取html表格每一行输入字段的值
【发布时间】：2018-11-14 18:47:13
【问题描述】：

我有一个 html 表格。每行都有带有隐藏边框的输入字段。当我按下一个按钮时，它应该给我每个表格行的输入字段的所有值如果可能，不使用 id 和 class。

HTML：

<div class="row" style="z-index:0;">
<div class="col-md-12">
    <table id="detailTable" class="table table-bordered table-sm">
        <thead class="thead-light" style="text-align:center">
            <tr>
                <th style="width:130px;">Date</th>
                <th style="width:300px;">Particulars</th>
                <th style="width:10px;">C.B.F</th>
                <th style="width:180px;">Dr. Amount</th>
                <th style="width:180px;">Cr. Amount</th>
                <th style="width:200px;">Balance</th>
                <th style="width:10px;">Opt</th>
            </tr>
        </thead>
        <tbody>
           <tr>
              <td> <input type='text' value='11-12-2018'/> </td>
              <td> <input type='text' value='Cash'/> </td>
              <td> <input type='text' value=''/> </td>
              <td> <input type='text' value='20000'/> </td>
              <td> <input type='text' value='15000'/> </td>
              <td> <input type='text' value='-5000'/> </td>
              <td> <input type='button' value='Delete'/> </td>
           </tr>
        </tbody>
    </table>
</div>
<button class='btn btn-success'>Show</div>
</div>

我尝试过的 JavaScript

var rowsInTable = $("#detailTable tr").length;
rowsInTable--;
row.parentNode.removeChild(row);

for(i=1;i<=rowsInTable;i++)
{
  console.log(document.getElementById("detailTable").rows[i].innerHTML);
}

【问题讨论】：

我给你做了一个sn-p。请添加相关代码以制作minimal reproducible example。如果你有 jQuery 使用 jQuery

标签： javascript html

【解决方案1】：

由于 JQuery 没有被标记，这就是我只在 Javascript 中这样做的方式：

var tableRows = document.getElementById("detailTable").rows

for (i = 1; i < tableRows.length; i++) {
  var myrow = tableRows[i];
  for (j = 0; j < myrow.cells.length; j++) {
    var mytd = myrow.cells[j];
    console.log(mytd.children[0].value);
  }
}

Here is the JSFiddle demo

您可以进一步微调它以获得格式化的输出。 P.S：检查控制台的输出。

【讨论】：

正确，但在示例中使用 jQuery。

【解决方案2】：

给你！

$('button').on('click', function() {
    $('#detailTable > tbody').find('tr').each(function() {
        console.log($(this).find('input'));
    });
});

【讨论】：

【解决方案3】：

这里我使用 $.map 来获取值

同样使用jQuery删除行

$(function() {
  $(".btn-success").on("click", function() {
    var values = $("#detailTable tbody input[type=text]").map(function() {
      return this.value;
    }).get();
    alert(values);
  });

  $("[type=button][value=Delete]").on("click", function() {  
    $(this).closest("tr").remove()
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row" style="z-index:0;">
  <div class="col-md-12">
    <table id="detailTable" class="table table-bordered table-sm">
      <thead class="thead-light" style="text-align:center">
        <tr>
          <th style="width:130px;">Date</th>
          <th style="width:300px;">Particulars</th>
          <th style="width:10px;">C.B.F</th>
          <th style="width:180px;">Dr. Amount</th>
          <th style="width:180px;">Cr. Amount</th>
          <th style="width:200px;">Balance</th>
          <th style="width:10px;">Opt</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td> <input type='text' value='11-12-2018' /> </td>
          <td> <input type='text' value='Cash' /> </td>
          <td> <input type='text' value='' /> </td>
          <td> <input type='text' value='20000' /> </td>
          <td> <input type='text' value='15000' /> </td>
          <td> <input type='text' value='-5000' /> </td>
          <td> <input type='button' value='Delete' /> </td>
      </tbody>
    </table>
  </div>
  <button type="button" class='btn btn-success'>Show</button>
</div>

【讨论】：