在 HTML 表中获取整个选定的列值答案

【问题标题】：Get whole selected Column value in the HTML table在 HTML 表中获取整个选定的列值
【发布时间】：2021-08-18 20:24:09
【问题描述】：

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

现在我只能获取第一行的值，警报消息显示Checkbox value is: true and Company value is: Alfreds Futterkiste。

我可以知道如何在表格列中获取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://stackoverflow.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>

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

【问题讨论】：

标签： javascript html jquery checkbox

【解决方案1】：

您可以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>

【讨论】：

你对这个问题有什么想法吗？ stackoverflow.com/questions/67786394/…

【解决方案2】：

您不能在页面中重复 ID，因此请更改类名。

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

注意，我还添加了 <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>

【讨论】：