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

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.

I try to do this: A table with sub-table inside of each rows. So, I try to when the checkbox "Select All" y clicked, all the checkbox inside of sub-table the row that i clicked be marked and get the values of each rows.

All this in Javascript or TypeScript

this is my 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>

Total:

Javacript code (For get the value of a single row, but don't work):

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);
}
}

Answer 1

You can try the following way in 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> 

Answer 2

A sample solution in javascript:

 <label>A small sample code</label> <br> <input type="checkbox" name="all" onchange="allChecked(this)"/> <label>check all</label> <br> <input type="checkbox" name="child" onchange="showVal(this)"/> <label>Strongly disagree</label> <input type="checkbox" name="child" onchange="showVal(this)"/> <label>Somewhat agree</label> <input type="checkbox" name="child" onchange="showVal(this)"/> <label>Strongly agree</label> <script> function showVal(chk) { if(chk.checked){ alert(chk.checked); // traverse the dom elements and get values of the cell you need } }; function allChecked(chk){ var childChks = document.getElementsByName("child"); for(var i =0 ;i < childChks.length; i++){ childChks[i].checked =chk.checked; } } </script> 

Answer 3

Here's an ES6 version (useful for destructuring the event targets efficiently). Instead of attaching change listeners to each checkbox element it uses "event propagation" to capture events as they bubble up the DOM.

Note: that I've reduced your HTML example down to the core parts, and updated your ids to classes (ids have to be unique, classes do not).

 // Grab the selectAll checkbox and add an eventListener to it const allCheckbox = document.getElementById('selectAll'); allCheckbox.addEventListener('change', selectAll, false); // Grab the amountInput elements const amountInputs = document.querySelectorAll('.amountInput'); // Grab the "inner" table and add an event listener to it // The function attached to this listener will capture events as they // bubble up from the checkboxes const inner = document.querySelector('.inner'); inner.addEventListener('change', selectSingle, false); function selectSingle(e) { // Grab the type and checked property from the element attached to the event, // and also the parentNode of its parentNode (the row element) const { type, checked, parentNode: { parentNode } } = e.target; // If the element is a checkbox and the checkbox is checked // (we don't want to return a value if the user has unchecked the box...) if (type === 'checkbox' && checked) { // Find the amountInput child element in that row, // and grab its value const { value } = parentNode.querySelector('.amountInput'); console.log(value); } } function selectAll(e) { const { type, checked } = e.target; // If it is checked `map` over the amountInput elements // and return an array of their values if (checked) { const values = [...amountInputs].map(input => input.value); console.log(values); } } 

 <label class="containerCheck"> Select All <input type="checkbox" id="selectAll"> </label> <table class="inner"> <tbody> <tr> <td><input type="checkbox" class="checkInside" /></td> <td>RD$ <input type="text" class="amountInput" value="432" /></td> </tr> <tr> <td><input type="checkbox" class="checkInside" /></td> <td>RD$ <input type="text" class="amountInput" value="12222" /></td> </tr> <tr> <td><input type="checkbox" class="checkInside" /></td> <td>RD$ <input type="text" class="amountInput" value="324" /></td> </tr> </tbody> </table> <div id="out"></div>