script怎么动态添加form表单中的select
<scriptlanguage="javascript"type="text/javascript">functioninsertRow(){varrowNum=docu...
<script language="javascript" type="text/javascript">
function insertRow()
{
var rowNum=document.all.tbl.rows.length-1;
var table1 = document.getElementById("tbl");
var tr1 = document.createElement("tr");
rowNum = rowNum + 1;
//添加一行
var newTr = tbl.insertRow();
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
//设置列内容和属性
newTd0.innerText = rowNum+1+"";
newTd1.innerHTML= '<select style="width:60px" name="cid">
<option value="0">===请选择===</option>
<?php foreach($cid as $vo){ ?>
<?php if($vo['id']==$intid){?>
<option value="<?php echo $vo['id'];?>" selected="selected"><?php echo $vo['name'];?></option>
<?php }else{ ?>
<option value="<?php echo $vo['id'];?>"><?php echo $vo['name'];?></option>
<?php } ?>
<?php } ?>
</select>';
newTd2.innerHTML= '<input type="text" class="input-text " name="qid[]" id="qid" value="" size="9"/>';
newTd3.innerHTML= '<input type="text" class="input-text " name="pcod[]" id="pcod" value="" size="9"/>';
}
function deleteRow(){
var tableObj=document.getElementById("tbl");
var rowNum=document.all.tbl.rows.length-1;
tableObj.deleteRow(rowNum);
}
</script>
上面代码添加input 没有问题,一加进去select就没用了,请高手指点,我不会JS.解决后一定追加分,谢谢! 展开
function insertRow()
{
var rowNum=document.all.tbl.rows.length-1;
var table1 = document.getElementById("tbl");
var tr1 = document.createElement("tr");
rowNum = rowNum + 1;
//添加一行
var newTr = tbl.insertRow();
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
//设置列内容和属性
newTd0.innerText = rowNum+1+"";
newTd1.innerHTML= '<select style="width:60px" name="cid">
<option value="0">===请选择===</option>
<?php foreach($cid as $vo){ ?>
<?php if($vo['id']==$intid){?>
<option value="<?php echo $vo['id'];?>" selected="selected"><?php echo $vo['name'];?></option>
<?php }else{ ?>
<option value="<?php echo $vo['id'];?>"><?php echo $vo['name'];?></option>
<?php } ?>
<?php } ?>
</select>';
newTd2.innerHTML= '<input type="text" class="input-text " name="qid[]" id="qid" value="" size="9"/>';
newTd3.innerHTML= '<input type="text" class="input-text " name="pcod[]" id="pcod" value="" size="9"/>';
}
function deleteRow(){
var tableObj=document.getElementById("tbl");
var rowNum=document.all.tbl.rows.length-1;
tableObj.deleteRow(rowNum);
}
</script>
上面代码添加input 没有问题,一加进去select就没用了,请高手指点,我不会JS.解决后一定追加分,谢谢! 展开
1个回答
展开全部
你的程序有错误若干：
第一点错误，不要使用document.all，这是忌讳；
第二点错误，不要直接使用ID值同名变量获取DOM对象，要使用document.getElementById("ID")的方式；
第三点错误，newTd3.innerHTML你都写出来了，可是前面不对它进行新增行，那程序能插入到哪里去呢？
——————————————————
下面的是修改过后的程序，经过测试，一切正常，我把PHP部分用HTML代替了，毕竟我没得到这些变量：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
function insertRow()
{
var rowNum = document.getElementById("tb1").rows.length-1;
var tbl = document.getElementById("tb1");
var table1 = document.getElementById("tbl");
var tr1 = document.createElement("tr");
rowNum = rowNum + 1;
//添加一行
var newTr = tbl.insertRow();
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
//设置列内容和属性
newTd0.innerText = rowNum+1+"";
newTd1.innerHTML= '<select style="width:60px" name="cid"><option value="0">===请选择===</option><option value="？？" selected="selected">哈哈哈</option><option value="！！">呵呵呵</option></select>';
newTd2.innerHTML= '<input type="text" class="input-text " name="qid[]" id="qid" value="" size="9"/>';
newTd3.innerHTML= '<input type="text" class="input-text " name="pcod[]" id="pcod" value="" size="9"/>';
}
function deleteRow(){
var tableObj=document.getElementById("tbl");
var rowNum=document.all.tbl.rows.length-1;
tableObj.deleteRow(rowNum);
}
</script>
</head>
<body>
<table id="tb1">
</table>
<input type="button" onclick="insertRow()" value='新增'/>
</body>
</html>
第一点错误，不要使用document.all，这是忌讳；
第二点错误，不要直接使用ID值同名变量获取DOM对象，要使用document.getElementById("ID")的方式；
第三点错误，newTd3.innerHTML你都写出来了，可是前面不对它进行新增行，那程序能插入到哪里去呢？
——————————————————
下面的是修改过后的程序，经过测试，一切正常，我把PHP部分用HTML代替了，毕竟我没得到这些变量：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript" type="text/javascript">
function insertRow()
{
var rowNum = document.getElementById("tb1").rows.length-1;
var tbl = document.getElementById("tb1");
var table1 = document.getElementById("tbl");
var tr1 = document.createElement("tr");
rowNum = rowNum + 1;
//添加一行
var newTr = tbl.insertRow();
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
var newTd3 = newTr.insertCell();
//设置列内容和属性
newTd0.innerText = rowNum+1+"";
newTd1.innerHTML= '<select style="width:60px" name="cid"><option value="0">===请选择===</option><option value="？？" selected="selected">哈哈哈</option><option value="！！">呵呵呵</option></select>';
newTd2.innerHTML= '<input type="text" class="input-text " name="qid[]" id="qid" value="" size="9"/>';
newTd3.innerHTML= '<input type="text" class="input-text " name="pcod[]" id="pcod" value="" size="9"/>';
}
function deleteRow(){
var tableObj=document.getElementById("tbl");
var rowNum=document.all.tbl.rows.length-1;
tableObj.deleteRow(rowNum);
}
</script>
</head>
<body>
<table id="tb1">
</table>
<input type="button" onclick="insertRow()" value='新增'/>
</body>
</html>
追问
谢谢,现在deleteRow()用不了了,这个也有错吗,能帮我改正一下吗?
追答
你的tb1和tbl怎么弄混了.....还是我弄混的？
你把删除函数改成下面的这样：
function deleteRow(){
var tableObj=document.getElementById("tb1");
var rowNum=tableObj.rows.length-1;
tableObj.deleteRow(rowNum);
}
另外，table表的ID是tb1，不是tbl,这个要注意下，好像真是我弄错的....
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
