如何使动态HTML表数据(使用jQuery创建)可点击

Question

我是这些方面的新手，并尝试过使用jQuery动态创建HTML表。代码如下。它运行良好。

如何使表数据(value.id(可点击，以便重定向到其他页面？

$(document).ready(function() {
var tableData = '';
$.each(xyz, function(key, value) {
tableData += '<tr>';
tableData += '<td>' + value.id + '</td>';
tableData += '<td>' + value.name + '</td>';
tableData += '</tr>';
});
$('#table').append(tableData);
//}); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead></thead>
<tbody id="table"></tbody>
</table>

Answer 1

像这个

const xyz = [{
id: 1,
name: "one"
},
{
id: 2,
name: "two"
}
]
$(function() {
const tableData = xyz.map(item => (`<tr><td class="id">${item.id}</td>
<td>${item.name}</td></tr>`));
$('#table').append(tableData.join(""));
$('#table').on("click", ".id", function() {
const id = this.textContent
console.log(id);
// location = "https://google.com/search?q="+id;
})
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<thead></thead>
<tbody id="table"></tbody>
</table>

Answer 2

您可以用一个"a"；标签

`tableData += '<tr>'; 
tableData += '<td><a href="/you-url/' +value.id+ '">' + 
value.id + '<'/a></td>'; 
tableData += '<td>' +  
value.name + '</td>';
tableData += '</tr>';`

Answer 3

我更喜欢给可点击元素一个类来引用：

我还有一些CSS，可以将光标设置为指针。

$(document).ready(function () { 

var tableData = ''; 
$.each(xyz, function (key, value) { 
tableData += '<tr>'; 
tableData += '<td class="link">' +  
value.id + '</td>'; 
tableData += '<td>' +  
value.name + '</td>';
tableData += '</tr>'; 
}); 

$('#table').append(tableData); 
//}); 
}); 
$(document).on("click","#table .link",function(){
console.log($(this).html());
});
.link{cursor:pointer;}