• js获取table checkbox选中行的值.mdjs获取table checkbox选中行的


    <!DOCTYPE html>
    <html>
        <head>
            <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
            <script>
                function check() {
                var check = $("input[type='checkbox']:checked");//在table中找input下类型为checkbox属性为选中状态的数据
                var i = 0;
                check.each(function(){
                    i++;
                });
                console.log(i);
                  check.each(function () {//遍历
                      var row = $(this).parent("td").parent("tr");
                    var id = row.find("[name='id']").html(); //注意html()和val()
                    var name = row.find("[name='name']").html(); 
                    console.log(id+","+name)
                })
            }
            </script>
        </head>
        <body>
            <table id="tab">
                <thead>
                    <tr>
                        <td>id</td>
                        <td>name</td>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><input name="sub" type="checkbox" /></td>
                        <td name="id">1</td>
                        <td name="name">1</td>
                    </tr>
                    <tr>
                        <td><input name="sub" type="checkbox" /></td>
                        <td name="id">2</td>
                        <td name="name">2</td>
                    </tr>
                    <tr>
                        <td><input name="sub" type="checkbox" /></td>
                        <td name="id">3</td>
                        <td name="name">3</td>
                    </tr>
                </tbody>
            </table>
    
            <input type="button" onclick="check()" value="提交" />
        </body>
    </html>

    使用了jquery.js 主要是将<input/>放在<td></td>中,根据checkbox选中的状态遍历,每一行 var row = $(this).parent("td").parent("tr");然后将需要获取的值设置一个name="",然后获取值。

  • 相关阅读:
    用GitHub Pages搭建博客(三)
    Beta阶段项目总结
    最终团队绩效评估
    Alpha阶段项目总结
    项目发布
    Alpha版总结会议
    第二次冲刺周期站立会议(10)
    第二次冲刺周期站立会议(9)
    第二次冲刺周期站立会议(8)
    第二次冲刺周期站立会议(7)
  • 原文地址:https://www.cnblogs.com/zwb1234/p/10908811.html
Copyright © 2020-2023  润新知