javascript - 有没有办法比较 HTML 中两个选定表格的行？

Question

我有多个表，我想选择任意两个表，然后单击按钮（计算）在每一行上执行一些任务。如何访问所选表的数据，以便我可以比较他们的任务数据？目前我正在使用复选框来选择表格，但卡住了如何访问表格的内容进行比较？

    var selectedRows = document.getElementsByClassName('selected');
    
    function inputChanged(event) {
        console.log(table)
        alert(selectedRows)
        console.log(selectedRows)
            event.target.parentElement.parentElement.className =
                event.target.checked ? 'selected' : '';
        }

.table_container{
        float:left;
        width:25%;
    }
    .container::after{  
  content: "";
  clear: both;
  display: table;
    }
    table{
        margin: 0 auto; 
        
        border-radius: 10px;
    }
    tr{
        padding: 15px;
        text-align: center;
    }
    td{
        color: black;
        text-align: center;
        vertical-align: middle;
        border: 1px double white;
        height: 50px;
        background-color: #e1edf9;
        width:272px;
    }
    .sub_text{
        font-size: 12px;
        font-style: italic;
        color: #0071ce;
        font-weight: 100;
    }
    th{
        background-color: #0071ce;
        text-align: center;
        padding: 10px;
        border-top-left-radius: 10px;
        border-top-right-radius: 10px;
        color: white;
        font-weight: bold;
    }
    .header{
        color: #0071ce;
        font-weight: bold;
        padding: 10px;
    }

<div class="container"> 
</div>

<div class="table_container">
<table id="plans">
    <tr><th>Plan A
        <input id="mycheck" type="checkbox" onchange="inputChanged(event)" />

    </th></tr>
    <tr>
        <td>$33.90</td>
    </tr>
    <tr>
        <td>$161.30</td>
    </tr>   
    <tr>
        <td>$53.30</td>
    </tr>
    <tr>
        <td>$186.20</td>
    </tr>
    <tr>
        <td>HSA match:up to $350</td>
    </tr>
    <tr>
        <td>HSA match:up to $700</td>
    </tr>
    <tr>
        <td>$3000</td>
    </tr>
</table>    
    </div>

<div class="table_container">
<table id="plans" >
    <tr><th>Plan B
        <input id="mycheck" type="checkbox" onchange="inputChanged(event)" />
    </th></tr>
    <tr>
        <td>$1386.20</td>
    </tr>
    <tr>
        <td>HSA match:up to $1350</td>
    </tr>
    <tr>
        <td>HSA match:up to $7010</td>
    </tr>
    <tr>
        <td>$222</td>
    </tr>
    <tr>
        <td>$55</td>
    </tr>
    <tr>
        <td>$432</td>
    </tr>
    <tr>
        <td>$300</td>
    </tr>
</table>    
    </div>

<div class="table_container">
<table id="plans">
    <tr><th>Plan C</th></tr>
    <tr>
        <td>$33.90</td>
    </tr>
    <tr>
        <td>$1161.30</td>
    </tr>   
    <tr>
        <td>$513.30</td>
    </tr>
    <tr>
        <td>$286.20</td>
    </tr>
    <tr>
        <td>HSA match:up to $1350</td>
    </tr>
    <tr>
        <td>HSA match:up to $1700</td>
    </tr>
    <tr>
        <td>$80</td>
    </tr>
    
</table>    
<button onclick="Calculate()">Compare</button>
    </div>
</div>

标签： javascripthtmljquerycssweb

Answer 1

你的意思是

const container = document.getElementById("container");
document.getElementById("check").addEventListener("click", function() {
  const checks = container.querySelectorAll(".select:checked")
  if (checks.length >= 2) {
    checks.forEach(chk => {
      const table = chk.nextElementSibling;
      console.log(table.querySelectorAll("td")[3].textContent)
    })
  }
})

td {
  border: 1px solid black
}

<button type="button" id="check">Compare</button>
<div id="container">
  <input type="checkbox" class="select">
  <table>
    <tbody>
      <tr>
        <td>Row 1</td>
        <td>Table 1 Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2</td>
        <td>Table 1 Row 2 Cell 2</td>
      </tr>
    </tbody>
  </table>
  <input type="checkbox" class="select">
  <table>
    <tbody>
      <tr>
        <td>Row 1</td>
        <td>Table 2 Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2</td>
        <td>Table 2 Row 2 Cell 2</td>
      </tr>
    </tbody>
  </table>
  <input type="checkbox" class="select">
  <table>
    <tbody>
      <tr>
        <td>Row 1</td>
        <td>Table 3 Row 1 Cell 2</td>
      </tr>
      <tr>
        <td>Row 2</td>
        <td>Table 3 Row 2 Cell 2</td>
      </tr>
    </tbody>
  </table>

</div>