Question

我正在用这个创建一个html表：

function CreateTableFromJSON() {
    var myBooks = [
        {
            "Book ID": "1",
            "Book Name": "Computer Architecture",
            "Category": "Computers",
            "Price": "125.60"
        },
        {
            "Book ID": "2",
            "Book Name": "Asp.Net 4 Blue Book",
            "Category": "Programming",
            "Price": "56.00"
        },
        {
            "Book ID": "3",
            "Book Name": "Popular Science",
            "Category": "Science",
            "Price": "210.40"
        }
    ]

    // EXTRACT VALUE FOR HTML HEADER. 
    // ('Book ID', 'Book Name', 'Category' and 'Price')
    var col = [];
    for (var i = 0; i < myBooks.length; i++) {
        for (var key in myBooks[i]) {
            if (col.indexOf(key) === -1) {
                col.push(key);
            }
        }
    }

    // CREATE DYNAMIC TABLE.
    var table = document.createElement("table");

    // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.

    var tr = table.insertRow(-1);                   // TABLE ROW.

    for (var i = 0; i < col.length; i++) {
        var th = document.createElement("th");      // TABLE HEADER.
        th.innerHTML = col[i];
        tr.appendChild(th);
    }

    // ADD JSON DATA TO THE TABLE AS ROWS.
    for (var i = 0; i < myBooks.length; i++) {

        tr = table.insertRow(-1);

        for (var j = 0; j < col.length; j++) {
            var tabCell = tr.insertCell(-1);
            tabCell.innerHTML = myBooks[i][col[j]];
        }
    }

    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
    var divContainer = document.getElementById("showData");
    divContainer.innerHTML = "";
    divContainer.appendChild(table);
}

现在我想在下表中添加两列，每行都有edit和delete选项。如何在下表中添加该选项？

Answer 1

$.each(jsonData, function (key, val) {
            var tr = '<tr>';
            tr += '<td>' + (key + 1) + '</td>';
            tr += '<td>' + val.id + '</td>';
            tr += '<td>' + val.name + '</td>';
            tr += '<td><a href="#">Delete</a</td>';
            tr += '</tr>';
            $('tbody').append(tr);
        });

Answer 2

试试这段代码：

var myBooks = [
        {
            "Book ID": "1",
            "Book Name": "Computer Architecture",
            "Category": "Computers",
            "Price": "125.60"
        },
        {
            "Book ID": "2",
            "Book Name": "Asp.Net 4 Blue Book",
            "Category": "Programming",
            "Price": "56.00"
        },
        {
            "Book ID": "3",
            "Book Name": "Popular Science",
            "Category": "Science",
            "Price": "210.40"
        }
    ]
var table = document.createElement('table');
var thead = document.createElement('thead');
var tbody = document.createElement('tbody');
table.append(thead);
table.append(tbody);

var headers = Object.keys(myBooks[0]);
var headTr = document.createElement('tr');
tbody.append(headTr);

headers.forEach(function(header) {
  var th = document.createElement('th');
  th.textContent = header;
  headTr.append(th);
});

myBooks.forEach(function(book) {
  var tr = document.createElement('tr');
  tbody.append(tr);
  headers.forEach(function(bookKey) {
    var td = document.createElement('td');
    td.textContent = book[bookKey];
    tr.append(td);
  });
});
document.getElementsByTagName('body')[0].append(table);

评论：

我正在使用第一个对象的键来创建标题
作为最后一步，该表被添加到body - 现有DOM上的操作越少，您的解决方案的性能就越高

您也可以将其包装在函数中：

var createTableFromJSON = function(element) {
  // the code from above except the last line

  element.append(table);
}

createTableFromJSON(element);

并传递要添加表格的DOM元素。

如何在HTML表格中添加编辑和删除选项？

2 个答案: