Question

假设我有一个文本字段，其中给出了表的尺寸。喜欢2 3

现在我需要编写一个函数，用这些维创建一个带有div标签的表。该表必须插入<div id="output"> -element

中

我正在考虑用osme for循环创建一个字符串，看起来像这样

<div> 
<div> </div>
<div> </div>
</div>
<div> 
... (more columns)
</div>

所以看起来像是一系列div-tags，然后我将它转换为html并插入它。

但是，有没有更有效的方式？

Answer 1

在您的Javascript中，

 <script type="text/javascript">

 var rows,cols,str="";
 function generateTable()
 {
 rows = documnt.getElementById('rows').value;
 cols = documnt.getElementById('cols').value;
 str ="<table>"
 for(var i=0;i<rows;i++)
 {
 str = str+"<tr>";
 for(vat j=0;j<cols;j++)
 {
 str = str+"<td></td>";
 }
 str =str+"</tr>";
 }
 str = str + "</table>;

 documnt.getElementById('output').innerHTML = str;
 }

  </script>

在您的HTML中，

   <input type="number" id="rows" placeholder="Number of rows" />
   <input type="number" id="cols" placeholder="Number of cols" />
   <input type="button" id="submit" value="Submit" onClick="generateTable();" />

   <br>
   <br>
   <div id="output"></div>

Answer 2

这样的事情可能是：

＆＃13;

var rows = 3; //these would be populated by your text field entries
var columns = 2;

function makeTable() {
  html = '<table>';
  
  for(var i=0; i<rows; i++) {						
    html += '<tr>';						
    
    for(var j=0; j<columns; j++) {
      html += '<td><p>Some Data</p></td>';
    }
    
    html += '</tr>';
  }
 
  html += '</table>';
  
  document.getElementById("output").innerHTML = html;
}

＆＃13;

table, td {
  border: 1px solid black; padding: 5px;
}

＆＃13;

<!DOCTYPE html>
	<html>	
		<head>		
			<meta charset="UTF-8">	
			<title>Table Maker</title>
		</head>
		<body>	
			<div id="output" onClick="makeTable()"><h1>Click me to make a table!</h1></div>			
		</body>
	</html>

＆＃13;

Jquery＆amp; HTML - 动态创建div-table

2 个答案: