快捷導(dǎo)航

jQuery學(xué)習(xí)筆記(4)--Jquery中獲取table中某列值的具體思路

更新時(shí)間：2013年04月10日 08:53:09 作者：

由于要獲取某列中的一個(gè)ID值，如果用JS傳值的方式此問題就不存在，由于此次用到的都是jquery插件，包括各種彈出框，用JS傳值就得用JS那丑陋的彈出框，所以，你懂得

花了一晚上的時(shí)間解決了一個(gè)看似很容易的問題。今晚做的這個(gè)東西中由于要獲取某列中的一個(gè)ID值。如果是用平常的那種JS傳值的方式此問題就不存在，但是由于此次用到的都是jquery插件，包括各種彈出框，用JS傳值就得用JS那丑陋的彈出框，所以，你懂得。

網(wǎng)上找了很多方法，用起來都不行，后來想到了jquery中的鼠標(biāo)事件，可以在鼠標(biāo)經(jīng)過table時(shí)，獲得當(dāng)前行與列的值。頁面如下所示：

具體操作就是點(diǎn)擊“刪除”按鈕，然后調(diào)用jquery插件頁面，這時(shí)候需要獲得相應(yīng)行的“ID”進(jìn)行操作。我的方法是：

先定義一個(gè)行數(shù)與列數(shù)的全局變量，然后在鼠標(biāo)經(jīng)過按鈕時(shí)獲得此行的行數(shù)與列數(shù)并付給此全局變量：

復(fù)制代碼代碼如下:

 
var trNum; 
var tdNum; 
$(function(){ 
//定義一個(gè)鼠標(biāo)經(jīng)過事件 
$('#users td').hover( 
function(){ 
//獲得table的行號(hào) 
trNum = $(this).parent().parent().find('tr').index($(this).parent()[0])+ 1; 
//獲得table的列號(hào) 
tdNum = $(this).parent().find('td').index($(this)[0])+ 1; 
} 
); 

其中，“users”為此table的ID.然后再根據(jù)此ID進(jìn)行業(yè)務(wù)處理，如下所示：

復(fù)制代碼代碼如下:

 
01.//點(diǎn)擊“彈出框”選擇“確定”后的業(yè)務(wù)處理 
$("#dialog-confirm").dialog({ 
autoOpen:false, 
resizable:false, 
height:150, 
modal:true, 
buttons:{ 
"確定":function(){ 
var au_id = $('#users').find('tr:eq(' + (trNum) + ')').find('td:eq(0)').text(); //獲得對(duì)應(yīng)第一列的ID值 
//業(yè)務(wù)處理省略 
…… 
}, 
"取消":function(){ 
$(this).dialog("close"); 
} 
}} 
); 

小問題凝聚著大智慧，通過解決問題提高自己學(xué)習(xí)能力，解決問題的能力，是我一直崇尚的真理！

您可能感興趣的文章:

相關(guān)文章

使用jquery Ajax實(shí)現(xiàn)上傳附件功能
這篇文章主要為大家詳細(xì)介紹了使用jquery Ajax實(shí)現(xiàn)上傳附件功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-10-10
JQuery打造省市下拉框聯(lián)動(dòng)效果
考慮將需要?jiǎng)討B(tài)刷新的內(nèi)容自動(dòng)拼接到前一個(gè)下拉框之后等等，用JQuery實(shí)現(xiàn)比較容易，代碼以省市聯(lián)動(dòng)效果為例實(shí)現(xiàn)
2014-05-05
jQuery實(shí)現(xiàn)點(diǎn)擊小圖片淡入淡出顯示大圖片特效
本文給大家分享基于jquery實(shí)現(xiàn)的一款圖片特效，當(dāng)點(diǎn)擊小圖片時(shí)會(huì)淡入淡出大圖片，通過定義需要展示的圖片以及圖片要展示的時(shí)間，來實(shí)現(xiàn)這一效果，感興趣的朋友跟著小編一起來學(xué)習(xí)吧
2015-09-09
jQuery超簡(jiǎn)單遮罩層實(shí)現(xiàn)方法示例
這篇文章主要介紹了jQuery超簡(jiǎn)單遮罩層實(shí)現(xiàn)方法,結(jié)合實(shí)例形式詳細(xì)分析了jQuery遮罩層相關(guān)屬性樣式動(dòng)態(tài)控制操作技巧,需要的朋友可以參考下
2018-09-09
jQuery ajax應(yīng)用總結(jié)
Ajax在Web應(yīng)用中的作用越來越大，許多工具都包含了對(duì)這一功能的使用，以下是對(duì)這些常用工具中Ajax的典型實(shí)例.
2016-06-06
easyui取消表單實(shí)時(shí)驗(yàn)證,提交時(shí)統(tǒng)一驗(yàn)證的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)硪黄猠asyui取消表單實(shí)時(shí)驗(yàn)證,提交時(shí)統(tǒng)一驗(yàn)證的簡(jiǎn)單實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-11-11
checkbox 選中一個(gè)另一個(gè)checkbox也會(huì)選中的實(shí)現(xiàn)代碼
本文給大家?guī)砹薱heckbox選擇器之checkbox 選中一個(gè)另一個(gè)checkbox也會(huì)選中的實(shí)現(xiàn)代碼，非常不錯(cuò)，有需要的可以參考下
2016-07-07
jQuery學(xué)習(xí)筆記之jQuery.extend(),jQuery.fn.extend()分析
給jQuery做過擴(kuò)展或者制作過jQuery插件的人這兩個(gè)方法東西可能不陌生. jQuery.extend([deep],target,object1,,object2...[objectN]) jQuery.fn.extend([deep],target,object1,,object2...[objectN]) 這兩個(gè)屬性都是用于合并兩個(gè)或多個(gè)對(duì)象的屬性到target對(duì)象.
2014-06-06
jQuery實(shí)現(xiàn)可編輯的表格
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)可編輯的表格，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-12-12
jQuery+CSS3實(shí)現(xiàn)樹葉飄落特效
本文給大家分享的是一段使用jQuery+CSS3實(shí)現(xiàn)樹葉飄落特效的代碼，效果非常不錯(cuò)，分享給大家，希望大家能夠喜歡
2015-02-02