Javascript：修改函數來動態創建表格

我對JavaScript很新穎，想使用函數將表格插入表單。到目前爲止，我有以下代碼（工作 - 除了標題），但我正在努力與以下內容：Javascript：修改函數來動態創建表格

1）我如何使用提示（彈出）要求所需的表，而不是使用輸入字段我有？ 2）如何在這裏包含寬度（以％爲單位）？ 3）我怎樣才能總是添加表頭？

我希望這裏有人能幫助我理解這一點。

我的代碼：

<html> 
<head> 
<script type="text/javascript"> 
    function insertTable() 
    { 
     var num_rows = document.getElementById('rows').value; 
     var num_cols = document.getElementById('cols').value; 
     var theader = "<table id='table1'><thead></thead>"; 
     var tbody = ""; 

     for(var i = 0; i < num_rows; i++) 
     { 
      tbody += "<tr>"; 
      for(var j = 0; j < num_cols; j++) 
      { 
       tbody += "<td>"; 
       tbody += "?"; 
       tbody += "</td>" 
      } 
      tbody += "</tr><br />"; 
     } 
     var tfooter = "</table>"; 
     document.getElementById('wrapper').innerHTML = theader + tbody + tfooter; 
    } 
</script> 
<style> 
    #table1 
    { 
     border:solid 1px; 
     border-collapse:collapse; 
     width:100%; 
    } 

    #table1 td 
    { 
     border:solid 1px; 
     vertical-align:middle; 
    } 
</style> 
</head> 
<body> 
    <form name="tableForm"> 
     <label>Rows: <input type="text" name="rows" id="rows"/></label><br /> 
     <label>Cols: <input type="text" name="cols" id="cols"/></label><br /> 
     <label>Width (%): <input type="text" name="width" id="width"/></label><br /> 
     <button type="button" onclick="insertTable()">Create Table</button> 
     <div id="wrapper"></div> 
    </form> 
</body> 
</html>

感謝任何幫助，蒂姆

來源

2013-10-27 user2571510

我在代碼中添加了JS和CSS中的少量更改。這將給你每個列的標題，也將設置表的寬度％

要在彈出窗口中顯示錶單，可以使用任何jquery插件。用於彈出最好的JQ插件jquery-lightbox-me

<html> 
<head> 
<script type="text/javascript"> 
function insertTable() 
{ 
    var num_rows = document.getElementById('rows').value; 
    var num_cols = document.getElementById('cols').value; 
    var width = document.getElementById('width').value; 
    var theader = "<table id='table1' width = ' "+ width +"% '>"; 
    var tbody = ""; 

    for(var j = 0; j < num_cols; j++) 
    { 
     theader += "<th>header col "+ (j+1) +" </th>"; 
    } 

    for(var i = 0; i < num_rows; i++) 
    { 
     tbody += "<tr>"; 
     for(var j = 0; j < num_cols; j++) 
     { 
      tbody += "<td>"; 
      tbody += "?"; 
      tbody += "</td>" 
     } 
     tbody += "</tr><br />"; 
    } 
    var tfooter = "</table>"; 
    document.getElementById('wrapper').innerHTML = theader + tbody + tfooter; 
} 
</script> 
<style> 
#table1 
{ 
    border:solid 1px; 
    border-collapse:collapse; 
} 

#table1 th 
{ 
    border:solid 1px; 
    border-collapse:collapse; 
} 

#table1 td 
{ 
    border:solid 1px; 
    vertical-align:middle; 
} 
</style> 
</head> 
<body> 
<form name="tableForm"> 
    <label>Rows: <input type="text" name="rows" id="rows"/></label><br /> 
    <label>Cols: <input type="text" name="cols" id="cols"/></label><br /> 
    <label>Width (%): <input type="text" name="width" id="width"/></label><br /> 
    <button type="button" onclick="insertTable()">Create Table</button> 
    <div id="wrapper"></div> 
</form> 
</body> 
</html>

希望這會幫助你。

感謝

來源

2013-10-27 11:43:51 Swati

這正是我所期待的 - 非常感謝！ – user2571510

np :)很高興我能幫助你.. !! – Swati

看一看jQuery和顯示（）/隱藏（）函數。您可以使用'真實'javascript-popups，但某些瀏覽器/瀏覽器配置不會打開新的標籤頁/窗口。總結一下，考慮一下你的用例，創建所有必要的div容器，並在你的頁面上顯示一個div容器。你可以在這裏找到更多關於JQuery的地方http://www.w3schools.com/jquery/jquery_hide_show.asp，當然這裏還有 http://api.jquery.com/show/。您也可以使用JQuery函數更改表格屬性和相應的CSS。

來源

2013-10-27 11:04:09 Jochen

謝謝您的回答，但我認爲這正好在一個不同的方向。我不想隱藏或顯示任何內容，我想動態創建表格。 – user2571510

我以爲你需要獲得所有必要的信息在一個div和隱藏div表中將創建。這是一個SO線程如何通過使用JQuery動態創建表：http://stackoverflow.com/questions/17440239/jquery-dynamic-table-create – Jochen

讓說我有一個CSV，它應該工作

Header1,Header2,Header3 
1,2,3 
4,5,6 



     var data = evt.target.result; 
     var delimiter = ','; 
     var escape = '\n'; 
     var rows = data.split(escape); 
     var tbl = document.createElement('table'); 
     tbl.style.width = '100%'; 
     //tbl.setAttribute('border', '1', "green"); 
     tbl.className = "table table-hover table-condensed dataTable"; 
     var tbdy = document.createElement('tbody'); 


     for (index in rows) { 
      var tr = document.createElement('tr'); // creating new row 
      var items = rows[index].split(delimiter); 
      for (itemindex in items) { 
       var td = ""; 
       if (index == 0) { 
        td = document.createElement('th'); 
       } else { 
        td = document.createElement('td'); 
       } 

       td.appendChild(document.createTextNode(items[itemindex])); // creating new cell 
       tr.appendChild(td); // add to current tr 
      } 

      tbdy.appendChild(tr); // add new row (tr) to table 
     } 
     tbl.appendChild(tbdy); 

     document.getElementById('byte_content').appendChild(tbl);

來源

2014-02-20 09:21:46

Javascript：修改函數來動態創建表格

回答

相關問題