如何在jQuery中單擊相應按鈕的表中的行記錄

Question

我正在處理 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>

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

Answer 1

您應該嘗試發出警報以查看數據是否正常。

您的按鈕 id 始終是“updateData”，也許它有問題，例如您單擊它，然后 javascript 嘗試使用此 id 找到 object，但由於它們很多，它只能回答“未定義”。

編輯：您在“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>";
            }

應該管用

Answer 2

我試圖通過對代碼進行一些更改來解決問題：

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

1. 如果 function，則在外部分配 jsonData 變量。
2. 替換$('#mapDataRecord').html(dataAppend); 與$('#mapDataRecord').append($(dataAppend));
3. 更改了更新記錄updateRecord 。

編輯：從 for 循環中刪除了點擊事件並添加了一個常見的點擊事件。 您可以對最初發布的代碼應用相同的邏輯。

Answer 3

updateRecord function 會自動運行，因為您實際上是使用這一行"updateRecord(jsonData[index])" 。 要解決此問題，您可以將“索引”作為數據屬性添加到按鈕

"<button data-index=" + index + ">Edit</button>"

然后在 for 循環之后將一個偵聽器附加到 body 元素並檢查該元素是按鈕並具有一個名為 index 的屬性。 如果是，那么您可以調用更新 function。

document.body.onclick = function(event) {
   var index = event.target.getAttribute("index");
   if (index){
     updateRecord(jsonData[index]);
   }