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

Question

我找到了一个代码 here动态改变表格内容

脚本在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'}
 ];

代替

[
 { 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' }
 ];

我的代码

function get_student_filters() {
    var selected_city = document.getElementById("student_city_selected").value;
    var selected_state = document.getElementById("student_state_selected").value;
    var selected_class = document.getElementById("student_class_selected").value;

    var selected_student_filter_data = {
        s_city:selected_city,
        s_state:selected_state,
        s_class:selected_class
    };
    $.ajax({
          type: "POST",
          contentType: "application/json;charset=utf-8",
          url: "http://127.0.0.1:5000/filter_student",
          traditional: "true",
          async:false,
          timeout: 40000,
          data: JSON.stringify({selected_student_filter_data}),
          dataType: "json",
          success: function(selected_student){

            var selected_student_data = JSON.stringify(selected_student)

            // Recevied data from the flask of the selected data from the table
            $(document).ready(function(selected_student_data) {

                // Function to fill the table
                    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);
            // call function to populate the table
            loadTable('studetnt_table', ['rollno','name', 'state', 'city','class', 'age'], selected_student_data);
                    }
          }
          });
}

table 上什么都没有打印

两个问题

1) 我收到的数据与代码段中的语法不同

2) 我不知道 $(document).ready(function(selected_student_data) jQuery 是否可以在 js 脚本中运行我在上面写了

有人可以在这里指导我吗

附言 这不是在 button click 上，而是在用户为 city 、class 和 中的列下拉选择的选项上状态 How to make dropdown list filter for a table using jQuery?

Answer 1

你的代码中有很多错误。

• 不要做 JSON.stringify({selected_student_filter_data}) 除非你 服务器需要一个带有 selected_student_filter_data 的对象 属性(property)。那是 ES2015 Object Property Shorthand .
• 不要把 $(document).ready 放在 AJAX success 响应，将函数 loadTable 放在外面并从中调用它 那里一次来自 $(document).ready.
• selected_student_data = JSON.stringify(selected_student) 将为 selected_student_data。你不想那样做。你需要 JSON.parse 但如果您设置响应，jQuery 会为您完成 header Content-type: application/json.

我建议您首先清除 success 函数中的所有内容，然后检查并了解您是否获得了正确的数据以及以何种形式获得。然后创建将数据填充到表中的函数 loadTable。

...
success: function(data) {
  console.log(data); // Open console and check the data you get
}
...