次のようなテーブルがあります。行セルをクリックしてこの行を選択し、純粋なJavaScriptを使用してJavaScriptオブジェクトとして変換する必要があります。純粋なJavaScriptは、クリック時にオブジェクトとしてテーブル行を選択します
<table id="auditors">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
ここで興味深いのは、キー/列をハードコーディングしないことで一般的にすることです。
[].slice.call(document.querySelectorAll("#auditors tr"), 1).forEach(function(row){
row.addEventListener("click", function(){
var ths = document.querySelectorAll("#auditors th");
var obj = [].reduce.call(ths, function(obj, th, i){
obj[th.textContent] = row.cells[i].textContent;
return obj;
}, {});
console.log(obj);
});
});<table id="auditors">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>私はこのコードが最初の行の値をどのように動的に取得するのだろうかと疑問に思っていますか？ –
@PraveenKumarそれはちょうど最初の行にTHがあるということです。 –
私はこれを見ることができました： 'obj [th.textContent] = row.cells [i] .textContent;'各インデックスが正しく設定されているかどうかはわかりません。 –
あなたはaddEventListenerを使用して行うことができます。
var trs = document.querySelectorAll("tr");
for (var i = 0; i < trs.length; i++)
(function (e) {
trs[e].addEventListener("click", function() {
console.log(this);
}, false);
})(i);<table id="auditors">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>、thisはHTMLElementオブジェクトになります。ログに記録されたアイテムは<tr>です。
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
あなたはそれがあなたのフォーマットが含まれているオブジェクトのようにそれを作りたい場合は、あなたがする必要があります。
var trs = document.querySelectorAll("tr");
for (var i = 0; i < trs.length; i++)
(function (e) {
trs[e].addEventListener("click", function() {
console.log({
"FirstName": this.querySelectorAll("*")[0].innerHTML.trim(),
"LastName": this.querySelectorAll("*")[1].innerHTML.trim(),
"Age": this.querySelectorAll("*")[2].innerHTML.trim()
});
}, false);
})(i);<table id="auditors">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>あなたが行をクリックすると、あなたが得ますオブジェクトは次のようになります。
{
"FirstName": "Jill",
"LastName": "Smith",
"Age": "50"
}
ここで私は<th>をオブジェクトキーとして使用します。
それは、任意のセルまたは行は、オブジェクトへの変更をクリックしたときである任意の特定の細胞であることができる：これは、オブジェクトを構築するときにキーとして
th要素テキストを使用して行うことができますか？ –あなたが今までに持っているコードを投稿して問題があるので、それを見て、それがなぜ機能していないのか理解することができます。 – Nope
もっと具体的にする必要があります。 '行セルをクリックしてこの行を選択し、JavaScriptオブジェクトとして変換する'オブジェクトのタイプは？ 'th'の値は、あなたがクリックした' tr'の値を持つオブジェクトのプロパティ名であると期待していますか？目に見える初期の努力をしていない、多くのグレー領域命令があります。 – Nope