我试图在使用Ajax调用的模式中获取行id的值。
我想从模态中获取行id(data-id)。
JavaScript函数“onRowClick”适用于主页面中的表格,但不适用于模态中的表格。
http://plnkr.co/edit/ehkd8L22KZb0xxCnubUb?p=preview
<DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/modalit@0.1.6/dist/MODALit.css">
<script src="https://cdn.jsdelivr.net/npm/modalit@0.1.6/dist/MODALit.min.js"></script>
</head>
<body>
<table id="table1">
<tr data-id="1"><td>Row 1</td></tr>
<tr data-id="2"><td>Row 2</td></tr>
<tr data-id="3"><td>Row 3</td></tr>
</table>
<hr />
<div style="color:green" id="row-value">-</div>
<hr />
<!-- Sets modal target -->
<button type="button" id="button" data-src="modal.html">Modal Open</button>
<script>
var modal = new MODALit({
el: '#button',
});
window.onload = onRowClick("table1", function (row) {
var rowid = row.getAttribute("data-id")
//alert(rowid);
document.getElementById("row-value").innerHTML = rowid;
})
function onRowClick(tableId, callback) {
var table = document.getElementById("table1"),
rows = table.getElementsByTagName("tr"),
i;
for (i = 0; i < rows.length; i++) {
table.rows[i].onclick = function (row) {
return function () {
callback(row);
};
}(table.rows[i]);
}
};
</script>
</body>
</html>
Ajax内容(modal.html):
<table id="table2">
<tr data-id="1"><td>Row 1</td></tr>
<tr data-id="2"><td>Row 2</td></tr>
<tr data-id="3"><td>Row 3</td></tr>
</table>
<script>
window.onload = onRowClick("table2", function (row) {
var rowid = row.getAttribute("data-id")
//alert(rowid);
document.getElementById("row-value").innerHTML = rowid;
})
function onRowClick(tableId, callback) {
var table = document.getElementById("table2"),
rows = table.getElementsByTagName("tr"),
i;
for (i = 0; i < rows.length; i++) {
table.rows[i].onclick = function (row) {
return function () {
callback(row);
};
}(table.rows[i]);
}
};
http://plnkr.co/edit/ehkd8L22KZb0xxCnubUb?p=preview
如何获取模态中行的数据ID?