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

Question

我在这里找到了一个代码来动态更改表格内容脚本在 jQueryjQuery动态更改表格内容的原始代码$(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 属性的对象，否则不要这样做。那是ES2015 Object Property Shorthand。

• 不要把$(document).readyAJAX 成功响应放在里面，把函数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>