Javascript Click function with jquery table

Question

I am new javascript. I have a table in my table in html. And I change the information inside the table using ajax function. This is my html table.

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

This is the script I used for 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 need to add click function to each row and when user clicking that row I need return the

i value of for loop

I search for this problem every where but I didn't get any suitable solution. Thank you for the time you have wasting on my problem.

Answer 1

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

Answer 2

You can add a data to each td or tr element and next get in each click this data. for example

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