我在一个附加了onclick()
函数的html表的<td>
中有一个delete按钮。如何从这个函数调用ajax,也就是说,我想要获取<tr>
中的值并将其发送到一个URL。
<script>
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
id = row.cells[0].textContent;
//call ajax, pass id as data
}
</script>
<body>
<table>
<tr>
<th>Id</th>
<th>Lastname</th>
<th>Firstname</th>
<th></th>
</tr>
<tr>
<td>122</td>
<td>Jackson</td>
<td>Evans</td>
<td><button type="button" onclick="deleteRow(this)">Delete row</button></td>
</tr>
</table>
</body>
发布于 2018-06-01 22:29:49
你可以在这里用到一些东西。遵循JavaScript部分的评论:
// Run at document load.
$(function () {
// Get the button. Make it unobtrusive as there could be more.
// Execute this on click event.
$(".del-btn").click(function () {
// Fire an AJAX call.
$.post("/path/to/delete", {id: $(this).closest("tr").find("td:first").text()}, function () {
$(this).closest("tr").fadeOut();
});
});
});
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<table>
<tr>
<th>Id</th>
<th>Lastname</th>
<th>Firstname</th>
<th></th>
</tr>
<tr>
<td>122</td>
<td>Jackson</td>
<td>Evans</td>
<td><button type="button" class="del-btn">Delete row</button></td>
</tr>
</table>
正如Sid所提到的,我还要求您使用data-*
属性,而不要完全依赖于DOM来实现数据目的。这将需要您更改:
// Run at document load.
$(function () {
// Get the button. Make it unobtrusive as there could be more.
// Execute this on click event.
$(".del-btn").click(function () {
// Fire an AJAX call.
$.post("/path/to/delete", {id: $(this).closest("tr").data("id")}, function () {
$(this).closest("tr").fadeOut();
});
});
});
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<table>
<tr>
<th>Id</th>
<th>Lastname</th>
<th>Firstname</th>
<th></th>
</tr>
<tr data-id="122">
<td>122</td>
<td>Jackson</td>
<td>Evans</td>
<td><button type="button" class="del-btn">Delete row</button></td>
</tr>
</table>
发布于 2018-06-01 22:30:19
我不想给出直接的答案。使用jquery的示例代码是:
$("selector").click(function(){
$.post("/your/path", function(data, status){
alert("Data: " + data + "\nStatus: " + status);
});
});
https://stackoverflow.com/questions/50645650
复制相似问题