使用 javascript 创建动态表，给定文本框中的行和列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11223643/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Creating dynamic tables using javascript, given rows and column in textboxes
提问by jsborn17
I am back with a problem again (please cooperate with my silly questions, i am very new to JavaScript). I am trying for understanding the concept of dynamic tables in JavaScript. Of course i went through Google, but unable to understand the concept :(
我又回来了（请配合我的愚蠢问题，我对 JavaScript 很陌生）。我正在尝试理解 JavaScript 中动态表的概念。当然我通过谷歌，但无法理解这个概念:(
What I have is two text boxes (tb1, tb2) for entering number of rows & number of columns respectively. So when I click on the button (b1), it should create the table as per given number of rows and columns in the text boxes. This is what I know so far..
我有两个文本框（tb1，tb2），分别用于输入行数和列数。因此，当我单击按钮 (b1) 时，它应该根据文本框中给定的行数和列数创建表格。这是我目前所知道的..
<script type = "text/javascript">
function createTable(){
var a = document.getElementById("tb1").value;
var b = document.getElementById("tb2").value;
if(a=="" || b==""){
alert("Please enter some numeric value");
}else{
.......the creating table code goes here.....
}
}
}
</script>
I will be calling createTable function in button onClick="createTable()". Any help is most appreciated.
我将在按钮 onClick="createTable()" 中调用 createTable 函数。非常感谢任何帮助。
采纳答案by micadelli
JS
JS
function createTable() {
var a, b, tableElem, rowElem, colElem;
a = document.getElementById('tb1').value;
b = document.getElementById('tb2').value;
if (a == "" || b == "") {
alert("Please enter some numeric value");
} else {
tableElem = document.createElement('table');
for (var i = 0; i < a; i++) {
rowElem = document.createElement('tr');
for (var j = 0; j < b; j++) {
colElem = document.createElement('td');
colElem.appendChild(document.createTextNode(j + 1)); //to print cell number
rowElem.appendChild(colElem);
}
tableElem.appendChild(rowElem);
}
document.body.appendChild(tableElem);
}
}
JSFiddle
http://jsfiddle.net/mprRb/1/
JSFiddle
http://jsfiddle.net/mprRb/1/
回答by Ashwin Singh
Here is your function:
这是你的功能：
function createTable(){
var a = document.getElementById("tb1").value;
var b = document.getElementById("tb2").value;
if(a=="" || b==""){
alert("Please enter some numeric value");
}else{
row=new Array();
cell=new Array();
row_num=parseInt(a); //edit this value to suit
cell_num=parseInt(b); //edit this value to suit
tab=document.createElement('table');
tab.setAttribute('id','newtable');
tbo=document.createElement('tbody');
for(c=0;c<row_num;c++){
row[c]=document.createElement('tr');
for(k=0;k<cell_num;k++) {
cell[k]=document.createElement('td');
cont=document.createTextNode((c+1)*(k+1))
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
tbo.appendChild(row[c]);
}
tab.appendChild(tbo);
document.getElementById('mytable').appendChild(tab);//'myTable' is the parent control of your table, change it as per your requirements
}
}
}
Add this attribute to your button b1 onclick="createTable();"
将此属性添加到您的按钮 b1 onclick="createTable();"
回答by Th0rndike
here's another solution using innerHTML
这是使用innerHTML的另一个解决方案
<script type = "text/javascript">
function createTable(){
var a = document.getElementById("tb1").value;
var b = document.getElementById("tb2").value;
var resultTable = '<table>';
if(a=="" || b==""){
alert("Please enter some numeric value");
}else{
for(var i=0;i<parseInt(a);i++){
resultTable += '<tr>';
for (var j=0;j<parseInt(b);j++)
resultTable +='<td><\/td>';
}
resultTable +='<\/tr>';
}
resultTable+='<\/table';
}
return resultTable;
}
</script>
after that, just add the result to whatever element you want using innerHTML, for example, if you have:
之后，只需使用innerHTML将结果添加到您想要的任何元素，例如，如果您有：
<div id='myElement'></div>
then you can add the table to the element (inside any js function) like this:
然后您可以将表格添加到元素（在任何 js 函数内），如下所示：
var targetElement = document.getElementById('myElement');
targetElement.innerHTML = createTable();
otherwise, you can just delete the line:
否则，您可以删除该行：
return resultTable;
and add the table to the element directly inside the function, like this:
并将表格直接添加到函数内部的元素中，如下所示：
var target = document.getElementById('myElement');
target.innerHTML=resultTable;
