我怎样才能将我的数组中的数据动态地添加到表格单元格中？ [英] How can I add data from my array to the table cells dynamically?
问题描述
目前我正在使用此代码创建Javascript中的动态表格，但我不知道如何将数据添加到此单元格中？
我是使用以下代码：
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 Transitional // EN http://www.w3.org/TR/html4/loose.dtd\">
< html>
< head>
< title>无标题文档< / title>
< meta http-equiv =Content-Typecontent =text / html; charset = iso-8859-1>
< meta http-equiv =Content-Style-Typecontent =text / css>
< meta http-equiv =Content-Script-Typecontent =text / javascript>
< style type =text / css>
.mytable {
border：1px solid＃000000;
border-collapse：collapse;
width：200px;
}
.mytable td {
background：#cccccc;
border：1px solid＃000000;
}
< / style>
< script type =text / javascript>
onload = function（）{
var nrCols = 1;
var maxRows = 10;
var nrRows = maxRows + 1;
var news = new Array（）;
while（nrRows> maxRows）{
news [0] =one;
nrRows = Number（提示（'多少行？最大'+ maxRows +'允许。'，''））;
}
var root = document.getElementById（'mydiv'）;
var tab = document.createElement（'table'）;
tab.className =mytable;
var tbo = document.createElement（'tbody'）;
var row，cell;
for（var i = 0; i< nrRows; i ++）{
row = document.createElement（'tr'）;
for（var j = 0; j
cell.appendChild（document.createTextNode（news [0]））;
row.appendChild（cell）;
}
tbo.appendChild（row）;
}
tab.appendChild（tbo）;
root.appendChild（tab）;
}
< / script>
< / head>
< body>
< div id =mydivstyle =width：300 px; height：100 px overflow：scroll>< / div>
< / body>
< / html>
<！DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.01 Transitional // ENhttp://www.w3.org/TR/html4/loose.dtd\">
< html>
< head>
< title>无标题文档< / title>
< meta http-equiv =Content-Typecontent =text / html; charset = iso-8859-1>
< meta http-equiv =Content-Style-Typecontent =text / css>
< meta http-equiv =Content-Script-Typecontent =text / javascript>
< style type =text / css>
.mytable {
border：1px solid＃000000;
border-collapse：collapse;
width：200px;
}
.mytable td {
background：#cccccc;
border：1px solid＃000000;
}
< / style>
< script type =text / javascript>
onload = function（）{
var maxRows = 10
var news = new Array（）;
news = ['Sports'，'news'，'international'，'vehicle'，'business']
nrRows =数字（提示（'多少行？最多'+ maxRows + 'allowed。'，''））;
var root = document.getElementById（'mydiv'）;
if（nrRows <= maxRows）{
var tab = document.createElement（'table'）;
tab.className =mytable;
var tbo = document.createElement（'tbody'）;
var row，cell;
for（var i = 0; i< nrRows; i ++）{
row = document.createElement（'tr'）;
row.appendChild（document.createTextNode（news [i]））;
tbo.appendChild（row）;
}
tab.appendChild（tbo）;
root.appendChild（tab）;
}
else {
root.innerHTML ='超过最大行数'
}
}
< / script>
< / head>
< body>
< div id =mydivstyle =width：300px; height：100px overflow：scroll>< / div>
< / body>
< / html>
Currently I am using this code for creating dynamic table in Javascript, but I don't know how to add data from my array to this cells?
I am using following code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.mytable {
border:1px solid #000000;
border-collapse:collapse;
width:200px;
}
.mytable td{
background:#cccccc;
border:1px solid #000000;
}
</style>
<script type="text/javascript">
onload=function(){
var nrCols=1;
var maxRows=10;
var nrRows=maxRows+1;
var news=new Array();
while(nrRows>maxRows){
news[0]="one";
nrRows=Number(prompt('How many rows? Maximum '+maxRows+' allowed.',''));
}
var root=document.getElementById('mydiv');
var tab=document.createElement('table');
tab.className="mytable";
var tbo=document.createElement('tbody');
var row, cell;
for(var i=0;i<nrRows;i++){
row=document.createElement('tr');
for(var j=0;j<nrCols;j++){
cell=document.createElement('td');
cell.appendChild(document.createTextNode(news[0]));
row.appendChild(cell);
}
tbo.appendChild(row);
}
tab.appendChild(tbo);
root.appendChild(tab);
}
</script>
</head>
<body>
<div id="mydiv" style="width:300 px;height:100 px overflow:scroll"></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<style type="text/css">
.mytable {
border:1px solid #000000;
border-collapse:collapse;
width:200px;
}
.mytable td{
background:#cccccc;
border:1px solid #000000;
}
</style>
<script type="text/javascript">
onload=function(){
var maxRows = 10
var news=new Array();
news = ['Sports','news','international','vehicle','business']
nrRows=Number(prompt('How many rows? Maximum '+maxRows+' allowed.',''));
var root=document.getElementById('mydiv');
if (nrRows <= maxRows) {
var tab=document.createElement('table');
tab.className="mytable";
var tbo=document.createElement('tbody');
var row, cell;
for(var i=0;i<nrRows;i++){
row=document.createElement('tr');
row.appendChild(document.createTextNode(news[i]));
tbo.appendChild(row);
}
tab.appendChild(tbo);
root.appendChild(tab);
}
else {
root.innerHTML = 'max rows exceeded'
}
}
</script>
</head>
<body>
<div id="mydiv" style="width:300px;height:100px overflow:scroll"></div>
</body>
</html>
这篇关于我怎样才能将我的数组中的数据动态地添加到表格单元格中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
