javascript - 如何将每个 td 数据属性的选定复选框表行获取到数组对象？-6ren

javascript - 如何将每个 td 数据属性的选定复选框表行获取到数组对象？

转载作者：行者123 更新时间：2023-11-30 19:03:14

这是我的 Html 代码块，我从 rest api 加载了表数据，我想从使用复选框选择的每一行 td 数据属性中获取数组对象

<tr>
  <th scope='row' class='product-item-check'><input class='product-item-checkbox' type='checkbox' name='select-product' value='"+obj.pk_productId+"'></th>
  <td data-th_name='"+th_cell+"' data-td_name='"+td_cell+"' >" + td_cell + "</td>
</tr>

我的示例代码

$(document).on('click','.product-item-checkbox',function(){
        var thName;
        var tdName;
        var td;
        var checkedValue =  $('.product-item-checkbox:checked').closest('tr').find('td').map(function(i, v){
            thName = $(this).data('th_name');
            tdName = $(this).data('td_name');
            td = {
                "thead":thName,
                "tdata":tdName
            }
            return td;
        }).get();
        console.log(checkedValue);
});

当前输出
预期输出

[
  {
    "pk_productId": 1940690,
    "productCode": "abcmkk",
    "productDescription": "Sample Description",
    "callout": 12qwww,
    "product_type": "woven",
    "product_image": null,
    "status": 1234,
  },
  {
    "pk_productId": 1940690,
    "productCode": "abcmkk",
    "productDescription": "Sample Description",
    "callout": 12qwww,
    "product_type": "woven",
    "product_image": null,
    "status": 1234,
  }
]

最佳答案

如果我的理解正确，您是想获取 JSON 格式的选定行？

虽然这不是“同类”演示(就所使用的数据而言)，但想法/逻辑保持不变……像这样应该可以解决问题:

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;
}

<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script></head>
<table id="my-table"></table>
<h1 id="selected-items-title"></h1>
<pre id="selected-items"></pre>
<script>
    /**
     * GLOBAL DATA
     */
    let GLOBALS = {
        apiData: [ // PRETEND YOU ARE GETTING THIS DATA FROM A REST API
            { company: "Alfreds Futterkiste", name: "Maria Anders", country: "Germany" }, 
            { company: "Centro comercial Moctezuma", name: "Francisco Chang", country: "Mexico" }, 
            { company: "Ernst Handel", name: "Roland Mendel", country: "Austria" }
        ],
        tableData: "<tr><th></th><th>Company</th><th>Name</th><th>Country</th></tr>",
    }

    /**
     * DOCUMENT READY
     */
    $(document).ready(function () {
        // Add our API data to our table on load
        GLOBALS.apiData.forEach(item => {
            GLOBALS.tableData += `
            <tr>
                <td><input class='product-item-checkbox' type='checkbox' name='select-product'/></td>
                <td data-th_name="company" data-td_name="${item.company}">${item.company}</td>
                <td data-th_name="name" data-td_name="${item.name}">${item.name}</td>
                <td data-th_name="country" data-td_name="${item.country}">${item.country}</td>
            </tr>`;
        });
        $("#my-table").html(GLOBALS.tableData);
    });

    /**
     * EVENT .product-item-checkbox CLICK
     */
    $(document).on('click', '.product-item-checkbox', function () {
        // Finds all checked checkboxes and adds contents to array
        let selectedData = [];
        $('.product-item-checkbox:checkbox:checked').each((index, checkbox) => {
            let thName, tdName;
            let td = {};    
            $(checkbox).closest('tr').find('td').each(function (i, v) {
                thName = $(this).data('th_name');
                tdName = $(this).data('td_name');
                if (thName !== undefined) {
                    td[thName] = tdName;
                }                
            }).get();
            if (td) selectedData[selectedData.length] = td
        });
        
        if (selectedData.length > 0) {
            $("#selected-items-title").html("Selected Items:");
            $("#selected-items").show();
            $("#selected-items").html(JSON.stringify(selectedData, null, 2));
            console.log(selectedData);
        } else {
            $("#selected-items-title").html(""); 
            $("#selected-items").hide();
        }                 
    });
</script>

关于javascript - 如何将每个 td 数据属性的选定复选框表行获取到数组对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59273102/

文章推荐： javascript - 如何将值从 Java Controller 传回 Thymeleaf 前端？

文章推荐： javascript - 如何使用 JS/Puppeteer 上传文件

文章推荐： javascript - Angular 。为什么复选框表现得很奇怪？

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 如何将每个 td 数据属性的选定复选框表行获取到数组对象？