HTMLテーブルonClick関数がテーブルの行のキーと値を取得する

Question

onclick関数を使ってHTMLテーブルを作成して、行のキーと値を取得したいとしましたが、これまでのところonclick関数は動作していますが、どうすればこの問題を解決できますか？ありがとう。

私はあなたが最初の行をクリックしたとき、それは、この形式のコンソールログの表示になりたかった。ここでは

{ "name":"Clark", "age":29}; 

は、私が思うに、私のコード

var table = document.getElementById("tableID"); 
 
if (table != null) { 
 
    for (var i = 0; i < table.rows.length; i++) { 
 
    table.rows[i].onclick = function() { 
 
     tableText(this); 
 
    }; 
 
    } 
 
} 
 

 
function tableText(tableRow) { 
 
    var myJSON = JSON.stringify(tableRow); 
 
    console.log(myJSON); 
 
}

<table align="center" id="tableID" border="1" style="cursor: pointer;"> 
 
<thead> 
 
    <tr> 
 
     <th hidden="hidden"></th> 
 
     <th>name</th> 
 
     <th>age</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
     <td >Clark</td> 
 
     <td>29</td> 
 
    </tr> 
 
    <tr> 
 
     <td >Bruce</td> 
 
     <td>30</td> 
 
    </tr> 
 
</tbody> 
 
</table>

Answer 1

データをオブジェクトとして返すように私の答えを編集しました。スクリプトを実行して見てください。

var table = document.getElementById("tableID"); 
 
if (table) { 
 
    for (var i = 0; i < table.rows.length; i++) { 
 
    table.rows[i].onclick = function() { 
 
     tableText(this); 
 
    }; 
 
    } 
 
} 
 

 
function tableText(tableRow) { 
 
    var name = tableRow.childNodes[1].innerHTML; 
 
    var age = tableRow.childNodes[3].innerHTML; 
 
    var obj = {'name': name, 'age': age}; 
 
    console.log(obj); 
 
}

<table align="center" id="tableID" border="1" style="cursor: pointer;"> 
 
<thead> 
 
    <tr> 
 
     <th hidden="hidden"></th> 
 
     <th>name</th> 
 
     <th>age</th> 
 
    </tr> 
 
</thead> 
 
<tbody> 
 
    <tr> 
 
     <td >Clark</td> 
 
     <td>29</td> 
 
    </tr> 
 
    <tr> 
 
     <td >Bruce</td> 
 
     <td>30</td> 
 
    </tr> 
 
</tbody> 
 
</table>

Answer 2

ですtr.innerTestを使用して、タグの値を取得することができます

Answer 3

あなたはjQueryのを使用している場合は、この

$('#tableID').on('click', 'tr', function(e){ 
 
    tableText($(this).html()); 
 
}); 
 

 
function tableText(tableRow) { 
 
    var myJSON = JSON.stringify(tableRow); 
 
    console.log(myJSON); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> 
 

 
<table align="center" id="tableID" border="1" style="cursor: pointer;"> 
 
    <tr> 
 
    <td>Text</td> 
 
    <td>MoreText</td> 
 
    <td>Lorem</td> 
 
    <td>Ipsum</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Text</td> 
 
    <td>MoreText</td> 
 
    <td>Lorem</td> 
 
    <td>Ipsum</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Text</td> 
 
    <td>MoreText</td> 
 
    <td>Lorem</td> 
 
    <td>Ipsum</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Text</td> 
 
    <td>MoreText</td> 
 
    <td>Lorem</td> 
 
    <td>Ipsum</td> 
 
    </tr> 
 
</table>

Answer 4

行うには多くの方法がありますが、何」のようなテーブルにイベントリスナーを追加することができますしかし、堅牢で拡張可能な方法は、プロパティ名をテーブルのヘッダー行をクリックし、クリックされた行から値を取得します。

なぜヘッダーにセルが隠されているのか分かりませんが、それは事を複雑にします。あなたがデータのためにそれを使用しているなら、それはテーブルまたは行の関連するオブジェクトまたはdata-*プロパティのほうがずっと良いでしょう。

function getRowDetails(event) { 
 
    row = this; 
 
    var table = row.parentNode.parentNode; 
 
    var header = table.rows[0]; 
 
    
 
    // Get property names from header cells 
 
    var props = [].reduce.call(header.cells, function(acc, cell) { 
 
    if (!cell.hasAttribute('hidden')) { 
 
     acc.push(cell.textContent); 
 
    } 
 
    return acc; 
 
    }, []); 
 
    
 
    // Get value for each prop from data cell clicked on 
 
    var result = props.reduce(function(acc, prop, i) { 
 
    acc[prop] = row.cells[i].textContent; 
 
    return acc; 
 
    }, {}); 
 
    
 
    // Do something with result 
 
    console.log(result); 
 
    return result; 
 
} 
 

 
// Add listener to body rows, could also put single listener on table 
 
// and use event.target to find row 
 
window.onload = function() { 
 
    [].forEach.call(document.getElementsByTagName('tr'), function(row, i) { 
 
    if (i) row.addEventListener('click', getRowDetails, false); 
 
    }); 
 
}

<table align="center" id="tableID" border="1"> 
 
<thead> 
 
    <tr><th hidden="hidden"></th><th>name</th><th>age</th></tr> 
 
</thead> 
 
<tbody style="cursor: pointer;"> 
 
    <tr><td >Clark</td><td>29</td></tr> 
 
    <tr><td >Bruce</td><td>30</td></tr> 
 
</tbody> 
 
</table>