首页/其他教程/ jQuery获取表格中checkbox被选中一行的属性数据

jQuery获取表格中checkbox被选中一行的属性数据

作者:神奇   分类:其他教程   时间:2020-11-11 16:03:06  标签:


当都选其中某几项时,如果需要给服务端ajax传递对应项的id值,该如何做呢?
思路应该是这样的:
①获取被勾选项(即checked的checkbox所在行)
②将id存在checkbox所在input的自定义属性中,如data-id
③创建空数组,遍历被选中的checkbox所在行,获取对应的data-id值,存入数组中
④将存入的数组转化为字符串,并用逗号隔开(join(','))

html代码如下:

<table id="list-table">
    <thead>
        <tr>
            <th><div></div></th>
            <th><div>ID</div></th>
            <th><div>数据集</div></th>
            <th><div>数据集简介</div></th>
            <th><div>倒入时间</div></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><input type="checkbox" name="dataset-id" value="1" data-id="1"></td>
            <td>1</td>
            <td>GWC9B2015</td>
            <td>2015年平均值数据</td>
            <td>2017-05-23T15:43:58.020</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="dataset-id" value="2" data-id="2"></td>
            <td>2</td>
            <td>GWC9A2015</td>
            <td>2015年平均值数据2</td>
            <td>2017-05-24T14:40:33.441</td>
        </tr>
        <tr>
            <td><input type="checkbox" name="dataset-id" value="8" data-id="8"></td>
            <td>8</td>
            <td>cma_1km_stat</td>
            <td>2015年1公里风数据</td>
            <td>2017-05-24T16:12:12.620</td>
        </tr>
    </tbody>
</table>

JQ代码

    var $ids = [];    //定义一个空数组
    var $chkBoxes = $('#idc-list-table').find('input:checked');   //找到被选中的checkbox集
    if ($chkBoxes.length == 0) {         //如果不勾选弹出警告框
      alert('请至少选择一个数据集');
      return false;
    }

    //遍历被选中的checkbox集
    $($chkBoxes).each(function () { 
      $ids.push( $(this).attr('data-id') );   //找到对应checkbox中data-id属性值,然后push给空数组$ids
    });
    var $ids_str = $ids.join(',');              //将数组转化为用逗号隔开的字符串
    //( 还有一种写法:var $ids_str += ','+($ids + '') ) ,Number型加上空字符串''可以将Number转化为字符串
    console.log($ids_str);                  // =>1,2

温馨提示如有转载或引用以上内容之必要,敬请将本文链接作为出处标注,谢谢合作!

评论:

发表评论:

code