使用JSON動態創建HTML表格行

問題：尋找Jquery或javascript解決方案，使用下面的JSON結構創建帶有colspan的動態錶行。我面臨的問題是創建所需的行。我嘗試過很多場景，但無法找到TR來追加TH。使用JSON動態創建HTML表格行

非常感謝您的幫助。

這裏是我的JSON格式

[{"data":"test","nodes":[{"data":"5.00%","nodes":[{"data":"5.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]},{"data":"70.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]},{"data":"80.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]}]},{"data":"5.00%","nodes":[{"data":"5.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]},{"data":"70.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]},{"data":"80.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]}]}]}]

這裏是我想實現

enter image description here

HTML結構

<table> 
    <tr> 
    <th colspan="36">test</th> 
    </tr> 
    <tr> 
    <td colspan="18">5.00%</td> 
    <td colspan="18">5.00%</td> 
    </tr> 
    <tr> 
    <td colspan="6">5.00%</td> 
    <td colspan="6">70.00%</td> 
    <td colspan="6">80.00%</td> 
    <td colspan="6">5.00%</td> 
    <td colspan="6">70.00%</td> 
    <td colspan="6">80.00%</td> 
    </tr> 
    <tr> 
    <td colspan="1">Jul 2014</td> 
    <td colspan="1">Aug 2014</td> 
    <td colspan="1">Sep 2014</td> 
    <td colspan="1">Oct 2014</td> 
    <td colspan="1">Nov 2014</td> 
    <td colspan="1">Dec 2014</td> 
    <td colspan="1">Jul 2014</td> 
    <td colspan="1">Aug 2014</td> 
    <td colspan="1">Sep 2014</td> 
    <td colspan="1">Oct 2014</td> 
    <td colspan="1">Nov 2014</td> 
    <td colspan="1">Dec 2014</td> 
    <td colspan="1">Jul 2014</td> 
    <td colspan="1">Aug 2014</td> 
    <td colspan="1">Sep 2014</td> 
    <td colspan="1">Oct 2014</td> 
    <td colspan="1">Nov 2014</td> 
    <td colspan="1">Dec 2014</td> 
    <td colspan="1">Jul 2014</td> 
    <td colspan="1">Aug 2014</td> 
    <td colspan="1">Sep 2014</td> 
    <td colspan="1">Oct 2014</td> 
    <td colspan="1">Nov 2014</td> 
    <td colspan="1">Dec 2014</td> 
    <td colspan="1">Jul 2014</td> 
    <td colspan="1">Aug 2014</td> 
    <td colspan="1">Sep 2014</td> 
    <td colspan="1">Oct 2014</td> 
    <td colspan="1">Nov 2014</td> 
    <td colspan="1">Dec 2014</td> 
    <td colspan="1">Jul 2014</td> 
    <td colspan="1">Aug 2014</td> 
    <td colspan="1">Sep 2014</td> 
    <td colspan="1">Oct 2014</td> 
    <td colspan="1">Nov 2014</td> 
    <td colspan="1">Dec 2014</td> 
    </tr> 
</table>

來源

2017-10-28 vinod

你有代碼，用於接收JSON？你正在尋找的功能只是爲了直接使用JSON並立即創建表格？你試過什麼了？ –

是的，請直接拿JSON來創建表格。我已經嘗試了使用DFS和BFS的2-3場景，但是我沒有找到TR來追加TH。 – vinod

你可以爲此使用遞歸。該版本還將根據輸入內容動態確定colspan值。只有在超過1時纔會添加它們。請注意，零的colspan是沒有意義的。

function objectToTable(data) { 
 
    var $table = $("<table>"), 
 
     $tableRows = $("tr", $table); 
 
    
 
    function recurse(data, depth) { 
 
     if (!data) return 1; 
 
     if (depth >= $tableRows.length) { 
 
      $table.append($("<tr>")); 
 
      $tableRows = $("tr", $table); 
 
     } 
 
     var totalSpan = 0; 
 
     $tableRows.eq(depth).append(data.map(function(column) { 
 
      var colspan = recurse(column.nodes, depth+1); 
 
      // Maybe you want the deepest values to be wrapped in normal TD tags: 
 
      var $th = $(column.nodes ? "<th>" : "<td>").text(column.data); 
 
      if (colspan > 1) $th.attr("colspan", colspan); 
 
      totalSpan += colspan; 
 
      return $th; 
 
     })); 
 
     return totalSpan; 
 
    } 
 
    recurse(data, 0); 
 
    return $table; 
 
} 
 

 
var data = [{"data":"5.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]},{"data":"70.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]},{"data":"80.00%","nodes":[{"data":"Jul 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Aug 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Sep 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Oct 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Nov 2014","nodes":[{"data":"Result","nodes":null}]},{"data":"Dec 2014","nodes":[{"data":"Result","nodes":null}]}]}]; 
 
$("body").append(objectToTable(data));

table { 
 
    border-collapse: collapse; 
 
} 
 
th, td { 
 
    border: 1px solid; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

來源

2017-10-28 21:37:39 trincot

謝謝Trincot！，這很令人難以置信，這段代碼工作正常。 – vinod

我不打算做爲你分配，但希望這JSFiddle將幫助您的想法你如何去做這件事。我還包括一個非常簡單的方法來根據點擊的標題對列進行排序。在瞭解我在此處完成呈現此表格後，以編程方式添加集合點不應太困難。看一下document.getElementById（）。setAttribute（attributeName，value）的方法來做到這一點。

https://www.w3schools.com/jsref/met_element_setattribute.asp

讓我知道如果您有任何疑問:)

https://jsfiddle.net/cxb7h2ze/7/

HTML

<table> 
<thead> 
    <tr> 
    <th onclick="column(0)"> 
     Column 1 
    </th> 
    <th onclick="column(1)"> 
     Column 2 
    </th> 
    </tr> 
</thead> 
<tbody id="table"> 

</tbody> 
</table> 

<button onclick="renderArray()"> 
Render Array 
</button> 
</button>

array = [ 
    {column1: "Alphabetical name", 
    column2: 2}, 
    {column1: "Couch Potato", 
    column2: "3"}, 
    {column1: "Blah Blah", 
    column2: 1}, 
]; 

var toggle = [0,0] 
window.renderArray = function() { 
    var x; 
    var tr; 
    var td; 
    var text; 
    var button; 
    var table = document.getElementById("table"); 
    // reset table so it doesn't append a duplicate set 
    table.innerHTML = ""; 
    for (x = 0; x < array.length; x++) { 
    // create a row 
    tr = document.createElement("tr"); 
    tr.setAttribute("ondblclick", "alert('hello there this is row')"); 
    // create a cell 
    td = document.createElement("td"); 
    // create text to go in cell 
    text = document.createTextNode(array[x].column1); 
    // append text to cell 
    td.appendChild(text); 
    //append cell to row 
    tr.appendChild(td); 
    // create a second cell 
    td = document.createElement("td"); 
    // create a new text to go in cell 
    text = document.createTextNode(array[x].column2); 
    // append text to cell 
    td.appendChild(text); 
    // append cell to row 
    tr.appendChild(td); 
    // create cell 
    td = document.createElement("td"); 
    // add row to column 
    table.appendChild(tr); 
    } 
} 

window.column = function(id) { 
    toggle[id]++; 
    if (id == 0) { 
    // first column 
    array.sort(function(a, b) { 
     if (toggle[id] % 2 == 0) { 
     return a.column1.toLowerCase() < b.column1.toLowerCase(); 
     } 
     else { 
     return a.column1.toLowerCase() > b.column1.toLowerCase(); 
     } 
    }) 
    } 
    else { 
    array.sort(function(a, b) { 
     if (toggle[id] % 2 == 0) { 
     return a.column2 < b.column2; 
     } 
     else { 
     return a.column2 > b.column2; 
     } 
    }) 
    } 
    renderArray(); 
}

來源

2017-10-28 20:39:49 Pedro

使用JSON動態創建HTML表格行

回答

相關問題