在javascript中创建动态表。 [英] dynamic table creation in javascript.
问题描述
嗨...我实际上正在创建一个页面，我已经包含了一个下拉列表，并且该值绑定从1到5，如果该人选择1，它应该创建一个包含一行和一列的表，如果用户选择2它应该是一行有2列，如果他自动选择三行，有2行的表意味着第1行2列和第2行1列..我在js中尝试了如下：
Hi... i am actually creating a page i have included a drop down and in that values binding from 1 to 5 where if the person selcts 1 it should create a table with one row and 1 column if user selects 2 it should be one row with 2 columns and if he selects three automatically a table with 2 rows means 1st row 2 columns and 2nd row 1 column.. i tried it in js as follows:
<asp:DropDownList ID="drpcolumns" runat="server" onchange="autogeneratetable(this);">
<asp:ListItem Value="">Select number</asp:ListItem>
<asp:ListItem Value="1">1</asp:ListItem>
<asp:ListItem Value="2">2</asp:ListItem>
<asp:ListItem Value="3">3</asp:ListItem>
<asp:ListItem Value="4">4</asp:ListItem>
<asp:ListItem Value="5">5</asp:ListItem>
</asp:DropDownList>
function autogeneratetable(sel)
{
var value = sel.options[sel.selectedIndex].value;
alert(value);
if(value != "Select Number")
{
var row;
cell=new Array();
tab=document.createElement('table');
tab.setAttribute('id','newtable');
//tbo=document.createElement('tbody');
row=document.createElement('tr');
for(c=0;c<value;c++)
{
var col = document.createElement('td'); // create column node
row.appendChild(col);
}
tab.appendChild(row);
document.getElementById('mytable').appendChild(tab);
}
else
{
document.getElementById("ctl00_ContentPlaceHolder1_lblerror").innerHTML = "Please Select a Number!";
}
}
但是我无法看到带有线条的表格意味着边框和列。 ..如果我更改数字它没有显示任何影响页面和没有错误和js中的mytable是一个div名称我将表附加到div。请你帮我生成每行2列的表格。或者让我知道我的代码中有什么问题。提前感谢你！
but i am not able to see the the table with line means border and columns... if i change the number its not showing any effect on page and no error and mytable in js is a div name i am appending table to div. Please can u help me in generating the table like in each row 2 columns. Or let me know whats wrong in my code. Thanking you in advance!
推荐答案
<html>
<head>
</head>
<body önload="CreateTable()">
<h1>My First Web Page</h1>
<script type="text/javascript">
function CreateTable()
{
var tablecontents = "";
tablecontents = "<table>";
for (var i = 0; i < 5; i ++)
{
tablecontents += "<tr>";
tablecontents += "<td>" + i + "</td>";
tablecontents += "<td>" + i * 100 + "</td>";
tablecontents += "<td>" + i * 1000 + "</td>";
tablecontents += "</tr>";
}
tablecontents += "</table>";
document.write(tablecontents);
}
</script>
</body>
</html>
<html>
<head><title>Create Table Dynamically</title>
<script type="text/javascript">
function generate()
{
//declaring variable with create method
var t=document.createElement('table');
var row=document.createElement('tr');
var col=document.createElement('td');
//Append Child/Data, SetAttribute
col.innerHTML="Hello";
row.appendChild(col);
t.appendChild(row);
t.setAttribute("border","1");
//Fetch element where table is created & append
var id=document.getElementById("tbl");
tbl.appendChild(t);
}
</script>
</head>
<body>
<input type="button" name="btngen" value="Generate" onClick="generate()"/>
<!--element div where table will be appended-->
<div id="tbl"></div>
</body>
</html>
<html>
<head>
<script type="text/javascript">
function CreateTable()
{
var tablecontents = "";
tablecontents = "<table>";
for (var i = 0; i < 5; i ++)
{
tablecontents += "<tr>";
tablecontents += "<td>" + i + "</td>";
tablecontents += "<td>" + i * 100 + "</td>";
tablecontents += "<td>" + i * 1000 + "</td>";
tablecontents += "</tr>";
}
tablecontents += "</table>";
document.getElementById("tablespace").innerHTML = tablecontents;
}
</script>
</head>
<body önload="CreateTable()">
<h1>My First Web Page</h1>
<p id="tablespace"></p>
</body>
</html>
这篇关于在javascript中创建动态表。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
