Question

我有一个对象数组。我必须对每一行应用一个函数并记录相应的名称和id。

这是我的代码：

var json = [
    {
        id: 1,
        name: "Jon",
        age:  20

    },
    {
        id: 2,
        name: "Jessy",
        age:  25

    },
    {
        id: 3,
        name: "Sarah",
        age:  30

    },
]

console.log(json)
var tr;
for (var i = 0; i < json.length; i++) {
    tr = $('<tr/>');
    tr.append("<td>" + json[i].id + "</td>");
    tr.append("<td>" + json[i].name + "</td>");
    tr.append("<td>" + "<button class='btn btn-info'>Log</button>" + "</td>");
    $('table').append(tr);

}

使用jQuery如何应用该函数并记录id和名称？点击一个按钮，我需要记录ID和名称。每个按钮都会记录其单元格的名称和ID

因此，如果点击第一行中的按钮，则应记录id: 1 , name: jon

Answer 1

您可以这样做：

＆＃13;

<?php
if(!empty($_POST['ss'])) {
    $connect=mysqli_connect("localhost","root", "" ,"mydatabase");
    if(!empty($_POST['Sr_no'])) {
        $Sr_no = $_POST["Sr_no"];

        $status_check = 'select verified FROM r_concession_forms WHERE id = '.$Sr_no.' LIMIT 1';
        $s_check = $connect->query($status_check);
        $s_value = $row = $s_check->fetch_assoc();

        if($s_value["verified"] == "0")
        {
            echo "<script>
                alert('Not Issued/Verified');
                window.location.href='index.php';
            </script>" ;
        }
        elseif($s_value["verified"] == "1"){
            echo "<script>
                alert('Issued and Verified');
                window.location.href='index.php';
                </script>";
        }
        else{
            echo "<script>
                alert('No Such Form Exists');
                window.location.href='index.php';
            </script>";
        }
    }
}
?>

＆＃13;

var json = [{id:1,name:"Jon",age:20}, {id:2,name:"Jessy",age:25}, {id:3,name:"Sarah",age:30}];

//console.log(json)
var tr;
for (var i = 0; i < json.length; i++) {
  tr = $('<tr/>');
  tr.append("<td>" + json[i].id + "</td>");
  tr.append("<td>" + json[i].name + "</td>");
  tr.append("<td>" + "<button class='btn btn-info'>Log</button>" + "</td>");
  $('table').append(tr);
}

// Attach a delegated event handler
$('table').on('click', '.btn-info', function(event) {
  console.log('ID: ' + $(this).closest('tr').find('td:eq(0)').text());
  console.log('Name: ' + $(this).closest('tr').find('td:eq(1)').text());
});

＆＃13;

Answer 2

您可以使用forEach方法循环播放数组，然后使用td和button创建每一行，并将click事件添加到按钮。

const json = [{"id":1,"name":"Jon","age":20},{"id":2,"name":"Jessy","age":25},{"id":3,"name":"Sarah","age":30}]
const tbody = $("table tbody");

json.forEach(function(obj) {
  let { id, name} = obj;
  
  let btn = $('<button>', {"class": 'btn btn-info'})
    .text('Log')
    .click(function() {
      console.log('ID: ' + id, 'Name: ' + name)
    })

  let tr = $("<tr>")
    .append($('<td>').text(id))
    .append($('<td>').text(name))
    .append($('<td>').html(btn))

  tbody.append(tr)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody></tbody>
</table>

jQuery在表的每一行上应用一个函数

2 个答案: