Javascript 如何获取在jQuery中单击了相应按钮的表中的行的记录

我正在从事Laravel项目，我在数据库中存储了一些国家信息，使用AJAX请求我从数据库中检索记录，并将其附加到HTML表格中，表格的行（单元格）是可编辑的，所以我的主要目标是在数据库中编辑和更新它们，我面临的问题是，我在更新按钮上添加了onClick事件，但在循环进行时会自动调用它，但当我手动单击按钮时，它不起作用，我需要单击其按钮的相关行记录，以便我可以更新它

演示屏幕截图 HTML代码

<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>

$(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);
}

身份证件
国名
区域
紧迫的社会挑战
种族冲突
内乱
社会动荡
健康风险
SI分数
更新

JS代码

<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>

$(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);
}

$（文档）.ready（函数（）{
加载_数据（）；
});
函数加载_数据（）
{
getRecords='getRecords'；
$.ajaxSetup({
标题：
{
'X-CSRF-TOKEN'：$（'meta[name=“\u-TOKEN”]”）。attr（'content'）
}
});
$.ajax({
url:“getMapData”，
方法：“张贴”，
数据：'getRecords='+getRecords，
成功：功能（数据）
{
//$（'#mapDataRecord'）.html（数据）；
var jsonData=JSON.parse（数据）；
var dataAppend=''；
for（让index=0；index5）
{
返回5；
}
其他的
{
返回值.toFixed（1）；
}
}
函数更新记录（数据）{
控制台日志（数据）；
}

您应该尝试发出警报，查看数据是否正常

您的按钮id始终为“updateData”，可能有问题，比如您单击它，然后javascript尝试查找具有此id的对象，但由于它们很多，它可能只回答“undefined”

编辑：您在“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>";
            }

for（让index=0；index

---

应该行得通

我正试图通过对代码做一些更改来解决这个问题：

    $(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"))));
});

$（文档）.ready（函数（）{
加载_数据（）；
});
var jsonData={}；
函数加载_数据（）
{
getRecords='getRecords'；
$.ajaxSetup({
标题：
{
'X-CSRF-TOKEN'：$（'meta[name=“\u-TOKEN”]”）。attr（'content'）
}
});
$.ajax({
url:“getMapData”，
方法：“张贴”，
数据：'getRecords='+getRecords，
成功：功能（数据）
{
//$（'#mapDataRecord'）.html（数据）；
jsonData=JSON.parse（数据）；
var dataAppend=''；
for（让index=0；index5）
{
返回5；
}
其他的
{
返回值.toFixed（1）；
}
}
函数更新记录（索引）{
console.log（jsonData[编号（索引）]）；
}
$（文档）。在（'单击'，“#更新数据”，函数（）{
log（jsonData（Number（$（this.attr）（“数据索引”）））；
});

在函数外部指定了jsonData变量

替换了

$（'#mapDataRecord'）.html（dataAppend）$（'#mapDataRecord'）.append（$（dataAppend））

更改了

updateRecord

功能

编辑： 从for循环内部删除了click事件，并添加了