获取 HTML table 中的整个选定列值

Question

我在从 HTML table 列获取 Checkbox 和 Company 整个值时遇到问题，下面是示例图片：

现在我只能得到第一行的值，提示信息显示Checkbox value is: true and Company value is: Alfreds Futterkiste。

我可以知道如何在 table 列中获取 Checkbox 和 Company 的全部值，就像下面我想要的预期结果一样，警报消息将显示 Checkbox value is: true,false,true,false,true,false and Company value is: Alfreds Futterkiste,Centro comercial Moctezuma,Ernst Handel,Island Trading,Laughing Bacchus Winecellars,Magazzini Alimentari Riuniti:

function show_value(){
    var checkbox_val = document.getElementById("checkbox_val");
    var company_name = document.getElementById("company_name").value;
    alert ("Checkbox value is: "  + checkbox_val.checked + " and Company value is: " + company_name);
    //alert ("Company Name value is: "  + company_name);
}

https://whosebug.com/questions/ask#

<!DOCTYPE html>
<html>
<head>
<style>
table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}
</style>
</head>
<body>

<h2>HTML Table</h2>

<table>
  <tr>
    <th>Checkbox</th>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0"/>&nbsp;</td>
    <td><input type="text" id="company_name" name="company_name" value="Alfreds Futterkiste"/></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox_val" name="checkbox_val"  value="0"/>&nbsp;</td>
    <td><input type="text" id="company_name"  name="company_name" value="Centro comercial Moctezuma"/></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox_val" name="checkbox_val"  value="0"/>&nbsp;</td>
    <td><input type="text" id="company_name"  name="company_name" value="Ernst Handel"/></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox_val" name="checkbox_val"  value="0"/>&nbsp;</td>
    <td><input type="text" id="company_name"  name="company_name" value="Island Trading"/></td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox_val" name="checkbox_val"  value="0"/>&nbsp;</td>
    <td><input type="text" id="company_name"  name="company_name" value="Laughing Bacchus Winecellars"/></td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0" />&nbsp;</td>
    <td><input type="text" id="company_name" name="company_name" value="Magazzini Alimentari Riuniti"/></td>
    <td>Giovanni Rovelli</td>
    <td>Italy</td>
  </tr>
</table>
<button type="button" id="updateBtn_5" class="btn btn-sm btn-primary" onclick="show_value()">Show checkbox and company value</button>   
</body>
</html>

希望有人能指导我如何解决它。谢谢。

Answer 1

您不能在页面中重复 ID，因此请更改为 class 个名称。

您可以迭代行并在每一行中查询您需要的内容，然后映射到您想要的任何数据结构。

注意我还添加了 <tbody> 和 <thead> 以将标题行与数据行分开

类似于：

function show_value() {
  const rows = Array.from(document.querySelectorAll('#myTable tbody tr'))
  const res = rows.map(function(row) {
    return {
      check: row.querySelector('.checkbox_val').checked,
      comp: row.querySelector('.company_name').value
    }
  });
  console.log(res)
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<h2>HTML Table</h2>

<table id="myTable">
  <thead>
    <tr>
      <th>Checkbox</th>
      <th>Company</th>
      <th>Contact</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="checkbox_val" name="checkbox_val" value="0" />&nbsp;</td>
      <td><input type="text" class="company_name" name="company_name" value="Alfreds Futterkiste" /></td>
      <td>Maria Anders</td>
      <td>Germany</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox_val" name="checkbox_val" checked value="0" />&nbsp;</td>
      <td><input type="text" class="company_name" name="company_name" value="Centro comercial Moctezuma" /></td>
      <td>Francisco Chang</td>
      <td>Mexico</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox_val" name="checkbox_val" value="0" />&nbsp;</td>
      <td><input type="text" class="company_name" name="company_name" value="Ernst Handel" /></td>
      <td>Roland Mendel</td>
      <td>Austria</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox_val" name="checkbox_val" checked value="0" />&nbsp;</td>
      <td><input type="text" class="company_name" name="company_name" value="Island Trading" /></td>
      <td>Helen Bennett</td>
      <td>UK</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox_val" name="checkbox_val" value="0" />&nbsp;</td>
      <td><input type="text" class="company_name" name="company_name" value="Laughing Bacchus Winecellars" /></td>
      <td>Yoshi Tannamuri</td>
      <td>Canada</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox_val" name="checkbox_val" value="0" />&nbsp;</td>
      <td><input type="text" class="company_name" name="company_name" value="Magazzini Alimentari Riuniti" /></td>
      <td>Giovanni Rovelli</td>
      <td>Italy</td>
    </tr>
  </tbody>
</table>
<button type="button" id="updateBtn_5" class="btn btn-sm btn-primary" onclick="show_value()">Show checkbox and company value</button>
</body>

</html>

Answer 2

您可以 each 循环遍历您的 trs，然后在此内部使用 .val() 和 is(":checked") 获取输入值并将它们保存在数组中。

演示代码 :

function show_value() {
  var checkbox_state = []
  var company_name = []
  //use each loop
  $("[name=checkbox_val]").each(function() {
    checkbox_state.push($(this).is(":checked"))
    company_name.push($(this).closest("tr").find("[name=company_name]").val()) //push value in array

  })
  //just to print..
  console.log("checkbox -- " + checkbox_state.toString() + " Company name --" + company_name.toString())

}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

tr:nth-child(even) {
  background-color: #dddddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<table>
  <tr>
    <th>Checkbox</th>
    <th>Company</th>
    <th>Contact</th>
    <th>Country</th>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0" />&nbsp;</td>
    <td><input type="text" name="company_name" value="Alfreds Futterkiste" /></td>
    <td>Maria Anders</td>
    <td>Germany</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0" />&nbsp;</td>
    <td><input type="text" name="company_name" value="Centro comercial Moctezuma" /></td>
    <td>Francisco Chang</td>
    <td>Mexico</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0" />&nbsp;</td>
    <td><input type="text" name="company_name" value="Ernst Handel" /></td>
    <td>Roland Mendel</td>
    <td>Austria</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="checkbox_val" name="checkbox_val" value="0" checked/>&nbsp;</td>
    <td><input type="text" id="company_name" name="company_name" value="Island Trading" /></td>
    <td>Helen Bennett</td>
    <td>UK</td>
  </tr>
  <tr>
    <td><input type="checkbox" name="checkbox_val" value="0" checked />&nbsp;</td>
    <td><input type="text" name="company_name" value="Laughing Bacchus Winecellars" /></td>
    <td>Yoshi Tannamuri</td>
    <td>Canada</td>
  </tr>
</table>
<button type="button" id="updateBtn_5" class="btn btn-sm btn-primary" onclick="show_value()">Show checkbox and company value</button>

获取 HTML table 中的整个选定列值

Get whole selected Column value in the HTML table

html

javascript

checkbox

jquery