table
目前創(chuàng)新互聯(lián)建站已為1000多家的企業(yè)提供了網(wǎng)站建設(shè)、域名、網(wǎng)站空間、網(wǎng)站托管、服務(wù)器租用、企業(yè)網(wǎng)站設(shè)計(jì)、振安網(wǎng)站維護(hù)等服務(wù),公司將堅(jiān)持客戶導(dǎo)向、應(yīng)用為本的策略,正道將秉承"和諧、參與、激情"的文化,與客戶和合作伙伴齊心協(xié)力一起成長,共同發(fā)展。
class="table
table-hover"
id="test123"
tr
th
width="45"選擇/th
th
width="100"駕校名稱/th
th
width="100"合作駕校名稱/th
th
width="100"申請時(shí)間/th
th
width="100"申請狀態(tài)/th
th
width="100"操作/th
/tr
tr
tdinput
type="checkbox"
name="id"
value="1"
//td
td中大駕校/td
td瀟湘駕校/td
td2016-04-15
14:40:20/td
td
class="tablestate"未處理/td
tda
class="change
button
border-blue
button-little
update"
href="#"修改申請狀態(tài)/a/td
/tr
tr
tdinput
type="checkbox"
name="id"
value="1"
//td
td中大駕校/td
td瀟湘駕校/td
td2016-04-15
14:40:20/td
td
class="tablestate"未處理/td
tda
class="change
button
border-blue
button-little
update"
href="#"修改申請狀態(tài)/a/td
/tr
/table
擴(kuò)展資料:
遍歷同胞:
siblings():被選中時(shí)找到自己的兄弟姐妹,寫法有siblings(所有的兄弟姐妹)和siblings(“同級的兄弟姐妹”)。
next():被選中時(shí)找到自己的下級,寫法有
nextAll(找到所有的下級)和next(“找到下一個元素”)和nextuntil("被選中的元素的范圍內(nèi)的元素")。
prev(),
prevAll()
以及
prevUntil()
方法的工作方式與上面的方法類似,只不過方向相反:它們返回的是前面的同胞元素(在
DOM
樹中沿著同胞元素向后遍歷,而不是向前)。
first():返回被選中的第一元素
,寫法
$("div
p").first().css("樣式")
。
last():被選中的最后一個元素,寫法
$("div
p").last().css(”樣式“)
。
eq():返回被選中元素中有索引的元素,索引號,是從0開始不是從1開始比如tr.eq(0).id
==data.eq[i-1].id
或者
tr[0].id
=
data[i-1].id。
filter():刪除真正意義上的過濾,寫法
$("div
").filter("span").hide()
。
not():就是跟filter()相反的用法。
如下所示:
tbody
id="already_question_list"
tr
td?php
echo
$val['unique_number'];
?/td
td?php
echo
$val['year'].'-'.$val['series'];
?/td
td?php
echo
$val['content']
?/td
td?php
echo
$val['knowledges']
?/td
td?php
echo
$val['last_admin'];
?/td
td
input
type="button"
class="btn"
value="-"
data-score="?php
echo
$val['score'];
?"
onclick='remove_selected(this);'/\
input
type="hidden"
name="question_numbers[]"
value="?php
echo
$val['unique_number'];
?"/
/td
/tr
/tbody
script
var
leng
=
$("#already_question_list
tr").length;
var
filter_numbs
=
new
Array();
for(var
i=0;
i=leng;
i++)
{
numberStr
=
$("#already_question_list
tr").eq(i).find("td:first").html();
filter_numbs.push(numberStr);
}
/script
以上就是小編為大家?guī)淼膉Query
獲取遍歷獲取table中每一個tr中的第一個td的方法全部內(nèi)容了,希望大家多多支持腳本之家~
選擇表格中每一行的第一列可以使用jquery的遍歷實(shí)現(xiàn)$("table?tr").each(function()?{????//?遍歷每一行
$(this).children('td:eq(0)');??//?td:eq(0)選擇器表示第一個單元格
});下面給出實(shí)例演示:點(diǎn)擊按鈕后表格的第一列將被加上背景色
創(chuàng)建Html代碼
div?class="box"
span點(diǎn)擊按鈕后,第一列將被加上背景色:/spanbr
div?class="content"
table
trtd1/tdtd2/tdtd3/td/tr
trtd4/tdtd5/tdtd6/td/tr
trtd7/tdtd8/tdtd9/td/tr
/table
/div
input?type="button"?class="btn"?value="選中第一列"
/div
簡單添加一點(diǎn)css樣式
div.box{width:300px;height:250px;padding:10px?20px;border:4px?dashed?#ccc;}
div.boxspan{color:#999;font-style:italic;}
div.content{width:250px;height:100px;margin:10px?0;padding:5px?20px;border:2px?solid?#ff6666;}
input[type='button']{width:200px;height:35px;margin:10px;border:2px?solid?#ebbcbe;}
.selected{background:#99ccff;}
table{border-collapse:collapse;}
td{padding:5px?10px;border:1px?solid?green;}
編寫jquery代碼
$(function(){
$("input:button").click(function()?{
$("table?tr").each(function()?{
$(this).children('td:eq(0)').addClass('selected');
});
});
})
觀察顯示效果
初始狀態(tài)
點(diǎn)擊按鈕選擇第一列后
var arr1 = $("#表格").find("tr");//得到table中包含頭部的所有tr
var arr2 = $("#表格 tbody").find("tr");//得到table中tbody中的所有tr
var arr3 = $("#表格 thead").find("tr");//得到table中thead中的所有tr
上面都是集合,
$.each(arr1,function(i){
console.log(arr1.eq(i).html())
})
var?obj?=?{};
Array.prototype.forEach.call($('table?tr'),?function(tr?,?index){
obj['tr'?+?index]?=?tr;
});
console.dir(obj);
這個簡單,假如你的表格id為table,表格第一列為checkbox,然后在checkbox選中的情況下將表格所有第二列中的數(shù)據(jù)放到一個數(shù)組中
1234567var data = [];$(function(){ $("#table").find(":checkbox:checked").each(function(){ var val = $(this).parent().next().text(); data.push(val); });});