从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

getElementsByTagName返回具有给定标签名称的元素的实时HTMLCollection。

rowValue = document.getElementsByTagName("tr").value;

用。。。来代替

rowValue =$(this).attr("value");

Answer 2

您应该使用data- property而不是value ，value用于输入，选择...还需要在html中添加table ，然后可以使用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> 

Answer 3

您是否尝试过仅使用jQuery？

rowValue = $(".mergeSelect").val();