JQuery를 사용하여 다른 테이블을 동적으로 생성하십시오.

-3

테이블을 동적으로 생성해야하는 코드를 작성하고 있습니다. 여기에 전문가 중 한 명이 나를 만들 때 도움이되었지만 여기서는 별도로 테이블을 만들려고합니다.JQuery를 사용하여 다른 테이블을 동적으로 생성하십시오.

현재는

<table> 
<tr> 
<th></th> 
<th></th> 
<th></th> 
</tr> 
<tr> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
<tr> 
<th></th> 
<th></th> 
<th></th> 
</tr> 
<tr> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
<tr> 
<th></th> 
<th></th> 
<th></th> 
</tr> 
<tr> 
<td></td> 
<td></td> 
<td></td> 
</tr> 
</table>

비슷하지만

여기

<table> 
     <tr> 
      <th></th> 
      <th></th> 
      <th></th> 
     </tr> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
    </table> 
    <table> 
     <tr> 
      <th></th> 
      <th></th> 
      <th></th> 
     </tr> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
    </table> 
    <table> 
     <tr> 
      <th></th> 
      <th></th> 
      <th></th> 
     </tr> 
     <tr> 
      <td></td> 
      <td></td> 
      <td></td> 
     </tr> 
    </table>

하고 작업 바이올린입니다 그것으로 할 수 있습니다. http://jsfiddle.net/9r6a1uby/2/

어떻게 해결할 수 있는지 알려주세요.

감사

출처

2017-12-20 user3872094

나에게 잘 보입니다. 이슈가 뭐야 ? –

은 들여 쓰기가됩니까? – Durga

내 실제 출력 모든 내용은 단일 테이블에 있지만 여기에 4 개의 다른 테이블에있는 데이터가 필요합니다 – user3872094

<!DOCTYPE html> 
<html> 
<head> 
    <title></title> 
    <script 
    src="https://code.jquery.com/jquery-3.2.1.min.js" 
    integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
    crossorigin="anonymous"></script> 
</head> 
<body onLoad="buildHtmlTable()"> 
    <div id="excelDataTable"> 

    </div> 

    <script type="text/javascript"> 

var myList = [ 
    [{ 
    "product": "Red Wine", 
    "unit": " ", 
    "max": "0.575", 
    "ruleNo": "1", 
    "ingredients": "sulphates", 
    "id": "2" 
    }, { 
    "product": "Red Wine", 
    "unit": " ", 
    "max": "10.25", 
    "ruleNo": "1", 
    "ingredients": "alcohol", 
    "id": "1" 
    }, { 
    "product": "Red Wine", 
    "unit": " ", 
    "max": "98.5", 
    "ruleNo": "1", 
    "ingredients": "total sulfur dioxide", 
    "id": "3" 
    }], 
    [{ 
    "product": "Red Wine", 
    "unit": " ", 
    "max": "1.98", 
    "ruleNo": "3", 
    "ingredients": "sulphates", 
    "id": "8" 
    }, { 
    "product": "Red Wine", 
    "unit": " ", 
    "max": "81.5", 
    "ruleNo": "3", 
    "ingredients": "total sulfur dioxide", 
    "id": "9" 
    }, { 
    "product": "Red Wine", 
    "unit": " ", 
    "max": "10.25", 
    "ruleNo": "3", 
    "ingredients": "alcohol", 
    "id": "7" 
    }], 
    [{ 
    "product": "Red Wine", 
    "unit": " ", 
    "max": "98.5", 
    "ruleNo": "2", 
    "ingredients": "total sulfur dioxide", 
    "id": "6" 
    }, { 
    "product": "Red Wine", 
    "unit": " ", 
    "max": "0.575", 
    "ingredients": "sulphates", 
    "id": "5" 
    }, { 
    "product": "Red Wine", 
    "unit": " ", 
    "max": "10.25", 
    "ruleNo": "2", 
    "ingredients": "alcohol", 
    "id": "4" 
    }], 
    [{ 
    "product": "Red Wine", 
    "unit": " ", 
    "max": "1.98", 
    "ruleNo": "4", 
    "ingredients": "sulphates", 
    "id": "11" 
    }, { 
    "product": "Red Wine", 
    "unit": " ", 
    "max": "155", 
    "ruleNo": "4", 
    "ingredients": "total sulfur dioxide", 
    "id": "12" 
    }, { 
    "product": "Red Wine", 
    "unit": " ", 
    "max": "10.25", 
    "min": "8.5", 
    "target_state": "5", 
    "min_operator": "<=", 
    "max_operator": " ", 
    "target_parameter": "Quality", 
    "ruleNo": "4", 
    "ingredients": "alcohol", 
    "id": "10" 
    }] 
]; 

// Builds the HTML Table out of myList json data from Ivy restful service. 
function buildHtmlTable() { 
    for (var i = 0; i < myList.length; i++) { 
    var columns = addAllColumnHeaders(myList[0], i); 

    for (var j = 0; j < myList[i].length; j++) { 
     var row$ = $('<tr/>'); 
     console.log(myList[i][j]) 
     for (var colIndex = 0; colIndex < columns.length; colIndex++) { 

     var cellValue = myList[i][j][columns[colIndex]]; 

     if (cellValue == null) { 
      cellValue = ""; 
     } 

     row$.append($('<td/>').html(cellValue)); 
     } 
     $("#table-id-"+i).append(row$); 
    } 
    } 

    // Adds a header row to the table and returns the set of columns. 
    // Need to do union of keys from all records as some records may not contain 
    // all records 
    function addAllColumnHeaders(list, i) { 
    var columnSet = []; 
    var headerTr$ = '<table id="table-id-'+i+'"><thead><tr>'; 
    for (var i = 0; i < list.length; i++) { 
     var rowHash = list[i]; 
     for (var key in rowHash) { 
     if ($.inArray(key, columnSet) == -1) { 
      columnSet.push(key); 
      headerTr$ += '<th>' + key + '</th>'; 
     } 
     } 
    } 

    headerTr$ += '</tr></thead></table>'; 
    console.log(headerTr$); 
    $("#excelDataTable").append(headerTr$); 
    return columnSet; 
    } 
} 


    </script> 
</body> 
</html>

출처

2017-12-20 06:38:31 Saurabh

테이블 ID를 동적으로 생성 한 다음 해당 테이블에 데이터를 추가한다. 도움이되기를 바랍니다! – Saurabh

아래 코드와 기능을 대체,이

<body onLoad="buildHtmlTable()"> 
    <div id="tables-div"></div> 
</body>

에게

HTML 문제

function buildHtmlTable() { for (var i = 0; i < myList.length; i++) { var $table = $('<table id="excelDataTable-'+(i+1)+'" border="1"></table>'); $('#tables-div').append($table); var columns = addAllColumnHeaders(myList[0], (i+1)); for (var j = 0; j < myList[i].length; j++) { var row$ = $('<tr/>'); console.log(myList[i][j]) for (var colIndex = 0; colIndex < columns.length; colIndex++) { var cellValue = myList[i][j][columns[colIndex]]; if (cellValue == null) { cellValue = ""; } row$.append($('<td/>').html(cellValue)); $("#excelDataTable-"+(i+1)).append(row$) } } $('#tables-div').append('<br />'); } function addAllColumnHeaders(myList, table_id) { var columnSet = []; var headerTr$ = $('<tr/>'); for (var i = 0; i < myList.length; i++) { var rowHash = myList[i]; for (var key in rowHash) { if ($.inArray(key, columnSet) == -1) { columnSet.push(key); headerTr$.append($('<th/>').html(key)); } } } $("#excelDataTable"+table_id).append(headerTr$); return columnSet; } }
JS를 수정해야

출처

2017-12-20 08:14:36

JQuery를 사용하여 다른 테이블을 동적으로 생성하십시오.

답변

관련 문제