javascript - 为每个选定的行获取表格的单元格值？

Question

I'm trying to get a single value of cell per row on a table when a checkbox of this row is selected and get all values of all rows when the "Select all" checkbox is selected too.

我尝试这样做：每行内都有子表的表。因此，我尝试在单击“全选”复选框时，标记我单击的行的子表内的所有复选框并获取每行的值。

所有这些都在Javascript或TypeScript中

这是我的html：

<div class="table-responsive row col-md-12" style="margin-top: 3.5%; margin-bottom:1%;  border-bottom: solid; border-bottom-width: 1px;">
<table class="table table-hover tablaReclamaciones"  > 
  <thead>
    <tr>
      <th></th>
      <th>No.</th>
      <th>Alias</th>
      <th>Exp. Date</th>
      <th>Past Deu</th>
      <th>Current Balance</th>
      <th>Mount to pay</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <label class="containerCheck"> Select All
          <input type="checkbox" id="selectAll">
        </label>
      </td>
      <td>001</td>
      <td>My Home</td>
      <td>10/12/2018</td>
      <td>2500</td>
      <td>5000</td>
      <td>7500</td>
    </tr>

    <tr>
      <td colspan="7">
        <div class=" row col-md-12" style="background: rgb(243, 243, 243); margin-left: 0.15%;">
          <div class="row col-md-12 " style="color: rgb(253, 120, 43);">
            <h5 class="pull-left" >Details</h5> 
            <h5 class="pull-right arrowDown"  id="2222" data-toggle="collapse" [attr.data-target]="'#' + r.nocontracto"  ><i class="test fa fa-chevron-down "></i></h5>
          </div>

          <div id={{ r.nocontracto }} class="table-responsive row col-md-12  "  style=" margin-top: 1%;" >
            <table class="table table-hover" style="background: rgb(243, 243, 243)">
                <thead>
                  <th></th>
                  <th>No. Reference</th>
                  <th>Invoice Date</th>
                  <th>Exp Date</th>
                  <th>Balance</th>
                  <th></th>
                </thead>
                <tbody>
                  <tr *ngFor="let b of r.billing" id="billDetails">
                    <td>
                      <input type="checkbox" class="checkInside" name="invoiceCheck" onclick="singleRow()">
                    </td>
                    <td>123456</td>
                    <td>22/12/2018</td>
                    <td>12/01/2018</td>
                    <td>5250.00</td>
                    <td>
                      RD$ <input type="text" id="amountInput">
                    </td>
                    <td></td>
                  </tr>
                  <tr *ngFor="let b of r.billing" id="billDetails">
                    <td>
                      <input type="checkbox" class="checkInside" name="invoiceCheck" onclick="singleRow()">
                    </td>
                    <td>123456</td>
                    <td>22/01/2018</td>
                    <td>12/02/2018</td>
                    <td>400.00</td>
                    <td>
                      RD$ <input type="text" id="amountInput">
                    </td>
                    <td></td>
                  </tr>
                  <tr *ngFor="let b of r.billing" id="billDetails">
                    <td>
                      <input type="checkbox" class="checkInside" name="invoiceCheck" onclick="singleRow()">
                    </td>
                    <td>123456</td>
                    <td>22/02/2018</td>
                    <td>12/03/2018</td>
                    <td>2600.00</td>
                    <td>
                      RD$ <input type="text" id="amountInput">
                    </td>
                    <td></td>
                  </tr>
                </tbody>
            </table>
          </div>
        </div>
      </td>
    </tr> 
  </tbody>
</table>

全部的：

Javacript 代码（用于获取单行的值，但不起作用）：

function singleRow() {
let row = document.getElementById('billDetails');
let cells = row.getElementsByTagName('td');

let inputVal = document.getElementById('amountInput').value;

if(!inputVal) {

} else {
    console.log('Columna de Input: ' + inputVal);
}
}

标签： javascripttypescript

Answer 1

您可以在 vanilla JavaScript 中尝试以下方式：

document.querySelectorAll('input[type=checkbox]').forEach(function(el){
  el.addEventListener('change', function(){
    if(this.id == 'selectAll'){
      var trList = document.querySelectorAll('tbody tbody tr'); 
      console.clear(); //clear the console
      trList.forEach(function(tr){
        tr.querySelectorAll('td').forEach(function(td){
          console.log(td.textContent.trim())
        });
      });
    }
    else{    
      console.clear(); //clear the console
      var tdList = this.parentNode.parentNode.childNodes;
      tdList.forEach(function(td){
        console.log(td.textContent.trim())
      });
    }
  });
});

<div class="table-responsive row col-md-12" style="margin-top: 3.5%; margin-bottom:1%;  border-bottom: solid; border-bottom-width: 1px;">
<table class="table table-hover tablaReclamaciones"  > 
  <thead>
    <tr>
      <th></th>
      <th>No.</th>
      <th>Alias</th>
      <th>Exp. Date</th>
      <th>Past Deu</th>
      <th>Current Balance</th>
      <th>Mount to pay</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <label class="containerCheck"> Select All
          <input type="checkbox" id="selectAll">
        </label>
      </td>
      <td>001</td>
      <td>My Home</td>
      <td>10/12/2018</td>
      <td>2500</td>
      <td>5000</td>
      <td>7500</td>
    </tr>

    <tr>
      <td colspan="7">
        <div class=" row col-md-12" style="background: rgb(243, 243, 243); margin-left: 0.15%;">
          <div class="row col-md-12 " style="color: rgb(253, 120, 43);">
            <h5 class="pull-left" >Details</h5> 
            <h5 class="pull-right arrowDown"  id="2222" data-toggle="collapse" [attr.data-target]="'#' + r.nocontracto"  ><i class="test fa fa-chevron-down "></i></h5>
          </div>

          <div id={{ r.nocontracto }} class="table-responsive row col-md-12  "  style=" margin-top: 1%;" >
            <table class="table table-hover" style="background: rgb(243, 243, 243)">
                <thead>
                  <th></th>
                  <th>No. Reference</th>
                  <th>Invoice Date</th>
                  <th>Exp Date</th>
                  <th>Balance</th>
                  <th></th>
                </thead>
                <tbody>
                  <tr *ngFor="let b of r.billing" id="billDetails">
                    <td>
                      <input type="checkbox" class="checkInside" name="invoiceCheck" onclick="">
                    </td>
                    <td>123456</td>
                    <td>22/12/2018</td>
                    <td>12/01/2018</td>
                    <td>5250.00</td>
                    <td>
                      RD$ <input type="text" id="amountInput">
                    </td>
                    <td></td>
                  </tr>
                  <tr *ngFor="let b of r.billing" id="billDetails">
                    <td>
                      <input type="checkbox" class="checkInside" name="invoiceCheck" onclick="">
                    </td>
                    <td>123456</td>
                    <td>22/01/2018</td>
                    <td>12/02/2018</td>
                    <td>400.00</td>
                    <td>
                      RD$ <input type="text" id="amountInput">
                    </td>
                    <td></td>
                  </tr>
                  <tr *ngFor="let b of r.billing" id="billDetails">
                    <td>
                      <input type="checkbox" class="checkInside" name="invoiceCheck" onclick="">
                    </td>
                    <td>123456</td>
                    <td>22/02/2018</td>
                    <td>12/03/2018</td>
                    <td>2600.00</td>
                    <td>
                      RD$ <input type="text" id="amountInput">
                    </td>
                    <td></td>
                  </tr>
                </tbody>
            </table>
          </div>
        </div>
      </td>
    </tr> 
  </tbody>
</table>