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

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

转载作者：行者123 更新时间：2023-12-04 07:35:25

26

4

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

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

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

最佳答案

您可以 each循环遍历您的 trs然后在这个内部使用 .val() 获取输入值和 is(":checked")并将它们保存在 array 中。
演示代码 :

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>

关于javascript - 在 HTML 表格中获取整个选定的列值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/67775263/

26

4

0

文章推荐： c# - 基于编译时类型自定义Json.NET序列化

文章推荐： javascript - 使用 NeutralinoJS 获取输入文件路径

CSS 选定/事件属性
我有十二个指向不同类别的链接。作为用户定位的一种方式，我想强调用户现在所在的类别( - 按钮)。如何在 CSS 中实现这一点？我读到了 selected和 active ，但我还没能让它发挥作用。
jquery - 如何获取选择框中的所有选项值(选定/未选定)
我想通过单击按钮来获取选择框中的所有选项值(选定/未选定)。我怎样才能做到这一点？最佳答案我认为这是使用 Traversing/map 的好机会方法: var valuesArray = $("#
java - Android - 如何保持按钮被单击(选定)？
我正在尝试构建一个计算器，其中包含两个数字的两个 TextView 字段。我弄清楚了如何使用“应用程序内”数字键盘输入顶部数字 Operand 1 [textView] 的数字(我知道使用 EditT
javascript - 选定 DOM 元素文本的算术
我有一个简单的 jQuery $("span.value")，它选择包含文本的节点。此文本保证为整数。如何计算所有选定节点文本的总和，并将总和放入另一个节点？ 3 4 5 ? 最佳答案你可以这样做:
mysql - 选定 mysql 数据库的备份授予权限
我从同一台服务器上托管的一堆数据库中备份了 mysql 数据库 db1。现在只需要备份具有访问 db1 权限的选定用户，以便我可以在 db1 还原之前将这些特权用户还原到我的新服务器。最佳答案 St
android - 选定 ListView 项的向上滑动动画
我有一个 ListView 。我想添加一个动画，如果我选择一个列表项，它将被删除，并且该项目下方的其余项目将通过向上滑动动画向上移动。我已经通过获取其子位置使用线性布局完成了此操作，但我无法理解如何向
python - 如何使用Python从outlook获取突出显示(选定)的邮件？
我不明白如何使用 Python 解析来自 Outlook 的突出显示(选定)邮件？我有这个代码，但它适用于上一封邮件。 import win32com.client outlook = win32c
ios - 选项卡栏项目 - 选定/未选定图标
在 Xcode 6 中，您现在可以为选项卡项目的选中和未选中状态设置图标。请参阅下图中的说明: 和唯一的问题是 SELECTED 状态的图像不显示。它只是显示空白。还有其他人有这个问题吗？请看下面的
c# - 使用数据库中的“选定”成员对组成员资格进行建模
在我的数据模型中，我有一个实体组和另一个GroupMember实体。一个Group包含一个或多个GroupMembers，但一个GroupMember只能同时位于一个Group中。到目前为止没有问题，
android - 按钮和正常/选定/按下状态之间的动画转换
Android Button 在不同状态(正常、按下、选中、禁用)之间移动时会更改其可绘制背景。背景切换是即时的。是否可以使其平滑(动画)？最佳答案是的，这是可能的。您只需为按钮添加 addAni
在 Emacs 中搜索标记(选定)文本
我使用 emacs 来查看和编辑代码和其他文本文件。我想知道是否有一种方法可以向前或向后搜索当前缓冲区中标记的文本。类似于我在记事本或写字板中可以执行的操作。就像我可以在缓冲区中标记一些文本并执行 C
javascript - 如何根据状态(选定、禁用)设置自定义选择类？
如何根据状态(选定、禁用)设置自定义选择类？如何根据状态选择(选定、禁用)在自定义下拉列表中设置类？照做了，但什么也没发生。请看我的例子................................
javascript - 使用 Jquery 在下拉菜单中查找文本并将其设置为“选定”
我正在尝试检查下拉菜单中是否存在特定文本值，如果存在，我想将其属性设置为selected。我成功编写了一个 if 语句来检查文本是否存在: var country = usr.location; i
java - 如何在java中获取android文本大小设置(最小，最大，选定)
对于我的应用程序，我想让用户能够在回收器 View 中调整 TextView 项目的文本大小(通过捏缩放或 SeekBar)。默认值应为系统设置中选择的文本大小。最小值应为系统设置中的“非常小”，最大
c# - 具有自定义边框的 WPF 选定 ListBoxItem
我正在尝试创建一个 ListBoxItem 模板，该模板在选择时将带有圆角边框。我得到了这个 xaml，它在选择时不起作用:
javascript - WebdriverIO - 如何检索当前焦点/选定/事件元素的 HTML？
我正在寻找检索焦点元素的 HTML。查看 webdriver.io 文档，方法 .getActiveElement() 应该可以解决这个问题。但是，我的 IDE (WebStorm) 显示错误，指出它
java - 选定 Canvas 的 Android 动画
我创建了一个圆，在我的 onDraw() 方法中围绕圆绘制了一条字符串和一条线(箭头)。 public class Circle extends Activity { public class
c# - MaterialDesignInXamlToolkit ElementHost DatePicker 选定/当前日期显示不正确
对于生产应用程序，我们希望在 Windows 窗体应用程序的 ElementHost 内显示 DatePicker，但我们遇到了 SelectedDate 和 CurrentDate 不可读的问题，因
php - 带单选按钮的 BIT 数据类型(选定/未选定)
好的，我在此处和 Google 上的许多网站上搜索了此问题的结果，但找不到针对我的问题的确切解决方案。我有一个 sql 提取姓名和办公室。所以事情是这样的: $sql = "SELECT m
iphone - 如何更改 UITableViewCell 选定 View 的颜色？
选中单元格时如何改变灰色？最佳答案当用户点击选中的行 (void)tableView:(UITableView *)tableView didSelectRowAtIndexPath:(NSInd

首页

博学

6Ren·AI

商城

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