如何遍歷和<tr>元素？

我有以下HTML表格結構：如何遍歷和<tr>元素？

<table>  
    <tr><td>ABC</td></tr> 
    <tr> 
     <td><input class="inp"/></td> 
     <td><input class="inp"/></td> 
    </tr> 
    <tr><td><input class="inp"/></td></tr> 
    <tr><td><input class="inp"/></td></tr> 
</table> 
<button id="btn">Click me</button>

然後，我的目的就是讓焦點總是通過點擊按鈕類「INP」旁邊的輸入字段。這裏是我的腳本：

var focused = null; 
$(".inp").focus(function() { 
    focused = $(this); 
}).first().focus(); 

$("#btn").click(function(e){ 
    if (focused && focused.length) { 
     //this only works horizontally. 
     focused.parent().next().find(".inp").focus(); 

     // this only works vertically. 
     //focused.closest("tr").next().find(".inp").focus(); 
    } 
});

我想集中在第一行的最後一個元素後的第二行。我如何結合這兩個陳述？

來源

2015-09-07 TasteMyBiceps

您可以通過使用jQuery .index()和.eq()功能上的包裹集中的所有投入要素的做到這一點。

當焦點位於最後一個輸入並單擊按鈕時，將焦點移回第一個輸入。

$(function() { 
    var $inputs = $('.inp'); 

    var index = null; 

    $inputs.focus(function() { 
     index = $inputs.index($(this)); 
    }); 

    $inputs.first().focus(); 

    $('#btn').click(function(e) { 
     if (index != null) { 
      index = (index + 1) % $inputs.length; 
      $inputs.eq(index).focus(); 
     } 
    }); 
});

jsfiddle

此版本不包住焦點回到第一個輸入。

$('#btn').click(function(e) { 
    if (index != null) { 
     if ((index + 1) < $inputs.length) { 
      $inputs.eq(index + 1).focus(); 
     } 
    } 
});

jsfiddle

來源

2015-09-07 03:38:03

完美答案。我想我需要一些時間來研究它。 :) – TasteMyBiceps

@TasteMyBiceps - 你選擇的答案可能適合你，但是它不允許有沒有輸入的''：[jsfiddle]（http://jsfiddle.net/h95ph6nt/），而這個技術確實[jsfiddle]（http://jsfiddle.net/h95ph6nt/1/）。 –

我現在感覺它。 – TasteMyBiceps

對不起，這有點令人困惑，你在點擊輸入域之間跳轉時想完成什麼？

另外，你只是試圖總是去下一個輸入，不管包裝是什麼？所以如果我點擊第二個輸入它會轉到第三個輸入，如果我點擊第一個輸入到第二個輸入？等

來源

2015-09-07 03:16:41 KrakenDev

的Bleh這是支持是註釋。 – KrakenDev

是的，我只是總想去下一個輸入。在重點轉到下一個領域之前，我拿出了代碼來簡化這個問題。 – TasteMyBiceps

試試這個：

HTML

<table> 
<tr> 
    <td>ABC</td> 
</tr> 
<tr> 
    <td> 
     <input class="inp" /> 
    </td> 
    <td> 
     <input class="inp" /> 
    </td> 
</tr> 
<tr> 
    <td> 
     <input class="inp" /> 
    </td> 
</tr> 
<tr> 
    <td> 
     <input class="inp" /> 
    </td> 
</tr> 
</table> 
<button id="btn">Click me</button>

// initial just focus on first input 
$('.inp').first().focus(); 
// get all input 
var all = $('.inp'); 
// get first input index and add one number for next focus 
var index = (all.index(all.first()) + 1); 

$('#btn').click(function() { 
    // if length of input same with current index 
    // defined into 0, (goes bact to first input) 
    // if does't wanna go back just remove this line 
    if (index == all.length) index = 0; 
    // focus next input 
    all.eq(index).focus(); 
    index++; 
});

DEMO

來源

2015-09-07 03:28:56

Thank you！This works。 – TasteMyBiceps

此代碼似乎有點討厭，但它會爲你做的工作：d

$(document).ready(function() { 

var focused = null; 

$(".inp").focus(function() { 
    focused = $(this); 
}).first().focus(); 

$("#btn").click(function(e) { 
    if (focused && focused.length) { 

     if ($(focused).closest('tr').find('td').length > 1 && $(focused).closest('td').next().length != 0) { 

      $(focused).closest('td').next().find('.inp').focus(); 
     } else { 

      $(focused).closest('tr').next().find('.inp').focus(); 

     } 

    } 
}); 

});

這裏是Plunker：http://plnkr.co/edit/Nm3wETpltRo6i7mAXPtj?p=preview

來源

2015-09-07 03:29:37 maddygoround

謝謝！它工作，更適合我的結構。 – TasteMyBiceps

不用客氣 – maddygoround

我，直到你到達最後一個是跳躍索引的小提琴。如果你想要，你可以修改它也倒退。

http://jsfiddle.net/gyebua9e/

$('.inp').first().focus(); 

var index = 0; 
var $inputs = $('.inp').length; 

$('#btn').click(function() { 
    index += 1; 
    $('.inp').eq(index).focus(); 
});

來源

2015-09-07 03:32:01 KrakenDev

謝謝！非常清楚。 – TasteMyBiceps

如何遍歷​​和<tr>元素？

回答

相關問題

如何遍歷和<tr>元素？