Функция Javascript Click с таблицей jquery

Question

Я новый JavaScript.У меня есть таблица в моей таблице в формате HTML.И я изменяю информацию внутри таблицы, используя функцию ajax.Это моя HTML таблица.

<table class="table table-striped" id="itemData">
</table>

Это скрипт, который я использовал для jquery.

$( ".target" ).change(function() {
  console.log(this.value);  
    $.ajax({
        url : "<?php echo base_url(); ?>admin/loadCategory",
        type : "POST",
        dataType : "json",
        data : {"catID" : this.value},
        success : function(data) {
                        console.log(data);
                        $("#itemData").html("");
                        for (var i = 0; i < data.length; i++) {
                                var tr = "<tr>";
                                var td0 = "<td>" + (i + 1) + "</td>";
                                var td1 = "<td>" + data[i].item_name + "</td>";
                                var td2 = "<td>" + data[i].price + "</td>";
                                var td3 = "<td>" + data[i].item_id + "</td>";
                                $("#itemData").append(tr + td0 + td1 + td2 + td3 );

                        }

        },
        error : function(err) {
            console.log(err);
        }
    });
});

Мне нужно добавить функцию щелчка для каждой строки, и когда пользователь щелкает эту строку, мне нужно вернуть

i значение цикла for

Я ищу эту проблему везде, но не нашел подходящего решения.Спасибо за потраченное время на мою проблему.

Answer 1

Вы можете добавить данные к каждому элементу td или tr и затем каждый раз нажимать эти данные.например

$( ".target" ).change(function() {
  console.log(this.value);  
    $.ajax({
        url : "<?php echo base_url(); ?>admin/loadCategory",
        type : "POST",
        dataType : "json",
        data : {"catID" : this.value},
        success : function(data) {
                        console.log(data);
                        $("#itemData").html("");
                        for (var i = 0; i < data.length; i++) {
                                var tr = `<tr data-item="${data[i]}">`;
                                var td0 = `<td data-item="${data[i]}">` + (i + 1) + "</td>";
                                var td1 = `<td data-item="${data[i]}">` + data[i].item_name + "</td>";
                                var td2 = `<td data-item="${data[i]}">` + data[i].price + "</td>";
                                var td3 = `<td data-item="${data[i]}">` + data[i].item_id + "</td>";
                                $("#itemData").append(tr + td0 + td1 + td2 + td3 );

                        }

        },
        error : function(err) {
            console.log(err);
        }
    });
});

// manage the click
$("#itemData td").on('click', function(){
  const data = $(this).data('item');
  alert(data)
})

Answer 2

  // You can add onclick event on you row like this way

   $( ".target" ).change(function() {
          console.log(this.value);  
            $.ajax({
                url : "<?php echo base_url(); ?>admin/loadCategory",
                type : "POST",
                dataType : "json",
                data : {"catID" : this.value},
                success : function(data) {
                                console.log(data);
                                $("#itemData").html("");
                                for (var i = 0; i < data.length; i++) {
                                        var tr = "<tr onclick='myFunction("+ i +")'>";
                                        var td0 = "<td>" + (i + 1) + "</td>";
                                        var td1 = "<td>" + data[i].item_name + "</td>";
                                        var td2 = "<td>" + data[i].price + "</td>";
                                        var td3 = "<td>" + data[i].item_id + "</td>";
                                        $("#itemData").append(tr + td0 + td1 + td2 + td3 );

                                }

                },
                error : function(err) {
                    console.log(err);
                }
            });
        });

    function myFunction(i) {
        alert("value of i" + i);
    }