учитывая таблицу смешанного использования, как показано ниже, как создать функцию, которая генерирует одну и ту же структуру таблицы.
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"> 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>
Использование 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();
/*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>
Использование JQuery очень просто:
var table = $("#myTable tbody");
table.append("<tr><td>Element Column 1</td><td> Element Column 2 </td></tr>");
Если вы хотите добавить заголовок динамически, это в основном то же самое.
Если вы хотите добавить CSS-свойства ко всем вашим строкам, например, вы можете использовать что-то вроде этого:
$("tr").css("property", "value");
Надеюсь, что это полезно.