开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js获取选中行的值

在JavaScript中获取表格选中行的值，通常涉及到DOM操作。以下是一些基础概念和相关方法：

基础概念

DOM（Document Object Model）：文档对象模型，是HTML和XML文档的编程接口。
事件监听：通过监听用户的操作（如点击事件）来触发相应的JavaScript代码。
选择器：用于在DOM中选择特定的元素。

相关方法

document.querySelector：选择匹配指定CSS选择器的第一个元素。
document.querySelectorAll：选择匹配指定CSS选择器的所有元素。
element.addEventListener：为元素添加事件监听器。

示例代码

假设我们有一个表格，并且每行都有一个复选框，用户可以通过勾选复选框来选中行。以下是一个示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>获取选中行的值</title>
</head>
<body>
    <table id="myTable" border="1">
        <tr>
            <th>选择</th>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
        <tr>
            <td><input type="checkbox" class="rowCheckbox"></td>
            <td>张三</td>
            <td>25</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="rowCheckbox"></td>
            <td>李四</td>
            <td>30</td>
        </tr>
        <tr>
            <td><input type="checkbox" class="rowCheckbox"></td>
            <td>王五</td>
            <td>28</td>
        </tr>
    </table>
    <button id="getSelectedRows">获取选中行的值</button>

    <script>
        document.getElementById('getSelectedRows').addEventListener('click', function() {
            const checkboxes = document.querySelectorAll('.rowCheckbox:checked');
            const selectedRows = [];

            checkboxes.forEach(checkbox => {
                const row = checkbox.closest('tr');
                const cells = row.querySelectorAll('td');
                const rowData = {
                    name: cells[1].textContent,
                    age: cells[2].textContent
                };
                selectedRows.push(rowData);
            });

            console.log(selectedRows);
        });
    </script>
</body>
</html>

解释

HTML部分：
- 创建一个表格，每行都有一个复选框。
- 添加一个按钮，用于触发获取选中行值的操作。

JavaScript部分：
- 使用document.getElementById获取按钮元素，并为其添加点击事件监听器。
- 在点击事件中，使用document.querySelectorAll选择所有被选中的复选框（.rowCheckbox:checked）。
- 遍历选中的复选框，使用closest('tr')方法找到对应的行。
- 获取行中的单元格数据，并将其存储在一个对象中，最后将所有选中行的数据存储在一个数组中。
- 使用console.log输出选中行的数据。

应用场景

数据导出：用户可以选择表格中的某些行，然后导出这些行的数据。
批量操作：用户可以选择多行数据，进行批量删除、更新等操作。
数据分析：根据用户选择的行进行数据分析或统计。

通过这种方式，你可以轻松地获取用户在表格中选中的行的值，并进行相应的处理。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

Listview获取选中行的值

一般情况请注意别先删除了选中行，又去使用。那就会导致找不到选中行。。。。。哥犯了这个错误。。。..., MessageBoxDefaultButton.Button1) == DialogResult.OK) { //获得选择的序列号...lstwlview.Items[c[1]].Text; //ss = lstwlview.Items[c[0]].SubItems[1].Text;// 表示选中行的第二列

5.5K2 0

js获取ModelAndView值的问题

大家好，又见面了，我是你们的朋友全栈君。 JS当中不能接收ModelAndView的返回值吗？一定要在JSP页面中才能接收吗? 1 方法一【有效】可以的，跟el表达式访问方式一样。...user.getId(); view.addObject("userId",id); } return view; } 在页面jsp文件中js...台返回的是js，还是json？这个一定要搞清楚！...假设后台返回的字符串存储在responseText里，那么如果是js，就 var result = eval("(" + responseText + ")"); 如果是json，就 var result...，就是我创作的最大动力，我们下篇文章见！

17.8K2 0

JS获取URL“#”后的值

http://localhost:62683/youli/product.htm#0 alert(GetRequest()); //获取#号值 function GetRequest() {

54.5K2 0

js：如何获取select选中的值

我想获取select选中的value，或者text，或者…… 比如这个：的是你所选中项的index 3:拿到选中项options的value： myselect.options[index].value; 4:拿到选中项options...的text： myselect.options[index].text; 5:拿到选中项的其他值，比如这里的url： myselect.options[index].getAttribute(‘url’...); 二：jQuery方法 1:var options=$(“#select option:selected”); //获取选中的项 2:alert(options.val()); //拿到选中项的值...3:alert(options.text()); //拿到选中项的文本 4:alert(options.attr(‘url’)); //拿到选中项的url值版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人

26.8K3 0

JS和JQuery获取label的值

label> label 获取值...： label标签在JS和Jquery中使用不能像其他标签一样用value获取它的值 // input get value var input = document.getElementById("input_blog...正确获取： // js label get value var label = document.getElementById("label_blog"); var value = label.innerText.trim...(); // "http://blog.ithomer.net" 2）JQuery 正确获取： // jquery label get value var value = $("#label_blog...var label = document.getElementById("label_blog"); label.innerText="http://proxy.ithomer.net"; // js

9.2K2 0

PyQt5 技术篇-QSpinBox选值框值改变触发事件实例演示，获取QSpinBox组件的值，选值框的边界值设置方法

QSpinBox 组件值改变会触发 valueChanged 事件。...# 最大、最小值设置 self.spinBox.setMinimum(1) self.spinBox.setMaximum(3) # 值改变会触发 valueChanged 事件 self.spinBox.valueChanged.connect...(self.change_table) # 读取选值框里的值 def change_table(self): print(self.spinBox.value()) 实例效果图展示：

2.4K1 0

js 获取url 传值参数

function GetUrlParms() { var args=new Object(); var query=location.search.substring(1);//获取查询串

36.5K4 0

js获取数组中的最大值最小值

tmp[i]; } console.log(max); 使用apply方法： var a = [1,2,3,5]; console.log(Math.max.apply(null, a));//最大值...console.log(Math.min.apply(null, a));//最小值多维数组可以这么修改： var a = [1,2,3,[5,6],[1,4,8]]; var ta = a.join...(",").split(",");//转化为一维数组 console.log(Math.max.apply(null, ta));//最大值 console.log(Math.min.apply(null...);//转化为一维数组 console.log(Math.max.apply(null, ta));//最大值 console.log(Math.min.apply(null, ta));//最小值

36.4K5 0

netsfjsonjsonobject_js获取json对象的值

大家好，又见面了，我是你们的朋友全栈君。...最后一行需要保留，有两个jdk版本的实现：json-lib-2.1-jdk13.jar和json-lib-2.1-jdk15.jar 的内容，请发送邮件至举报，一经查实，本站将立刻删除。

13.8K3 0

Js通过值获取索引下标

var list = [1, 2, 3, 4, 5, 6, 7, 8] var index = list.map(item => item).index...

11.7K2 0

js、jQuery 获取文档、窗口、元素的各种值

基于两年开发经验，总结了 javascript、jQuery 获取窗口、文档、元素的各种值 javascript：文档：是整个document所有的内容浏览器当前窗口文档body的宽度： document.body.clientWidth...(其值会受滚动条的影响，相当于整个文档，整个页面的Y的值) IE9之下并不支持这个属性 clientY：鼠标相对于浏览器窗口左上角的偏移（其值不会受滚动条影响，相对于滚动条当前的位置的浏览窗口的...Y值）注意clientY和pageY的区别，pageY在页面无滚动条或滚动条下拉0的情况下值等同于clientY event.offsetX 相对容器的水平坐标 event.offsetY...offsetY ： offsetY和layerY的不同在于，前者的在计算偏移值时，相对于元素的border左上角的内交点，因此当鼠标位于元素的border上时，偏移值是一个负值...2.在元素具有上边框border-top的情况下， layerY比offsetY的值多一个border-top的宽度值。

14.1K3 2

Thymeleaf 获取model中的值和JS获取Model中的数据

21.7154145609395], [108.609408309177, 21.7154145609395] ] } }; 1:Thymeleaf 获取...model中的值访问model中的数据 //通过“${}”访问model中的属性 2:JS...获取Model中的数据 var a = [[${workDetail}]]; var b = [[${workDetail.id

24.3K1 0

WdatePicker 如何在js里获取到选中的值

WdatePicker 如何在js里获取到选中的值一：插件使用定义方法：代码如下：效果图：二将选中的值...(时间)赋值给定义的input框本身,实现方法是自定义一个函数，在选中时触发。 ...function pickedFunc() { $("#executeDateTime").val($dp.cal.getDateStr()); } 三：换取选中的时间： $("

11.5K1 0

js获取request中的值_set协议工作原理

大家好，又见面了，我是你们的朋友全栈君。...例如：下面就是一个完整的原始网络请求方式 HttpURLConnection conn = null; try { URL my_url = new URL(log()); //得到connection...请求行，请求头的设置必须放在网络连接前 conn.connect(); BufferedWriter writer = new BufferedWriter(new OutputStreamWriter...= -1) { baos.write(buffer, 0, len); } is.close(); // 把流中的数据转换成字符串, 采用的编码是: utf-8 String status = baos.toString...如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至举报，一经查实，本站将立刻删除。

7.3K2 0

Datatables获取选中行的某一列的数据

一、需求网上五花八门的获取方式有很多，但是很多都是过时的。方案都不可取。...二、获取方式我采用本办法拿到这个数据列 1、拿到整个表格 var table = $('#postTable').DataTable(); 2、拿到表格的所有数据 var data = table.rows...().data(); 3、拿到选择的列的隐藏数据id var report_Id = $("#report_Id:checked").val(); 4、通过遍历+判断的形式拿到需要的数据列 for (var...+) { if(data[i]["report_Id"] == report_Id){ tableName = data[i]["biz_Table_Name"]; } } 三、所有代码 //获取选中行的表名列

3.7K1 0

JS实现动态获取当前点击事件的id属性值

整个页面是通过ajax请求最新的4部视频进行填充完成，视频列表又是通过template-web.js插件补上去的，所以导致所有ID值都是一样的，一开始给按钮添加一个事件，结果是所有播放按钮都是播放第一个视频...于是，想了好多办法，又把ID属性给弄成动态的ajax请求的属性值，实现了每个id不一样，接下来，因为点击播放要调用一个方法，进行解析视频播放，拼接成API+视频链接的格式在新打开的弹窗进行展示。...具体可以看下图：要实现点击不同按钮，并且按钮ID是动态从ajax请求获取的，还要添加点击视频拼接视频链接，参考了文章，可以获取点击按钮的id值，然后使用button，将链接放在value中 Dom...对象的id属性可以获取元素的id值。...-- HTML结构 --> 获取id值">播放 // javascript

25.9K2 0

jQuery和js获取页面中所有a链接的href值

利用JavaScript和jQuery获取页面中的a链接： jQuery方法： //$('a') 获取了所有的a标签，然后循环获取 $('a').each(function(){ var href...JavaScript方法：可以封装成一个函数 function getHref(){ var hrefArr = document.getElementsByTagName('a'); //获取这个页面的所有...<hrefArr.length; i++ ){ hrefURL = hrefArr[i].href; console.log(hrefURL); } } 在合适的地方调用

14.6K2 0

ExtJs学习笔记(7)_获取GridPanel选中行的详细信息

这一节，我们将学习如何获取Grid当前选中行的信息 1.xml数据源内容: js"> js"> *{font-size:12px;line-height:130%;} </style...，设为false则不显示 renderTo: 'example-grid', //这个panel显示在html中id为container的层中 width...: 660, height: 100, html: "请在上面网格中选择一行数据"//panel主体中的内容，可以执行html代码

1.1K10 0

js解密之QQ的bkn值，获取QQ群成员信息，获取QQ好友列表信息

QQ群网站：https://qun.qq.com/member.html 咳咳，没别的，就是想看下群员而已，希望大家拿到信息后，不要忘记你所处之地，虽然只是群信息，没什么隐私资料，本来我只是想获取一下...QQ群成员信息，然后我在这个网站转了一下之后，发现不仅可以获取群员还可以获取你的QQ好友列表的一些信息，哈哈然后我准备在这，用我列表的QQ昵称做一张词云图。...POST请求，5个值 gc:188185074 //这个数字和群号是一样的，所以应该就是群号了 //By：www.lanol.cn。...然后返回到请求头那块看一看，是不是有一个这样的值。然后就可以确定这个e的来源了。...然后Cookie的话就是自己手动获取，或者等下次再出一个python登陆QQ的博文然后将这串不怎么麻烦的加密代码（总感觉有点不太真实）放到Python里面运算一下可以看到结果是一样的。

6.1K2 0

python测试开发django-125.bootstrapTable获取选中行的数据

前言如何获取bootstrapTable选中的checkbox数据 getSelections 获取全部选中数据 bootstrap table 获取全部选中行的数据有2个方法 getAllSelections...getSelections 返回选定的行，如果未选择任何记录，则返回一个空数组。 getSelections不会返回包含搜索刷选后的选中的数据。...点删除按钮，需获取选中的数据选中多行，获取选中行的所有数据：bootstrapTable(‘getSelections’) //作者-上海悠悠 QQ交流群:717225969 //blog地址 https...12313231","is_delete":"0"}, {"0":true,"id":2,"name":"张三老师","age":22,"tel":"21122121","is_delete":"0"} ] 获取选中数据的...12313231","is_delete":"0"}, {"0":true,"id":2,"name":"张三老师","age":22,"tel":"21122121","is_delete":"0"} ] 获取选中数据的

1.3K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭