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

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

html

    
Info Header 1
    
Info Header 2
    
Info Header 3
    
操作
 


    
Text 1A
    
Text 1B
    
Text 1C
    

 


    
Text 2A
    
Text 2B
    
Text 2C
    

 


    提交已选数据

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:

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

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

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