javascript - 从过滤表中选择元素

Question

我有以下代码来创建一个员工表，它允许我根据查询词过滤它们：

我想添加将与表中的员工一起包含的 html 按钮，以便我可以添加一个

<button onclick="myFunction()">Click me</button>

这将允许我创建员工并将其添加到选定员工的新列表中我想要添加的元素的图像我不确定这是否可行，所以我在这里寻求一些帮助。或者，如果无法将此 HTML 元素添加到表中，我将如何修改代码，所以如果我单击过滤表的一行，它将允许我选择该行，然后将其添加到新列表选定的员工。

非常感谢！

<style>
    th{ 
        cursor: pointer;
        color:#fff;
            }
</style>

<div class="row">
    <div class ="col">
        <div class="card card-body">

            <input id="search-input" class="form-control" type="text">

        </div>

    </div>

</div>


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

    </tbody>
</table>




<script>
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'},
]

$('#search-input').on('keyup', function(){
    var value= $(this).val()
    console.log('value:', value)
    var data = searchTable(value, myArray)
    buildTable(data)

})


buildTable(myArray)

function searchTable(value, data){

    var filteredData = []

    for (var i = 0; i < data.length; i++){
        value = value.toLowerCase()
        var name = data[i].name.toLowerCase()
        var age = data[i].age.toLowerCase()
        var birthdate = data[i].age.toLowerCase()

        if(name.includes(value)){
            filteredData.push(data[i])

        }
        else if(age.includes(value)){
            filteredData.push(data[i])

        } 
        else if(birthdate.includes(value)){
            filteredData.push(data[i])

        }
    }
    return filteredData

}



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



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

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





function buildTable(data){
    var table = document.getElementById('myTable')
    table.innerHTML = ''
    for (var i = 0; i < data.length; i++){
        var colname = `name-${i}`
        var colage = `age-${i}`
        var colbirth = `birth-${i}`

        var row = `<tr>
                        <td>${data[i].name}</td>
                        <td>${data[i].age}</td>
                        <td>${data[i].birthdate}</td>
                   </tr>`
        table.innerHTML += row
    }
}

</script>

标签： javascripthtmljqueryselectbutton