js/jquery中获取table里边checkbox的选中状态以及选中该行的其他列数据

js/jquery中获取table里边checkbox的选中状态以及选中该行的其他列数据

如下是在js中通过DOM方式创建的row中的一列为CheckBox类型。

        var row = document.createElement('tr'); //创建行

        var checkbox = document.createElement('td');//创建列
        row.appendChild(checkbox);
        var btnCheckbox = document.createElement('input');
        btnCheckbox.setAttribute('name','ckb');
        btnCheckbox.setAttribute('type','checkbox');
        btnCheckbox.setAttribute('value','false');
        checkbox.appendChild(btnCheckbox);

如我们在table之外有一个删除按钮,需要点击它删除table中选中的数据,而传给服务端的是某一列数据比如id。
先判断是否选中,再根据选中的列获取id值,发送给服务端。

$("#btnDelSpell").click(function () {
            var checkLength = $("input:checkbox[name='ckb']:checked").length;
            if(checkLength == 0) {
                alert("请至少选择一条咒语!");
                return;
            }
            $("input[type='checkbox']").each(function(){ //遍历checkbox的选择状态
                if($(this).prop("checked")){ //如果值为checked表明选中了
                    alert($(this).closest('tr').find('td').eq(1).text()); //获取eq为1的那一列数据
                }
            });
        });
  • 9
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
可以通过antd的`Table`组件的`rowSelection`属性来实现多选和单选功能,并通过`selectedRowKeys`属性来获取当前选中的行的key值。 具体实现步骤如下: 1. 在`<Table>`组件添加`rowSelection`属性,设置`type`为`checkbox`表示启用多选功能。 ``` <Table rowSelection={{ type: "checkbox", onChange: this.onSelectChange, selectedRowKeys: this.state.selectedRowKeys }} columns={columns} dataSource={data} /> ``` 2. 在`<Table>`组件添加`onChange`事件处理函数`onSelectChange`。 ``` onSelectChange = (selectedRowKeys, selectedRows) => { this.setState({ selectedRowKeys }); }; ``` 3. 在`render()`函数获取当前选中行的key值。 ``` const { selectedRowKeys } = this.state; ``` 完整示例代码如下: ``` import React from "react"; import ReactDOM from "react-dom"; import { Table } from "antd"; const columns = [ { title: "Name", dataIndex: "name" }, { title: "Age", dataIndex: "age" }, { title: "Address", dataIndex: "address" } ]; const data = [ { key: "1", name: "John Brown", age: 32, address: "New York No. 1 Lake Park" }, { key: "2", name: "Jim Green", age: 42, address: "London No. 1 Lake Park" }, { key: "3", name: "Joe Black", age: 32, address: "Sidney No. 1 Lake Park" }, { key: "4", name: "Jim Red", age: 32, address: "London No. 2 Lake Park" } ]; class App extends React.Component { state = { selectedRowKeys: [] }; onSelectChange = (selectedRowKeys, selectedRows) => { this.setState({ selectedRowKeys }); }; render() { const { selectedRowKeys } = this.state; const rowSelection = { type: "checkbox", onChange: this.onSelectChange, selectedRowKeys }; return ( <Table rowSelection={rowSelection} columns={columns} dataSource={data} /> ); } } ReactDOM.render(<App />, document.getElementById("container")); ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值