如何在 javascript 中添加按钮，因为在 html 表中导入的数据来自 JSON 文件

Question

我正在尝试在列内添加编辑和删除按钮，但 HTML 表是从 JSON 文件创建的，它使用 for 循环打印出内容。 我不知道如何在列内添加额外的按钮（绿色区域）。

计划添加的按钮将在“未定义”列中替换。

JSON 代码：

 [
   {
      "userId":"ravjy", 
      "jobTitleName":"Developer", 
      "firstName":"Ran",
      "lastName":"Vijay",
      "preferredFullName":"Ran Vijay",
      "employeeCode":"H9",
      "region":"DL",
      "phoneNumber":"34567689",
      "emailAddress":"ranvijay.k.ran@gmail.com"
   },
   {
      "userId":"mrvjy",
      "jobTitleName":"Developer",
      "firstName":"Murli",
      "lastName":"Vijay",
      "preferredFullName":"Murli Vijay",
      "employeeCode":"A2","region":"MU",
      "phoneNumber":"6543565",
      "emailAddress":"murli@vijay.com"
      }
   ]

<script>
fetch('employees.json')
  .then(function (response) {
    // The JSON data will arrive here
     return response.json();
  })
    .then(function (data) {
    appendData(data);
  })
  .catch(function (err) {
    // If an error occured, you will catch it here
  });
        
    function appendData(data) {
        
        //Extract Value for HTML HEADER.
        
        var col=[];
        for (var i = 0; i<data.length;i++){
            for (var key in data[i]){
                if (col.indexOf(key) === -1){
                    col.push(key);
                }
            }
        }
        
        //Add edit and delete header
        col.push("Edit","Delete");
        
        // 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 < data.length; i++) {

            tr = table.insertRow(-1);

            for (var j = 0; j < col.length; j++) {
                var tabCell = tr.insertCell(-1);
                tabCell.innerHTML = data[i][col[j]];
                
            }
        }
        
        // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
        var divContainer = document.getElementById("myData");
        divContainer.innerHTML = "";
        divContainer.appendChild(table);
    }
    
   
    
    </script>


  [1]: https://i.stack.imgur.com/YpoDi.png
  [2]: https://i.stack.imgur.com/pu7SB.png

Answer 1

解决方案

Javascript map 将有助于使其正常工作

 const data = [ { userId: "ravjy", jobTitleName: "Developer", firstName: "Ran", lastName: "Vijay", preferredFullName: "Ran Vijay", employeeCode: "H9", region: "DL", phoneNumber: "34567689", emailAddress: "ranvijay.k.ran@gmail.com", }, { userId: "mrvjy", jobTitleName: "Developer", firstName: "Murli", lastName: "Vijay", preferredFullName: "Murli Vijay", employeeCode: "A2", region: "MU", phoneNumber: "6543565", emailAddress: "murli@vijay.com", }, ]; function test(type, id) { alert(type + " " + id); } function appendData(data) { //Extract Value for HTML HEADER. data = data.map((item) => { item.Edit_Delete = `<Button type="button" onclick="test('Edit', '${item.userId}')">${item.userId}</Button> <Button type="button" onclick="test('Delete', '${item.userId}')">${item.userId}</Button>`; return item; }); const col = []; for (let i = 0; i < data.length; i++) { for (let key in data[i]) { if (col.indexOf(key) === -1) { col.push(key); } } } //Add edit and delete header // col.push("Edit","Delete"); // CREATE DYNAMIC TABLE. const table = document.createElement("table"); // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE. let tr = table.insertRow(-1); // TABLE ROW. for (let i = 0; i < col.length; i++) { const th = document.createElement("th"); // TABLE HEADER. th.innerHTML = col[i]; tr.appendChild(th); } // ADD JSON DATA TO THE TABLE AS ROWS. for (let i = 0; i < data.length; i++) { tr = table.insertRow(-1); for (let j = 0; j < col.length; j++) { const tabCell = tr.insertCell(-1); tabCell.innerHTML = data[i][col[j]]; } } // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER. const divContainer = document.getElementById("myData"); divContainer.innerHTML = ""; divContainer.appendChild(table); } appendData(data);

 <!DOCTYPE html> <html> <body> <div id ="myData"></div> </body> </html>