【发布时间】：2019-04-21 20:42:49
【问题描述】：
我的 Web 应用程序从 JSON 对象获取值，并使用其值以及每行上的编辑和删除按钮填充表。我希望我的脚本能够知道按下了哪些行编辑按钮，以及该行的单元格值。
在格式化我的问题时，我偶然发现了这个完全相同的问题（我搜索了一个小时才决定提问），但它没有包含任何对我有用的解决方案：Get Value of HTML cells in row clicked with Javascript
HTML：
<div class="container">
<h4>Persons</h4>
<div class="table-responsive">
<table class="table table-striped" id="persons_table">
<thead class="thead-dark">
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Phone</th>
<th scope="col">Edit</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
//dynamically generated rows goes here
</tbody>
</table>
</div>
<button class="btn btn-sm btn-primary" id="addBtn">New person</button>
</div>
填充表格的函数：
function handlePersons(data){ //data is a response from an API (JSON)
var table = document.getElementById('persons_table');
data.forEach(function(object) {
var tr = document.createElement('tr');
tr.innerHTML =
'<td>' + object.ID + '</td>' +
'<td>' + object.Info.Name + '</td>' +
'<td>' + object.Info.Email + '</td>' +
'<td>' + object.Info.PhoneNumber + '</td>' +
'<td><p data-placement="top" data-toggle="tooltip" title="Edit">
<button class="btn btn-primary btn-xs" id="editBtn" data-title="Edit" data-toggle="modal" data-target="#edit">
<span class="fa fa-pencil"></span></button></p></td>' +
'<td><p data-placement="top" data-toggle="tooltip" title="Delete">
<button class="btn btn-danger btn-xs" data-title="Delete" data-toggle="modal" data-target="#delete">
<span class="fa fa-trash"></span></button></p></td>';
table.appendChild(tr);
});
}
以防万一，这是我获取 JSON 数据的 ajax 调用：
function getPersons(){
var settings = {
"async" : true,
"crossDomain" : true,
"url" : "...",
"method" : "GET",
"headers" : {
"Content-Type" : "application/json",
"Authorization": "...",
"cache-control" : "no-cache"
},
"processData" : false,
"data" : ""
}
return $.ajax(settings);
}
函数调用：
getPersons().done(handlePersons)
我的问题是，当我按下第一行上的编辑按钮时，我怎样才能让我的脚本知道它是按下的特定行上的编辑按钮，以及我怎样才能例如 console.log 该行名称（约翰）？ 这是我尝试过的：
$('#editBtn').on('click', () => {
var par = $(this).parent().parent(); //to choose table row, also tried one
//and three .parent() because I don't
//quite understand this
var namevalue = par.children("td:nth-child(2)").val(); //also tried with .text()
console.log(namevalue); //.val = undefined and .text = empty string
});
$('#editBtn').on('click', () => { //also tried with onclick="function"
//on the button instead of
//jQuery just in case
var tr = $(this).closest('tr')
var tdID = $(tr).find('td').eq(0).text();
var tdName = $(tr).find('td').eq(1).text();
var tdEmail = $(tr).find('td').eq(2).text();
var tdPhone = $(tr).find('td').eq(3).text();
console.log(tdName); //.text logs empty string, .val logs undefined again
});
@Cybernetic 请求后的 JSON 数据。对此进行了一些编辑，以不泄露任何敏感信息，但仍应在我的代码中产生相同的结果。
[
{
"CustomValues": {},
"Comment": "Here is John",
"Deleted": false,
"ID": 1,
"InfoID": 4,
"Role": null,
"StatusCode": null,
"UpdatedAt": null,
"UpdatedBy": null,
"Info": {
"DefaultEmailID": 1,
"DefaultPhoneID": 2,
"Deleted": false,
"ID": 3,
"Name": "John",
"PhoneNumber": "123-123-123",
"Email": "john@mail.com"
}
},
{
"CustomValues": {},
"Comment": "Here is Mike",
"Deleted": false,
"ID": 2,
"InfoID": 6,
"Role": null,
"StatusCode": null,
"UpdatedAt": null,
"UpdatedBy": null,
"Info": {
"DefaultEmailID": 3,
"DefaultPhoneID": 4,
"Deleted": false,
"ID": 6,
"Name": "Mike",
"PhoneNumber": "321-321-321",
"Email": "mike@mail.com"
}
}
]
【问题讨论】：
-
您能否提供一个示例 JSON 数据的 sn-p，以便我们重新创建表并制定解决方案？
-
@Cybernetic 当然，请参阅原帖底部的编辑。
标签： javascript jquery html