javascript - 从 Javascript 中的行 html 中获取值

Question

我有一个要输出到内部网页上的数据库表。我需要找到选定行的值，这样我就可以合并这些行并将该值发送回数据库，以便它知道要合并哪些行。

当单击按钮合并行时，这是我创建的函数:

    //merge the rows now
    function mergeTheRows() {
        //get value from each row
        $("#mergeRowsBody tr").each(function() {
            rowValue = document.getElementsByTagName("tr").value;
            mergeRowsArray.push(rowValue);
            console.log(mergeRowsArray);
        });
     }

这是表格的主体(我只显示两行作为示例):

<tbody id="mergeRowsBody">
  <tr class="rowEditData odd mergeSelect" value="110461" role="row">
    <td class="mdl-data-table__cell--non-numeric sorting_1">ABBEVILLE</td>
    <td class="mdl-data-table__cell--non-numeric">South Carolina</td>
    <td class="mdl-data-table__cell--non-numeric">null</td>
    <td class="mdl-data-table__cell--non-numeric">null</td>
    <td class="mdl-data-table__cell--non-numeric">001</td>
    <td class="mdl-data-table__cell--non-numeric">39</td>
  </tr>
  <tr class="rowEditData even mergeSelect" value="107045" role="row">
    <td class="mdl-data-table__cell--non-numeric sorting_1">Abbeville County</td>
    <td class="mdl-data-table__cell--non-numeric">South Carolina</td>
    <td class="mdl-data-table__cell--non-numeric">001</td>
    <td class="mdl-data-table__cell--non-numeric">45</td>
    <td class="mdl-data-table__cell--non-numeric">null</td>
    <td class="mdl-data-table__cell--non-numeric">null</td>
  </tr>
 </tbody>

当它控制台登录到浏览器时，我一直未定义。我也尝试通过 ID 和类查找值，但它一直说未定义。我究竟做错了什么？

我只需要能够保存行的 ID，这样我就可以让数据库知道哪些行将被合并。

Answer 1

您应该使用data- 属性而不是value，value 用于输入，选择...您还需要添加table您的 html，然后您可以使用 map() 和 get() 返回 data-values 数组。

var mergeRowsArray = $("#mergeRowsBody tr").map(function() {
  return $(this).data('value')
}).get();

console.log(mergeRowsArray)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody id="mergeRowsBody">
    <tr class="rowEditData odd mergeSelect" data-value="110461" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">ABBEVILLE</td>
      <td class="mdl-data-table__cell--non-numeric">South Carolina</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
      <td class="mdl-data-table__cell--non-numeric">001</td>
      <td class="mdl-data-table__cell--non-numeric">39</td>
    </tr>
    <tr class="rowEditData even mergeSelect" data-value="107045" role="row">
      <td class="mdl-data-table__cell--non-numeric sorting_1">Abbeville County</td>
      <td class="mdl-data-table__cell--non-numeric">South Carolina</td>
      <td class="mdl-data-table__cell--non-numeric">001</td>
      <td class="mdl-data-table__cell--non-numeric">45</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
      <td class="mdl-data-table__cell--non-numeric">null</td>
    </tr>
  </tbody>
</table>