如何使用js在html中动态更改表格内容

Question

我在这里找到了一个代码来动态更改表格内容

脚本在 jQuery

jQuery动态更改表格内容的原始代码

$(document).ready(function(e) {

    var data1 = [

        { field1: 'value a1', field2: 'value a2', field3: 'value a3', field4: 'value a4' },

        { field1: 'value b1', field2: 'value b2', field3: 'value b3', field4: 'value b4' },

        { field1: 'value c1', field2: 'value c2', field3: 'value c3', field4: 'value c4' }

        ];

    var data2 = [

        { field1: 'new value a1', field2: 'new value a2', field3: 'new value a3' },

        { field1: 'new value b1', field2: 'new value b2', field3: 'new value b3' },

        { field1: 'new value b1', field2: 'new value b2', field3: 'new value b3' },

        { field1: 'new value c1', field2: 'new value c2', field3: 'new value c3' }

        ];

    function loadTable(tableId, fields, data) {

        //$('#' + tableId).empty(); //not really necessary

        var rows = '';

        $.each(data, function(index, item) {

            var row = '<tr>';

            $.each(fields, function(index, field) {

                row += '<td>' + item[field+''] + '</td>';

            });

            rows += row + '<tr>';

        });

        $('#' + tableId + ' tbody').html(rows);

    }

    loadTable('data-table', ['field2', 'field1', 'field3'], data1);

    $('#btn-update').click(function(e) {

        loadTable('data-table', ['field2', 'field1', 'field3'], data2);

    });

});

我有类似的代码，但数据内容是

比如'rollno'、'name'、'state'、'city'、'class'、'age'

[

 { 'rollno': 'value a1', 'name': 'value a2', 'state': 'value a3', 'city': 'value a4', 'class': 'value a5', 'age': 'value a6' },

 { 'rollno': 'value b1', 'name': 'value b2', 'state': 'value b3', 'city': 'value b4', 'class': 'value b5', 'age': 'value b6' },

 { 'rollno': 'value c1', 'name': 'value c2', 'state': 'value c3', 'city': 'value c4' , 'class': 'value c5', 'age': 'value c6'}

 ];

桌子上什么也没有打印

两个问题

1）我收到的数据与片段中的语法不同

2）我不知道是否$(document).ready(function(selected_student_data) jQuery会js像我上面写的那样在脚本中工作

谁能在这里指导我

PS 这不是在，button click而是在用户为中列的下拉选择的选项上city，class以及state 如何使用 jQuery 为表格制作下拉列表过滤器？

Answer 1

您的代码中有很多错误。JSON.stringify({selected_student_filter_data})除非您的服务器需要一个具有selected_student_filter_data&nbsp;属性的对象，否则不要这样做。那是ES2015 Object Property Shorthand。不要把$(document).readyAJAX 成功响应放在里面，把函数loadTable放在外面，然后从那里调用它，然后从$(document).ready.selected_student_data = JSON.stringify(selected_student)将为 . 放置一个字符串值&nbsp;selected_student_data。你不想那样做。您需要，&nbsp;JSON.parse但如果您设置响应标头，jQuery 会为您执行此操作Content-type: application/json。我建议您首先清除success函数内部的所有内容，然后检查并了解您是否获得了正确的数据以及以何种形式。然后创建loadTable将数据填充到表中的函数。...success: function(data) {&nbsp; console.log(data); // Open console and check the data you get}...

Answer 2

如果您不介意不同的实现，请检查以下解决方案。动态呈现表格内容。function addTable(data, headers) {&nbsp; var myTableDiv = document.getElementById("myTable");&nbsp; myTableDiv.innerHTML = "";&nbsp; var table = document.createElement('TABLE');&nbsp; table.border = '1';&nbsp; var tableHeader = document.createElement('THEAD');&nbsp; table.appendChild(tableHeader);&nbsp; var tableBody = document.createElement('TBODY');&nbsp; table.appendChild(tableBody);&nbsp; var n = data.length;&nbsp; var m = headers.length;&nbsp; var thKeys;&nbsp; if (n > 0) {&nbsp; &nbsp; thKeys = Object.keys(data[0]);&nbsp; }&nbsp; var tr = document.createElement('TR');&nbsp; tableBody.appendChild(tr);&nbsp; for (var j = 0; j < m; j++) {&nbsp; &nbsp; var td = document.createElement('TD');&nbsp; &nbsp; td.width = '75';&nbsp; &nbsp; td.innerText = thKeys[j];&nbsp; &nbsp; tr.appendChild(td);&nbsp; }&nbsp; for (var i = 0; i < n; i++) {&nbsp; &nbsp; tr = document.createElement('TR');&nbsp; &nbsp; tableBody.appendChild(tr);&nbsp; &nbsp; for (var j = 0; j < m; j++) {&nbsp; &nbsp; &nbsp; var td = document.createElement('TD');&nbsp; &nbsp; &nbsp; td.width = '75';&nbsp; &nbsp; &nbsp; td.innerText = data[i][thKeys[j].toLowerCase()];&nbsp; &nbsp; &nbsp; tr.appendChild(td);&nbsp; &nbsp; }&nbsp; }&nbsp; myTableDiv.appendChild(table);}var data = [&nbsp; {&nbsp; &nbsp; "title": "021",&nbsp; &nbsp; "score": 86,&nbsp; &nbsp; "ref": "desc 021",&nbsp; &nbsp; "id": "ABC021"&nbsp; },&nbsp; {&nbsp; &nbsp; "title": "022",&nbsp; &nbsp; "score": 72,&nbsp; &nbsp; "ref": "desc 022",&nbsp; &nbsp; "id": "ABC022"&nbsp; }];addTable(data, ['Title', 'Score']);function updateTable() {&nbsp; addTable(data, ['Title', 'Score', 'Ref', 'Id']);}function reset() {&nbsp; addTable(data, ['Title', 'Score']);}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="myTable"></div><button onclick="updateTable()">update table</button><button onclick="reset()">reset table</button>