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

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

带有jquery表的JavaScript Click函数

2 个答案: