Question

我正在尝试在选中该行的复选框时获取表中每行单元格的单个值，并同时选中“全选”复选框来获取所有行的所有值。

我尝试执行以下操作：在每行内部都有一个子表的表。因此，我尝试在单击“全选”复选框时，标记我单击的行的子表内的所有复选框，并获取每行的值。

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

Answer 1

您可以在原始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

使用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

这是ES6版本（对于destructuring事件有效地有用）。它没有将更改侦听器附加到每个复选框元素，而是使用"event propagation"捕获事件，这些事件使DOM冒泡。

注意：我已经将您的HTML示例简化为核心部分，并将您的ID更新为类（ID必须是唯一的，类不是唯一的。）

// 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>

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

3 个答案: