如何解决如何获取在jQuery中单击其相应按钮的表中行的记录
我正在Laravel项目上,我在数据库中存储了一些国家信息,使用AJAX请求,我正在从数据库中检索记录,并将其附加到我的HTML表格中,表格的行(单元格)是可编辑的,所以,我的主要目标是编辑它们并在数据库中更新它们,我面临的问题是,我在更新按钮上添加了onClick事件,但是当循环正在进行时会自动调用,但是当我单击按钮时手动上不起作用,我想要单击该行的相关行记录,以使其可以更新。
<table class="table table-bordered table-responsive-md table-striped text-center" id="tblData">
<thead>
<tr>
<th class="text-center">ID</th>
<th class="text-center">Country Name</th>
<th class="text-center">Region</th>
<th class="text-center">Pressing Social Challenge</th>
<th class="text-center">Ethnic Conflict</th>
<th class="text-center">Civil Strife</th>
<th class="text-center">Social Upheaval</th>
<th class="text-center">Health Risk</th>
<th class="text-center">SI SCORE</th>
<th class="text-center">Update</th>
</tr>
</thead>
<tbody id="mapDataRecord">
</tbody>
</table>
JS代码
$(document).ready(function() {
load_data();
});
function load_data()
{
getRecords='getRecords';
$.ajaxSetup({
headers:
{
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
$.ajax({
url:"getMapData",method:"POST",data:'getRecords='+getRecords,success:function(data)
{
// $('#mapDataRecord').html(data);
var jsonData = JSON.parse(data);
var dataAppend='';
for (let index = 0; index < jsonData.length; index++)
{
dataAppend+="<tr><td class='text-center font-weight-bold ids'>"+
jsonData[index]['id']+"</td><td class='text-center font-weight-bold tester'>"+
jsonData[index]['countryName']+"</td><td class='text-center font-weight-bold'>"+
jsonData[index]['region']+"</td><td class='text-center' contenteditable>"+
jsonData[index]['pressing_social_challenge']+"</td><td class='text-center' contenteditable>"+
jsonData[index]['ethnic_conflict']+"</td><td class='text-center' contenteditable>"+
jsonData[index]['civil_strife']+"</td><td class='text-center' contenteditable>"+
jsonData[index]['social_upheaval']+"</td><td class='text-center' contenteditable>"+
jsonData[index]['health_risk']+"</td><td class='text-center font-weight-bold'>"+
getSiScore(jsonData[index])+"</td><td class='text-center'><button class='btn btn-primary' id='updateData' onclick='"+
updateRecord(jsonData[index])+"'>Update</button></td></tr>";
}
$('#mapDataRecord').html(dataAppend);
// console.log(jsonData[0]);
}
});
}
function getSiScore(array)
{
var value = (array['pressing_social_challenge']*(10/100))+(array['ethnic_conflict']*(30/100))+(array['civil_strife']*(20/100))+(array['social_upheaval']*(20/100))+(array['health_risk']*(20/100));
// return value;
if(value>5)
{
return 5;
}
else
{
return value.toFixed(1);
}
}
function updateRecord(data){
console.log(data);
}
解决方法
您应该尝试发出警报,以查看数据是否正常。
您的按钮ID始终为“ updateData”,也许有问题,就像您单击它一样,然后javascript尝试查找具有此ID的对象,但由于它们很多,它只能回答“未定义”。>
编辑:您在“ for”中调用updateRecord,而不是将函数放在onClick内,只需注意引号,就可以了
for (let index = 0; index < jsonData.length; index++)
{
dataAppend+="<tr><td class='text-center font-weight-bold ids'>"+
jsonData[index]['id']+"</td><td class='text-center font-weight-bold tester'>"+
jsonData[index]['countryName']+"</td><td class='text-center font-weight-bold'>"+
jsonData[index]['region']+"</td><td class='text-center' contenteditable>"+
jsonData[index]['pressing_social_challenge']+"</td><td class='text-center' contenteditable>"+
jsonData[index]['ethnic_conflict']+"</td><td class='text-center' contenteditable>"+
jsonData[index]['civil_strife']+"</td><td class='text-center' contenteditable>"+
jsonData[index]['social_upheaval']+"</td><td class='text-center' contenteditable>"+
jsonData[index]['health_risk']+"</td><td class='text-center font-weight-bold'>"+
getSiScore(jsonData[index])+"</td><td class='text-center'><button class='btn btn-primary' id='updateData' onclick='updateRecord("+jsonData[index])+"'>Update</button></td></tr>";
}
应该工作
,我正在尝试通过对代码进行一些更改来解决问题:
$(document).ready(function() {
load_data();
});
var jsonData = {};
function load_data()
{
getRecords='getRecords';
$.ajaxSetup({
headers:
{
'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
}
});
$.ajax({
url:"getMapData",method:"POST",data:'getRecords='+getRecords,success:function(data)
{
// $('#mapDataRecord').html(data);
jsonData = JSON.parse(data);
var dataAppend='';
for (let index = 0; index < jsonData.length; index++)
{
dataAppend+="<tr><td class='text-center font-weight-bold ids'>"+
jsonData[index]['id']+"</td><td class='text-center font-weight-bold tester'>"+
jsonData[index]['countryName']+"</td><td class='text-center font-weight-bold'>"+
jsonData[index]['region']+"</td><td class='text-center' contenteditable>"+
jsonData[index]['pressing_social_challenge']+"</td><td class='text-center' contenteditable>"+
jsonData[index]['ethnic_conflict']+"</td><td class='text-center' contenteditable>"+
jsonData[index]['civil_strife']+"</td><td class='text-center' contenteditable>"+
jsonData[index]['social_upheaval']+"</td><td class='text-center' contenteditable>"+
jsonData[index]['health_risk']+"</td><td class='text-center font-weight-bold'>"+
getSiScore(jsonData[index])+"</td><td class='text-center'><button class='btn btn-primary' id='updateData' data-index='"+ index + "'>Update</button></td></tr>";
}
$('#mapDataRecord').append($(dataAppend));
// console.log(jsonData[0]);
}
});
}
function getSiScore(array)
{
var value = (array['pressing_social_challenge']*(10/100))+(array['ethnic_conflict']*(30/100))+(array['civil_strife']*(20/100))+(array['social_upheaval']*(20/100))+(array['health_risk']*(20/100));
// return value;
if(value>5)
{
return 5;
}
else
{
return value.toFixed(1);
}
}
function updateRecord(index){
console.log(jsonData[Number(index)]);
}
$(document).on('click',"#updateData",function () {
console.log(jsonData(Number($(this).attr("data-index"))));
});
- 在函数外部分配了jsonData变量。
- 将
$('#mapDataRecord').html(dataAppend);
替换为$('#mapDataRecord').append($(dataAppend));
- 更改了
updateRecord
功能。
编辑: 从for循环内部删除了click事件,并添加了一个普通的click事件。您可以对最初发布的代码应用相同的逻辑。
, updateRecord函数将自动运行,因为您实际上是通过此行"updateRecord(jsonData[index])"
对函数进行校准的。要解决此问题,您可以将“索引”作为数据属性添加到按钮
"<button data-index=" + index + ">Edit</button>"
然后在for循环之后将侦听器附加到body元素,并检查该元素是否为button并具有称为index的属性。如果是,则可以调用更新功能。
document.body.onclick = function(event) {
var index = event.target.getAttribute("index");
if (index){
updateRecord(jsonData[index]);
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。