帶有jquery表的JavaScript Click功能

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

我需要在每一行中添加點擊功能，當用戶點擊該行時，我需要返回

我的價值for循環

我在任何地方搜索此問題，但沒有找到合適的解決方案。 謝謝您浪費我的時間。

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

您可以向每個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) })