функция JavaScript для создания таблицы с использованием JavaScript

Question

функция JavaScript для создания таблицы с использованием JavaScript

0

учитывая таблицу смешанного использования, как показано ниже, как создать функцию, которая генерирует одну и ту же структуру таблицы.

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>

bouncingHippo 19 сен. 2013, в 21:46

Источник

Теги:

javascript

html

jsp

taglib

3 ответа

Ещё вопросы

Parth Akbari · Answer 1 · 2014-11-18T05-06-00.000Z

Использование 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();

Jai Prak · Answer 2 · 2014-11-18T04-02-00.000Z

    /*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 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>

Larissa Leite · Answer 3 · 2013-09-19T17-50-00.000Z

Использование JQuery очень просто:

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

Если вы хотите добавить заголовок динамически, это в основном то же самое.

Если вы хотите добавить CSS-свойства ко всем вашим строкам, например, вы можете использовать что-то вроде этого:

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

Надеюсь, что это полезно.