как получить запись строки в таблице, соответствующая кнопка которой нажата в jQuery

ProgramBox

как получить запись строки в таблице, соответствующая кнопка которой нажата в jQuery

Post author:admin
Запись опубликована:14 апреля, 2023
Post category:Вопросы по программированию

#javascript #html #jquery #for-loop #dom

#javascript #HTML #jquery #for-цикл #dom

Вопрос:

Я работаю над проектом 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);
}

Ответ №1:

Вы должны попытаться поставить оповещение, чтобы увидеть, в порядке ли данные.

ваш идентификатор кнопки всегда ‘updateData’ возможно, с этим проблема, например, вы нажимаете на нее, а затем javascript пытается найти объект с этим идентификатором, но поскольку их много, он может просто ответить ‘undefined’.

РЕДАКТИРОВАТЬ: вы вызываете updateRecord в вашем ‘for’ вместо того, чтобы помещать функцию внутри 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>";
            }

Должно сработать

1. Я использую консоль для просмотра журналов, проблема в том, что в цикле for автоматически вызывается функция updateRecord, я не хочу этого, я хочу вызывать функцию только при нажатии кнопки обновления

2. ХААА, тогда лучше просто сохранить название вашей функции в кавычках. onclick=’ updateRecord(» jsonData[index]) «‘>Обновить</button></td></tr>»;

Ответ №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"))));
});

Назначена переменная jsonData вне функции if.
Заменено $('#mapDataRecord').html(dataAppend); на $('#mapDataRecord').append($(dataAppend));
изменена updateRecord функция.

РЕДАКТИРОВАТЬ: Удалено событие click из цикла for и добавлено обычное событие click. Вы можете применить ту же логику к вашему первоначально опубликованному коду.

1. проблема в цикле, я думаю, что функция updateRecord вызывается автоматически, пока цикл отображает ее в html, она не должна вызываться автоматически, вы можете записать свои собственные данные в цикл и добавить с помощью html и протестировать их

2. Пожалуйста, проверьте, что я отредактировал свой код и удалил событие click из цикла for и добавил обычное событие вне цикла.

Ответ №3:

Функция updateRecord запускается автоматически, потому что вы фактически вызываете функцию с помощью этой строки "updateRecord(jsonData[index])" . Чтобы решить проблему, вы можете добавить «индекс» в качестве атрибута данных к кнопке

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

затем присоедините прослушиватель к элементу body после цикла for и проверьте, что элемент является button и имеет атрибут, называемый index. Если это так, то вы можете вызвать функцию обновления.

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

1. Если index равно 0, то это не будет вызываться updateRecord , поскольку 0 является ложным… Возможно, вы захотите использовать if (index != null) { или if (!isNaN(index)) { . Вам также нужно будет изменить свой вызов на getAttribute("data-index") .