时间戳

首页 > 解决方案 > 如何为每条记录包含一个可点击的链接或按钮？HTML + 数组 + 表格

javascript - 如何为每条记录包含一个可点击的链接或按钮？HTML + 数组 + 表格

问题描述

我从 youtube 学习了一个示例代码，用于将数组动态放入可排序的 HTML 表中。下面是代码。

如何使显示 HTML 表中的每条记录可点击并调用 myFunction()？然后 myFunction() 将获取相应行中 Name 的值并执行另一个查询。

HTML 部分 ->

<table class="table table-striped">
<tr  class="bg-info">
    <th data-column="name" data-order="desc">Name &#9650</th>
    <th data-column="age" data-order="desc">Age &#9650</th>
    <th data-column="birthdate" data-order="desc">Birthday &#9650</th>
</tr>

<tbody id="myTable">
    
</tbody>

javascript部分

var myArray = [
    {'name':'Michael', 'age':'30', 'birthdate':'11/10/1989'},
    {'name':'Mila', 'age':'32', 'birthdate':'10/1/1989'},
    {'name':'Paul', 'age':'29', 'birthdate':'10/14/1990'},
    {'name':'Dennis', 'age':'25', 'birthdate':'11/29/1993'},
    {'name':'Tim', 'age':'27', 'birthdate':'3/12/1991'},
    {'name':'Erik', 'age':'24', 'birthdate':'10/31/1995'},
]

$('th').on('click', function(){
    var column = $(this).data('column')
    var order = $(this).data('order')
    var text = $(this).html()
    text = text.substring(0, text.length - 1)

    if(order == 'desc'){
        $(this).data('order', "asc")
        myArray = myArray.sort((a,b) => a[column] > b[column] ? 1 : -1)
        text += '&#9660'

    }else{
        $(this).data('order', "desc")
        myArray = myArray.sort((a,b) => a[column] < b[column] ? 1 : -1)
        text += '&#9650'

    }
    $(this).html(text)
    buildTable(myArray)
})

buildTable(myArray)

function buildTable(data){
    var table = document.getElementById('myTable')
    table.innerHTML = ''
    for (var i = 0; i < data.length; i++){
        var row = `<tr>
                        <td>${data[i].name}</td>
                        <td>${data[i].age}</td>
                        <td>${data[i].birthdate}</td>
                  </tr>`
        table.innerHTML += row


    }
}

我的函数调用 Js 部分

function myFunction() { " wanna get the value of the row if link is click" }

标签： javascripthtmlarrays

解决方案

您需要在调用之后buildTable(myArray)添加以下内容，以便<tr>标签可以在您为其分配点击事件之前呈现。

   $('tr').click(function(){
       var name = $(this).children('td').first().html();
       yourFunction(name);
    });
    
    function yourFunction(name){
       //do things with name here 
    }

此外，这假定第一个td将始终包含名称。更好的实现是重构buildTable函数并给你的类td

推荐阅读