Javascriptを使用して、rowIndexによってテーブル行を見つけることはできますか？

-2

私は複数の行と列を持つHTMLテーブルを持っています。また、特定の行のインデックスが保存されているuserRowIndexという名前の変数があります。 JavaScriptとuserRowIndex変数を使用して、この行全体のコンテンツを編集可能にしたいと考えています。これどうやってするの？Javascriptを使用して、rowIndexによってテーブル行を見つけることはできますか？

出典

2017-10-20 S. Jones

は、JavaScriptライブラリを使用していますか？ –

いいえ、私はJSライブラリを使用していません。どちらかを使用することにあまり気を使っていません。 –

'document.querySelector'を' nth-child' CSSセレクタとともに使用してバニラJSでこれを実現できます。 – Amy

var rows = document.getElementById("myTable").getElementsByTagName('tr'); 
 
// whatever your userRowIndex is : 
 
var userRowIndex = 1; 
 

 
rows[userRowIndex].className = 'red';

<html> 
 
<head> 
 
    <style type='text/css'> .red{color:red;}</style> 
 
</head> 
 
<body> 
 
<table id="myTable"> 
 
\t <tr> 
 
\t \t <td>1</td> 
 
\t \t <td>One</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>2</td> 
 
\t \t <td>Two</td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td>3</td> 
 
\t \t <td>Three</td> 
 
\t </tr> 
 
</table> 
 
</body> 
 
</html>

出典

2017-10-20 16:00:14 RogerC

この方法は良いですが、非常に長いテーブルでは遅れを引き起こす可能性があります –

これは、特定のtdがで編集可能にすることができます。また1 tdの点に注意してください。rowIndex

// get the table 
 
var getTable = document.querySelector("#demotable"); 
 
// adding event listener 
 
getTable.addEventListener('click', function(event) { 
 
    // current cell index 
 
    var col = event.target.cellIndex, 
 
    // get index of row from td 
 
    row = event.target.parentNode.rowIndex; 
 
    // set the contenteditable property to it 
 
    this.rows[row].cells[col].setAttribute('contenteditable', 'true') 
 
})

<table border id="demotable"> 
 

 

 
    <tr> 
 
    <td>1</td> 
 
    <td>2</td> 
 
    <td>3</td> 
 
    </tr> 
 
    <tr> 
 
    <td>4</td> 
 
    <td>5</td> 
 
    <td>6</td> 
 
    </tr> 
 

 
</table>

を使用して編集可能にすることができる方法の基本的な例です。 t。でも、彼は、行全体を編集可能にすることができますが、唯一の1つのセルがこれは速いかもしれ一度

出典

2017-10-20 16:13:41 brk

を変更することができます。

function getRowByIndex(userRowIndex) 
{ 
    var rows = null; 
    var row = null; 

    try 
    { 
     rows = document.getElementById("myTable").getElementsByTagName('tr'); 

     if(rows!=null) 
     { 
      // This uses 0 based indexing, so assume that the passed value is in that range 
      row = rows[userRowIndex]; 
     } 

    } 
    catch(e) 
    { 
     alert("getRowByIndex Error: " + e.Message); 
    } 
    finally 
    { 

    } 

    return row; 
}

出典

2017-10-20 16:13:55 codemaker

Javascriptを使用して、rowIndexによってテーブル行を見つけることはできますか？

答えて

関連する問題