如何使用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);
                    }
          }
          });
}

桌子上什么都没有打印出来

两个问题

1) 我收到的数据与 sn-p 中的语法不同

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

谁能指导我这里

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

Answer 1

你的代码有很多错误。

• 不要做JSON.stringify({selected_student_filter_data})，除非你的 服务器需要一个带有selected_student_filter_data 的对象 财产。那是ES2015 Object Property Shorthand。
• 不要将$(document).ready 放入 AJAX 成功中 响应，在外面有函数loadTable并从 一次来自$(document).ready。
• selected_student_data = JSON.stringify(selected_student) 将为 selected_student_data。你不想那样做。你需要 JSON.parse 但如果您设置响应，jQuery 会为您执行此操作 标头Content-type: application/json。

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

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

Answer 2

如果您不介意不同的实现，请查看以下解决方案。

动态呈现表格内容。

function addTable(data, headers) {

  var myTableDiv = document.getElementById("myTable");
  myTableDiv.innerHTML = "";

  var table = document.createElement('TABLE');
  table.border = '1';

  var tableHeader = document.createElement('THEAD');
  table.appendChild(tableHeader);

  var tableBody = document.createElement('TBODY');
  table.appendChild(tableBody);

  var n = data.length;
  var m = headers.length;
  var thKeys;
  if (n > 0) {
    thKeys = Object.keys(data[0]);
  }

  var tr = document.createElement('TR');
  tableBody.appendChild(tr);

  for (var j = 0; j < m; j++) {
    var td = document.createElement('TD');
    td.width = '75';
    td.innerText = thKeys[j];
    tr.appendChild(td);
  }


  for (var i = 0; i < n; i++) {
    tr = document.createElement('TR');
    tableBody.appendChild(tr);

    for (var j = 0; j < m; j++) {
      var td = document.createElement('TD');
      td.width = '75';
      td.innerText = data[i][thKeys[j].toLowerCase()];
      tr.appendChild(td);
    }
  }

  myTableDiv.appendChild(table);

}

var data = [
  {
    "title": "021",
    "score": 86,
    "ref": "desc 021",
    "id": "ABC021"
  },
  {
    "title": "022",
    "score": 72,
    "ref": "desc 022",
    "id": "ABC022"
  }
];

addTable(data, ['Title', 'Score']);

function updateTable() {
  addTable(data, ['Title', 'Score', 'Ref', 'Id']);
}

function reset() {
  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>