瞄準正確的行元素

示例代碼：瞄準正確的行元素

<tr><td>first_button</td><td>second_button</td></tr> 
<tr><td>first_button</td></tr> 
<tr><td>first_button</td><td>second_button</td></tr> 
<tr><td>first_button</td></tr> 
<tr><td>first_button</td><td>second_button</td></tr>

function someFunc(i) { 

    // first button appears on every row 
    first_button[i].style.display="none"; // works 

    // second button appears randomly 
    second_button[i].style.display="none"; // doesn't work as intended 

} 

// someFunc(2) targets the third row's "first_button" but 
// the last row's "second_button". I want to target the 
// third row's buttons, not the third button of each type.

var i與每一行遞增。我想定位第i行的按鈕而不是每種類型的第i個按鈕。什麼是最簡單的方法來做到這一點？

來源

2014-02-21 Colton Allen

如何做'first_button'和'second_button'變量得到填充？ – gilly3

是否只有一個'second_button'？ – George

@ gilly3它們只是表格中的html元素。 –

定位行索引，而不是包含「按鈕」的節點列表的索引。也把支票在那裏，以確保第二小區中存在有：

var table = document.getElementById('mytable'); 

function someFunc(i) { 
    var row = table.getElementsByTagName('tr')[i]; 
    var cells = row.getElementsByTagName('td'); 

    cells[0].style.display="none"; 
    if(typeof(cells[1]) != 'undefined'){ 
     cells[1].style.display="none"; 
    } 
}

JSFiddle

來源

2014-02-21 20:41:47 George

查看['table.rows'集合]（https://developer.mozilla.org/en-US/docs/Web/API/） HTMLTableElement.rows）和['row.cells'集合]（https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableRowElement）。使用內置集合更清潔，並避免從嵌套表中選擇行。 [jsfiddle.net/KWzGQ/2](http://jsfiddle.net/KWzGQ/2/） – gilly3

@ gilly3謝謝，我會接受你的建議並使用該集合。 –

您可能正在使用一些document方法來獲取對按鈕的引用。也許document.getElementsByClassName()或document.querySelectorAll()。這些方法也適用於單個元素。因此，您可以獲得對<tr>元素的引用，並調用row.getElementsByClassName()以獲取該行的後代元素。

來源

2014-02-21 20:41:12 gilly3

瞄準正確的行元素

回答

相關問題