时间戳

首页 > 解决方案 > 在 HTML 表中获取整个选定的列值

javascript - 在 HTML 表中获取整个选定的列值

问题描述

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

输出1

现在我只能获取第一行中的值，警报消息显示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：

输出2

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>

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

标签： javascripthtmljquerycheckbox

解决方案

您不能在页面中重复 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>

推荐阅读