javascript函数使用javascript生成表

Question

给定一个像下面这样的混合使用表，我如何创建一个生成相同表结构的函数。

PS：这是遗留代码，因此不幸的是 taglib 混合语法

要生成的表格：

<% if (boolVar) { %>
<img src="../graphics/dot.gif" width="70%" border="0" height="1"><br>
    <table id="<%=tableName%>" width="70%" cellpadding="0" cellspacing="0" border="0">
        <tr class="titletextrow">           
            <td class="leftbartextbold" colspan="5" height="14">&nbsp;TableNameHere</td>            
        </tr>       
        <tr>
            <td></td>
            <td class="label">Column1Name</td>
            <td width="60%"></td>           
            <td class="label">Column2Name</td>
            <td></td>
        </tr>
    <logic:iterate id="someList" name="someForm" property="someList" scope="request" indexId="someIndex">
        <SCRIPT> currentRow<%=tableName%> += 1; 
                </SCRIPT>
          <%}%>
        <% currentRow += 1; %>              
    </logic:iterate>
    </table>

可能的方法 我正在考虑使用类似于将document.write 参数附加为附加字符串的方法，但由于混合使用的 taglib 语法，它会很混乱。有什么建议么？与此问题直接相关的示例将不胜感激！

<script>
    function create() {
        var row = parseInt(document.getElementById("row").value);
        var col = parseInt(document.getElementById("col").value);


        var tablestart = "<table id=myTable border=1>";
        var tableend = "</table>";
        var trstart = "<tr bgcolor=#ff9966>";
        var trend = "</tr>";
        var tdstart = "<td>";
        var tdend = "</td>";
        var data = "data in cell";

        var str1 = tablestart + trstart + tdstart + data + tdend + trend + tableend;

        document.write(tablestart);
        for (var r = 0; r < row; r++) {
            document.write(trstart);
            for (var c = 0; c < col; c++) {
                document.write(tdstart + "Row." + r + " Col." + c + tdend);
            }
        }
        document.write(tableend);
    }
</script>

Answer 1

使用 instertRow 和 insertCell：

function tableCreate(){
 var body = document.body,
 tbl  = document.createElement('table');
 tbl.style.width='100px';
 tbl.style.border = "2px solid black";

 for(var i = 0; i < 5; i++){
    var tr = tbl.insertRow();
    for(var j = 0; j < 4; j++){
        if(i==2 && j==1){
            break
        } else {
            var td = tr.insertCell();
            td.appendChild(document.createTextNode('Cell'))
            td.style.border = "2px solid black";
            if(i==1&&j==1){
                td.setAttribute('rowSpan','2');
            }
        }
    }
  }
   body.appendChild(tbl);
 }
tableCreate();

Answer 2

使用 JQuery 非常简单：

var table = $("#myTable tbody");
table.append("<tr><td>Element Column 1</td><td> Element Column 2 </td></tr>");

如果要动态添加header，基本一样。

例如，如果您想为所有行添加 CSS 属性，您可以使用以下内容：

 $("tr").css("property", "value");

希望这是有用的。

Answer 3

    /*This is my javascript code to generate HTML table using recursion*/

//rowStart is starting index for row
var generateRowsWithCols = function(rowStart,noOfRows,noOfCols){
    if(rowStart > noOfRows)
        return;
    var table = document.getElementById("grid");
    var tr = table.insertRow("tr");
    tr.setAttribute("id","tr"+rowStart);    //set tr id
    generateCells(1,rowStart,noOfCols); //column indexing starts with 1
    generateRowsWithCols(++rowStart,noOfRows,noOfCols);
};

//colStart is starting index for columns
var generateCells = function(colStart,rowStart,noOfCols){
    if(colStart > noOfCols)
        return;
    var row = document.getElementById("tr"+rowStart);
    var td = row.insertCell("td");  //insert cell into row
    td.setAttribute("id","td"+colStart); //set cell id
    generateCells(++colStart,rowStart,noOfCols);
};

    //generateTable function will be called on page's onload event with
    //two parameters number of rows and number of columns
    var generateTable = function(noOfRows,noOfCols){
      var table = document.createElement("table");
      table.setAttribute("id","grid"); //set table id="grid"
      document.body.appendChild(table); //add table in body as child
      generateRowsWithCols(1,noOfRows,noOfCols); //row indexing starts with 1
    };

 This is my HTML code with CSS:
<html>
<head>
    <title>test</title>
    <script type="text/javascript" src="tableWithRecursion.js"></script>
    <style type="text/css">
    #grid{
        background: silver;
        border: 2px solid;
        height: 30%;
        width: 30%;
    }
    #grid tr{
        border: 2px solid;
    }
    #grid td{
        height: 30px;
        width: 30px;
        height: 20px;
        border: 2px solid;
    }
    </style>
</head>
<body onload="generateTable(5,6)">
</body>
</html>