时间戳

首页 > 解决方案 > 用于在 JavaScript 中显示现有动态表中的行数据以及添加删除的 JSON 对象

javascript - 用于在 JavaScript 中显示现有动态表中的行数据以及添加删除的 JSON 对象

问题描述

我需要使用 JSON 对象来显示动态表中的行数据。我从下面的 ajax 调用中获取数据：

function getJSON() {
  return JSON.parse($.ajax({
    type: 'GET',
    url: thisURL,
    dataType: 'json',
    global: false,
    async: false,
    success: function(data) {
      return data;
    }
  }).responseText);
}

var data_all = getJSON();


[{
  "Row_1": "Row_1",
  "Row_1_Name": "Name1",
  "Row_1_age": "Age1",
  "Row_2": "Row_2",
  "Row_2_Name": "Name2",
  "Row_2_age": "Age2",
  "Row_3": "Row_3",
  "Row_3_Name": "Name3",
  "Row_3_age": "Age3",
  "Row_4": "Row_4",
  "Row_4_Name": "Name4",
  "Row_4_age": "Age4"
}]

Ajax 调用，动态表添加行都可以。我只需要在 onload 发生时将其显示在表格中。任何人都可以建议我。谢谢。

    function createTable() {
    var myHead = new Array();    	
    	 myHead = ['Row','Name', 'Age',''];
          var myTable = document.createElement('table');
            myTable.setAttribute('id', 'myTable'); 
            var tr = myTable.insertRow(-1);    
            for (var h = 0; h < myHead.length; h++) {
                var th = document.createElement('th');          
                th.innerHTML = myHead[h];
                tr.appendChild(th);
            }    
            var div = document.getElementById('main_Div');
            div.appendChild(myTable);    
        }
    
    function addRow() {
      var myHead = new Array();    	
    	 myHead = ['Row','Name', 'Age',''];
            var myTab = document.getElementById('myTable');    		
            var rowCnt = myTab.rows.length;    
    		var tr = myTab.insertRow(rowCnt);      
            // tr = myTab.insertRow(rowCnt);    
    		var No = "Row_"+rowCnt;    		
            for (var c = 0; c < myHead.length; c++) {
                var td = document.createElement('td');       
                td = tr.insertCell(c);    
                if (c == 0) {
                    var ele = document.createElement('input');
                    ele.setAttribute('type', 'text');
                    ele.setAttribute('value', No);
    				ele.setAttribute('readonly', true);
    				ele.setAttribute('name', 'No');    
                    td.appendChild(ele);
                }
    			else if (c == 1) {
                    var ele = document.createElement('input');
                    ele.setAttribute('type', 'text');
                    ele.setAttribute('value', '');
                    ele.setAttribute('name', 'Name');
                    ele.setAttribute('id', 'Name');
    
                    td.appendChild(ele);
                }
    			else if (c == 2) {
                    var ele = document.createElement('input');
                    ele.setAttribute('type', 'text');
                    ele.setAttribute('value', '');
                    ele.setAttribute('name', 'Age');
                    ele.setAttribute('id', 'Age');
                    
                    td.appendChild(ele);
                }
    			else if (c == 3) {         
                    var button = document.createElement('input');
                    button.setAttribute('type', 'button');
                   button.setAttribute('value', 'Remove');
    			   
                    button.setAttribute('onclick', 'removeRow(this)');
    
                    td.appendChild(button);
                }
    			
            }
        }    
    
        function removeRow(button) {
            var myTab = document.getElementById('myTable');
            myTab.deleteRow(button.parentNode.parentNode.rowIndex);

            // Use map to rebuild input values
            [].slice.call(myTab.rows).map(
                 function (item,index) {  
                    if (item.firstChild.firstChild.nodeType == 1) {
                        item.firstChild.firstChild.value = "Row_" + index
                    };
                    return true; 
                 });
        }
		
		 <head>
        <title>Dynamic table</title>    
    </head>
    <body onload="createTable()">
    <input type="button" id="addRow" value="Add New Row" onclick="addRow()" />
    		
        <div id="main_Div"></div>
    </body>

标签： javascript

解决方案

试试这个。它在页面加载时创建整个表。

function createTable() {
        var myHead = new Array();
        myHead = ['Row', 'Name', 'Age', ''];
        var myTable = document.createElement('table');
        myTable.setAttribute('id', 'myTable');
        var tr = myTable.insertRow(-1);
        for (var h = 0; h < myHead.length; h++) {
            var th = document.createElement('th');
            th.innerHTML = myHead[h];
            tr.appendChild(th);
        }
        var div = document.getElementById('main_Div');
        div.appendChild(myTable);
        addRow() //newly added
    }
    function addRow() {
        var data_all = [{
            "Row_": "Row_1",
            "Row_Name": "Name1",
            "Row_age": "Age1"
        },
        {
            "Row_": "Row_2",
            "Row_Name": "Name2",
            "Row_age": "Age2"
        },
        {
            "Row_": "Row_3",
            "Row_Name": "Name3",
            "Row_age": "Age3"
        },
        {
            "Row_": "Row_4",
            "Row_Name": "Name4",
            "Row_age": "Age4"
        }]  //newly added for making it easy

        var myHead = new Array();
        myHead = ['Row', 'Name', 'Age', ''];
        var myTab = document.getElementById('myTable');
        var rowCnt = myTab.rows.length;
        var row_c = 4;  //newly added
        //this loop creates rows 
        for (var j = data_all.length - 1; j > -1; j--) {  //newly added
            var tr = myTab.insertRow(rowCnt);

            var No = "Row_" + (row_c); //newly added
            row_c--; //newly added
            //creates cells in a row
            for (var c = 0; c < myHead.length; c++) {
                var td = document.createElement('td');
                td = tr.insertCell(c);
                if (c == 0) {
                    var ele = document.createElement('input');
                    ele.setAttribute('type', 'text');
                    ele.setAttribute('value', No);
                    ele.setAttribute('readonly', true);
                    ele.setAttribute('name', 'No');
                    td.appendChild(ele);
                }
                else if (c == 1) {
                    var ele = document.createElement('input');
                    ele.setAttribute('type', 'text');
                    ele.setAttribute('value', '');
                    ele.setAttribute('name', 'Name');
                    ele.setAttribute('id', 'Name');
                    ele.setAttribute('value', data_all[j].Row_Name);  //newly added
                    td.appendChild(ele);
                }
                else if (c == 2) {
                    var ele = document.createElement('input');
                    ele.setAttribute('type', 'text');
                    ele.setAttribute('value', '');
                    ele.setAttribute('name', 'Age');
                    ele.setAttribute('id', 'Age');
                    ele.setAttribute('value', data_all[j].Row_age); //newly added 
                    td.appendChild(ele);
                }
                else if (c == 3) {
                    var button = document.createElement('input');
                    button.setAttribute('type', 'button');
                    button.setAttribute('value', 'Remove');

                    button.setAttribute('onclick', 'removeRow(this)');

                    td.appendChild(button);

                }

            }
        }
    }

    function removeRow(button) {
        var myTab = document.getElementById('myTable');
        myTab.deleteRow(button.parentNode.parentNode.rowIndex);

        // Use map to rebuild input values
        [].slice.call(myTab.rows).map(
            function (item, index) {
                if (item.firstChild.firstChild.nodeType == 1) {
                    item.firstChild.firstChild.value = "Row_" + index
                };
                return true;
            });
    }

推荐阅读