我有以下页面，它从后端获取数据并在数据表上显示该数据
在我的表中，我有一个名为 Oid 的列，它是一个输入字段，具有从后端检索的默认初始值，另一列是一个按钮。如何创建一个函数，每当单击任何行上的按钮时都可以访问该按钮对应行的 Oid 值？请注意，由于 Oid 行是一个输入字段，因此如果我编辑输入字段，我需要能够访问编辑后的值，而不是从后端检索到的默认值。
let page = 1;
var exchange = "all";
var search = "";
var urlPage = "http://127.0.0.1:8000/mw_api/?page=" + page + "&exchange=" + exchange + "&search=" + search;
function loadTable() {
urlPage = "http://127.0.0.1:8000/mw_api/?page=" + page + "&exchange=" + exchange + "&search=" + search;
$(document).ready(function() {
$('#mwdata').DataTable({
"processing": true,
"serverSide": true,
"pageLength": 15,
"ajax": {
"data": function(d) {
var info = $('#mwdata').DataTable().page.info();
page = info.page + 1;
search = d.search.value;
urlPage = "http://127.0.0.1:8000/mw_api/?page=" + page + "&exchange=" + exchange + "&search=" + search;
console.log(urlPage, page, 'SEARCH', search);
$('#mwdata').DataTable().ajax.url(urlPage);
page = info.page + 1;
console.log(page);
}
},
"columns": [{
"data": "MarketName"
},
{
"data": "CoinName"
},
{
"data": "MainMarket"
},
{
"data": "MarketType"
},
{
"data": "Exchange"
},
{
"data": "Bid"
},
{
"data": "Oid",
"render": function(data, type, row) {
return "<input type='text' class='form-control' value='" + data + "'>";
}
},
{
"data": null,
"defaultContent": "<button class='btn btn-primary'>Update</button>"
}
]
});
});
}
function setExchange() {
exchange = document.getElementById("exchanges").value;
// reload the table
$('#mwdata').DataTable().ajax.reload();
}
loadTable();<head>
<script
src="https://code.jquery.com/jquery-3.7.1.min.js"
integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo="
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.5/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.0.2/css/dataTables.dataTables.css">
<script src="https://cdn.datatables.net/1.11.5/js/jquery.dataTables.min.js"></script>
</head>
<div class="container">
<table id="mwdata" class="display" style="width:100%">
<thead>
<tr>
<th>Market Name</th>
<th>Coin Name</th>
<th>Main Market</th>
<th>Market Type</th>
<th>Exchange</th>
<th>Bid Price</th>
<th>OID</th>
<th>Update</th>
</tr>
</thead>
</table>
</div>您可以使用数据表插件的
.cell(row, column)
document.querySelector('table').querySelectorAll(".btn").forEach(function(btn) {
btn.addEventListener('click', function(ev) {
var row = this.closest('tr');
var tds = row.querySelectorAll(":scope>td")
var td = tds[0] // 0 is first column
var input = td.querySelector("input")
var value = input.value
alert(value)
})
})table {
border-collapse: collapse;
text-align: left;
}<table border="1">
<thead>
<tr>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" value="Joe Biden"></td>
<td><button class="btn">Get Value</button></td>
</tr>
<tr>
<td><input type="text" value="Jane Doe"></td>
<td><button class="btn">Get Value</button></td>
</tr>
</tbody>
</table>