使用jquery或javascript动态循环创建<tr>内容
现在我要做一个简单的动态添加节点功能有一个下拉框，当我选择里面的值时，比如值是1，就对应的增加一行两列，如果是2就2行两列，……请问使用javascript或者jquer...
现在我要做一个简单的动态添加节点功能
有一个下拉框，当我选择里面的值时，比如值是1，就对应的增加一行两列，如果是2就2行两列，……请问使用javascript或者jquery应该怎么实现？
求代码，谢谢你们的帮助！！这个动态添加的实在不懂，希望可以得到高手们的帮助，谢谢！！ 展开
有一个下拉框，当我选择里面的值时，比如值是1，就对应的增加一行两列，如果是2就2行两列，……请问使用javascript或者jquery应该怎么实现？
求代码，谢谢你们的帮助！！这个动态添加的实在不懂，希望可以得到高手们的帮助，谢谢！！ 展开
3个回答
展开全部
一个比较笨的方法也是最简单的就是判断选择的值 然后去创建表格比如获取到的值是num
var table="<table>";
for(var i=0;i<num;i++)
{
table+=“<tr><td></td><td></td></tr>”;
}
document.GetElementById("要创建表格的容器ID").InnerHTML=table;
这样就可以了
方法二：
这个方法需要你在页面上先定要表格
function aa(num)//这个是你选择的时候调用的js事件 num为行数
{
for(var i=0;i<num;i++)//判断调用创建表格中行的次数
{
CreatTableRows();
}
}
function CreatTableRows(){
var obj = document.getElementById("表格ID");
var hangshu = obj.rows.length;//获取表格现有的行数
var orow = obj.insertRow(-1);//在最后一行后面加一行
var ocell = orow.insertCell(); // 在行里面增加一列
var neirong = " 列里面的内容1";
ocell.innerHTML = neirong;
var ocell = orow.insertCell(); // 在行里面增加一列
var neirong = " 列里面的内容2";
ocell.innerHTML = neirong;
}
var table="<table>";
for(var i=0;i<num;i++)
{
table+=“<tr><td></td><td></td></tr>”;
}
document.GetElementById("要创建表格的容器ID").InnerHTML=table;
这样就可以了
方法二：
这个方法需要你在页面上先定要表格
function aa(num)//这个是你选择的时候调用的js事件 num为行数
{
for(var i=0;i<num;i++)//判断调用创建表格中行的次数
{
CreatTableRows();
}
}
function CreatTableRows(){
var obj = document.getElementById("表格ID");
var hangshu = obj.rows.length;//获取表格现有的行数
var orow = obj.insertRow(-1);//在最后一行后面加一行
var ocell = orow.insertCell(); // 在行里面增加一列
var neirong = " 列里面的内容1";
ocell.innerHTML = neirong;
var ocell = orow.insertCell(); // 在行里面增加一列
var neirong = " 列里面的内容2";
ocell.innerHTML = neirong;
}
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
简单说两句，这个动态添加两个做法：如果节点处理简单，直接构造个节点操作插进去就完了，这个在jQuery里面构造节点的函数就是$()。如果添加的内容比较负责，弄个模板，然后数据一传递，把模板生成内容填进去就行了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
那就按你说的做吧，用jquery，
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
</head>
<body >
<select id="select1" onchange="addTr(this)">
<option value=""> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<table id="table1">
<tr><td> 1</td><td> 2</td></tr>
</table>
<script>
var column=2;
function addTr(obj){
var inner="";
var rows=$(obj).val();
//$(inner).appendTo($("#table1"));
for(var i=0;i<rows;i++){
inner+="<tr>";
for(var j=0;j<column;j++){
inner+="<td>Add"+j+"</td>";
}
inner+="</tr>";
}
$(inner).appendTo($("#table1"));
}
</script>
</body>
</html>
table的tr是累加的，如果需要清除的话,把注释打开就行。
<html>
<head>
<script type="text/javascript" src="jquery-1.4.4.js"></script>
</head>
<body >
<select id="select1" onchange="addTr(this)">
<option value=""> </option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
<table id="table1">
<tr><td> 1</td><td> 2</td></tr>
</table>
<script>
var column=2;
function addTr(obj){
var inner="";
var rows=$(obj).val();
//$(inner).appendTo($("#table1"));
for(var i=0;i<rows;i++){
inner+="<tr>";
for(var j=0;j<column;j++){
inner+="<td>Add"+j+"</td>";
}
inner+="</tr>";
}
$(inner).appendTo($("#table1"));
}
</script>
</body>
</html>
table的tr是累加的，如果需要清除的话,把注释打开就行。
更多追问追答
追问
这个就是可以当点击下拉框时 就可以点击里面的值 对应的就可以添加多少个行和列了么？
追答
行是选择的，列是默认的， 你可以更改。
var column=2;这个就是列。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
