关于jQuery获取table表格数据的理解

标签：case   address   lan   detail   cts   选择   display   box   提示   

html

<table class="m-tb2">
 <tr>
    <th style="width:10px;"><input id="SelectAll" type="checkbox" name="ckb"/></th>
    <th>Info Header 1</th>
    <th>Info Header 2</th>
    <th>Info Header 3</th>
    <th style="width:50px;">操作</th>
 </tr>
 <tr>
    <td><input id="" class="SelectSingle" type="checkbox" value="" name="ckb"/></td>
    <td>Text 1A</td>
    <td>Text 1B</td>
    <td>Text 1C</td>
    <td><input class="Select" id="ButtonSelect" type="button" value="选择" /></td>
 </tr>
 <tr>
    <td><input id="" class="SelectSingle" type="checkbox" value="" name="ckb"/></td>
    <td>Text 2A</td>
    <td>Text 2B</td>
    <td>Text 2C</td>
    <td><input class="Select" id="ButtonSelect" type="button" value="选择" /></td>
 </tr>
</table>
<div style="text-align:center;margin-top: 10px;height:30px;line-height:30px;">
    <button type="button" style="text-align:center;width:100px;height:30px;" id="btnDelSpell">提交已选数据</button>
</div>

js

//  点击选择时 获取选择的行内数据
$(‘.Select‘).click(function(event) {
    var tr = $(this).closest("tr")
    var colData1 = tr.find("td:eq(1)").text()
    var colData2 = tr.find("td:eq(2)").text()
    var colData3 = tr.find("td:eq(3)").text()
    alert(colData1)
    alert(colData2)
    alert(colData3)
    var row = $(this).parent("td").parent("tr");//获取选中行
    // alert(row)
    console.log(row)
    console.log(tr)
});


/*  点击复选框提交数据时 若不选择提示选择 若已选择就获取当前所有选择的数据 */
$("#btnDelSpell").click(function () {
    var checkLength = $("input:checkbox[name=‘ckb‘]:checked").length;
    var ids = []
    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的那一列数据
            var tdid = $(this).closest(‘tr‘).find(‘td‘).eq(1).text()
            ids.push(tdid)
            console.log(ids)
        }
    });
});

css:

<style type="text/css">
/* reset */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
article,section { display: block; }
body { line-height: 1; }
ol,ul { list-style: none; }
blockquote,q { quotes: none; }
blockquote:before,blockquote:after,q:before,q:after { content: ‘‘; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
body,input,textarea,select,button { font: 12px/1.6em ‘5FAE8F6F96C59ED1‘,arial,‘5b8b4f53‘; color: #232323; outline: 0; }
a { color: #232323; }
.cb10 { height: 20px; }
/* m-tb */
.m-tb { width: 100%; }
.m-tb th { background-color: #CCCCCC; border: 1px solid #AAA; padding: 8px; }
.m-tb td { background-color: #EFEFEF; border: 1px solid #AAA; padding: 8px; }
.m-tb2 { width: 100%; }
.m-tb2 th { background-color: #dedede; border: 1px solid #666; padding: 8px; }
.m-tb2 td { background-color: #ffffff; border: 1px solid #666; padding: 8px; }
.m-tb3 { width: 100%; }
.m-tb3 th { background-color: #c3dde0; border: 1px solid #a9c6c9; padding: 8px; }
.m-tb3 td { background-color: #d4e3e5; border: 1px solid #a9c6c9; padding: 8px; }
</style>

关于jQuery获取table表格数据的理解

标签：case   address   lan   detail   cts   选择   display   box   提示   

原文地址：https://www.cnblogs.com/zz-eternity/p/14322930.html