Jquery 选择 Table

jQuery对表格(table)的处理提供了相当强大的功能，比如说对表格特定行(row)或列(column)进行排序、样式改变等等。如果你的英文 够好，你可以读读这篇文章：jQuery table manipulation。本文只是介绍如何用jQuery语句对表格中行和列进行选择以及一些简单样式改变，希望它可以对jQuery表格处理的深层学 习提供一些帮助。

1.jquery中table追加tr  

我们知 道$("#editattachFilesDispalyTable").append("<tr><td class='labelTd' style='width:80%;' align='left'>文件名</td><td class='labelTd'>对应合同</td><tr>");

 

可以追加一行，但是加上去的行在下面的，如果想加最上面的行，应该使用prepend：

 

$("#editattachFilesDispalyTable").prepend("<tr><td class='labelTd' style='width:80%;' align='left'>文件名</td><td class='labelTd'>对应合同</td><tr>");

2.比如我们有这样一个表格：

第一列	第二列	第三列	第四列
第一列	第二列	第三列	第四列
第一列	第二列	第三列	第四列
第一列	第二列	第三列	第四列
第一列	第二列	第三列	第四列

对行进行操作比较简单：
1.如果我们要选择第一行，我们可以用 $("tr:eq(0)")
2.如果我们要选择第N行，我们可以用 $("tr:eq(n-1)")
3.如果我们要选择奇数行，我们可以用 $("tr:odd")
4.如果我们要选择偶数行，我们可以用 $("tr:even")
对列的操作相对麻烦一点，但是如果我们知道了其中原理也不难。表格里没有列的元素，第一列实际上是每一行的第一个区域(td)的组合。所以我们可以用循环来实现对行的选择。

1.如果我们要选择第一列并且对其样式进行改变，我们可以用下面的语句来实现

代码如下:

$(document).ready(function(){
$("table").find("td").each(function(i){//搜寻表格里的每一个区间
if(i%4 == 0){ //‘4'代表表格总共有4列，如果区间编号被4整除，那么它就属于第一列
$(this).addClass("col_1");}//给区间加上特定样式
});
});

2.如果我们要选择其它列，只需把上述代码里的i%4==0,进行相应的改变。记住：4代表表格的列数，如果你有10列就用10代替；选择第一列，余数等于0，选择第二列，余数应该等于1，如此类推。
我的方法要人為的更改表的列數

代码如下:

$(document).ready(function(){
$("#button1").click(function(){
$("#demo1 tr").each(function() {
$(this).find("td:first").css({color:"red", fontWeight:"bold"});
});
});
});

另外还可以改变选择器从而改变偶数列或者奇数列。注意：第一列从0开始，所以td：odd代表偶数列。

代码如下:

<script type="text/javascript"> 
$(document).ready(function(){ 
$("#10200902").click(function(){ 
$("#demo1 tr").each(function() { 
//alert("me"); 
$(this).find("td:odd").css({color:"green", fontWeight:"bold"}); 
}); 
}); 
}); 
</script> 
//注意：第一列从0開始，所以td:odd代表偶數列 
<button id="10200902">点击改变以上表格的偶數列</button>

3：用jquery 得到选择table 某一行的数据

<table>
<tr><td>行1列1</td><td>行1列2</td><td>行1列3</td></tr>
<tr><td>行2列1</td><td>行2列2</td><td>行2列3</td></tr>
</table>
<script type="text/javascript">
function getRow(rowIndex){
    return $("table tr").eq(rowIndex); 

}
function getCell(rowIndex,cellIndex){
    return $("table tr").eq(rowIndex).find("td").eq(cellIndex);

}
</script>

<table>
<tr><td>行1列1</td><td>行1列2</td><td>行1列3</td></tr>
<tr><td>行2列1</td><td>行2列2</td><td>行2列3</td></tr>
</table>
来个点击的
$("table tr").click(function()
{
    var $this = $(this);

    //$this就是这个行，你点哪行，哪行就有反应。

})

$("#表id").children().children()[i]   
通过表的id，找到表，children()是找到表下边的所有行，i 是你要取哪一行的[0,1,2,3,4....]都行

var paidId = $(this).parent("td").children("input.PaidId").val();
$("table.RePayTable tr td").children("input.paidSerial").each(function () {
}
 //循环获取实退金额以及退款渠道
        $("tr.clientPayRecord").each(function () {
            var clientPaid = $(this).children("td").children("input.accountReceived").val();
            var paidType = $(this).children("td").children("input.clientPaidChannel").val();
            var tableID = $(this).children("td").children("input.tableID").val();
            var tableName = $(this).children("td").children("input.tableName").val();
            var publicSerialNo = $(this).children("td").children("input.publicSerialNo").val();
            var cardNo = $(this).children("td").children("input.cardNo").val();                             //卡号
            var accreditNo = $(this).children("td").children("input.accreditNo").val();                     //授权号
            var expirydate = $(this).children("td").children("input.expirydate").val();                     //有效期
            var transIDO = $(this).children("td").children("input.transIDO").val() + "Refund0" + nCount;    //项目流水号
            var paidSerial = $(this).children("td").children("input.paidSerial").val();                     //有效期
            var paidId = "1";
            paidData += clientPaid + "_" + paidType + "_" + paidId + "_" + tableID + "_" + tableName + "_" + publicSerialNo + "_" + cardNo + "_" + accreditNo + "_" + expirydate + "_" + transIDO + "_" + paidSerial + ","
        });