动态建表，可添加/删除一行，每行包括一个可输入的下拉框

是的，这是我从网上找来的：<HTML>
<HEAD>
<META http-equiv='Content-Type' content='text/html; charset=gb2312'>
<TITLE>可输入的下拉框</TITLE>
</HEAD>
<BODY ><div style="position:relative;">
<span style="margin-left:100px;width:18px;overflow:hidden;">
<select style="width:118px;margin-left:-100px" onchange="this.parentNode.nextSibling.value=this.value">
<option value="YOU"> 你 </option>
<option value="MY"> 我 </option>
<option value="HE"> 他 </option>
</select></span><input name="box" style="width:100px;position:absolute;left:0px;">
</div>
</BODY></HTML>这是静态的，但我需要可动态增加的，请教！

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

还是不明白你的意思不过你可以添加的时候完全就把上面的当成添加的内容添加.innerHTML="上面的内容"
因为可输入的下拉框好像就是一个文本框和一个下拉框的叠加，所以我把两个分开来写，下是我正在调试的代码，可以实现添加/删除，不能实现下拉框和文本框的联动，我希望增加的每一行中的文本框都可以即时显示下拉框的选择值，请问下面的代码问题出在哪？该如何修改？<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Test</title>
</head><body>
<script> var textNumber = 1;function change()
{
/*两个都不行*/
document.all.box.value = document.all.select1.value;
document.all.input1.value = document.all.oSelect.value;
}function DeleteTr(i)
{
var table = document.getElementById("table1");
var tr = table.childNodes[0]; tr.removeChild(tr.childNodes[i]);
} function AppendTr()
{
textNumber++;var table = document.getElementById("table1");
var tr = table.childNodes[0]; var trnew = document.createElement("tr");var td1 = document.createElement("td");var oSelect = document.createElement("select");
  oSelect.setAttribute("id","select1");
  oSelect.setAttribute("onChange","change()");
var option11 = document.createElement("option");
  option11.text="A.你";
  option11.value="YOU";
  oSelect.add(option11);
var option12 = document.createElement("option");
  option12.text="B.我";
  option12.value="MY";
  oSelect.add(option12);
var option13 = document.createElement("option");
  option13.text="C.他";
  option13.value="HE";
  oSelect.add(option13);var td2 = document.createElement("td");

var input1 = document.createElement("input");
  input1.setAttribute("name","box");
  input1.setAttribute("id","box" );

td1.appendChild(oSelect);
td2.appendChild(input1); trnew.appendChild(td1);
trnew.appendChild(td2); tr.appendChild(trnew);
} </script> <table  border="0" cellspacing="0"  bgcolor="#CCCCCC" id="table1">
</table> <input type="button" onclick="DeleteTr(0);" value="删除一行">
<input type="button" onclick="AppendTr();" value="插入一行">
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Test</title>
</head><body>
<script> var textNumber = 1;function change()
{
/*两个都不行*/
//document.all.box.value = document.all.select1.value;
//document.all.input1.value = document.all.oSelect.value;
alert("123")
document.getElementById("box").value=document.getElementById("selec").value
}function DeleteTr(i)
{
var table = document.getElementById("table1");
var tr = table.childNodes[0]; tr.removeChild(tr.childNodes[i]);
} function AppendTr()
{
textNumber++;var table = document.getElementById("table1");
var tr = table.childNodes[0]; var trnew = document.createElement("tr");var td1 = document.createElement("td");var oSelect = document.createElement("select");
  oSelect.setAttribute("id","select1");
  oSelect.setAttribute("onChange","change()");
var option11 = document.createElement("option");
  option11.text="A.你";
  option11.value="YOU";
  oSelect.add(option11);
var option12 = document.createElement("option");
  option12.text="B.我";
  option12.value="MY";
  oSelect.add(option12);
var option13 = document.createElement("option");
  option13.text="C.他";
  option13.value="HE";
  oSelect.add(option13);var td2 = document.createElement("td");

var input1 = document.createElement("input");
  input1.setAttribute("name","box");
  input1.setAttribute("id","box" );

//td1.appendChild(oSelect);
td1.innerHTML="<select onchange='change()' id='selec'><option value='YOU'> 你 </option><option value='YOU1'> 你1 </option></select>"
td2.appendChild(input1); trnew.appendChild(td1);
trnew.appendChild(td2); tr.appendChild(trnew);
} </script> <table  border="0" cellspacing="0"  bgcolor="#CCCCCC" id="table1">
</table> <input type="button" onclick="DeleteTr(0);" value="删除一行">
<input type="button" onclick="AppendTr();" value="插入一行">
</body>
</html>
这只是简单的实现，如果添加多个的话，会有问题，
function change()
{
/*两个都不行*/
//document.all.box.value = document.all.select1.value;
//document.all.input1.value = document.all.oSelect.value;
alert("123")
document.getElementById("box").value=document.getElementById("selec").value
}
里面要写别的才行　　不染会出错你的问题主要是　你那样添加的onchange　事件触发不了，事件不是那样添加的
试过了，只有第一行实现了联动，后面添加的都没反应，是不是和后面的box、selec重名的原因？
我不太懂怎么写，但我想问一下，可不可以把document.getElementById("box").value=document.getElementById("selec").value不跳到change()方法获取，直接写到onchange()=后面，改用this.options[this.selectedIndex].value之类的获取当前值，可不可以实现呢？
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>Test</title>
</head><body>
<script> var textNumber = 1;function change(a)
{
/*两个都不行*/
//document.all.box.value = document.all.select1.value;
//document.all.input1.value = document.all.oSelect.value;
alert("123")
//alert(a.value)
//document.getElementById("box").value=document.getElementById("selec").value
//alert(a.parentNode.parentNode.innerHTML)
//a.parentNode.parentNode.parentNode.childNodes[1].childNodes[0].value=a.value
//alert(a.parentNode.parentNode.childNodes[1].value=a.value)
a.parentNode.nextSibling.childNodes[0].value=a.value
}function DeleteTr(i)
{
var table = document.getElementById("table1");
var tr = table.childNodes[0]; tr.removeChild(tr.childNodes[i]);
} function AppendTr()
{
textNumber++;var table = document.getElementById("table1");
var tr = table.childNodes[0]; var trnew = document.createElement("tr");var td1 = document.createElement("td");var oSelect = document.createElement("select");
  oSelect.setAttribute("id","select1");
  oSelect.setAttribute("onChange","change()");
var option11 = document.createElement("option");
  option11.text="A.你";
  option11.value="YOU";
  oSelect.add(option11);
var option12 = document.createElement("option");
  option12.text="B.我";
  option12.value="MY";
  oSelect.add(option12);
var option13 = document.createElement("option");
  option13.text="C.他";
  option13.value="HE";
  oSelect.add(option13);var td2 = document.createElement("td");

var input1 = document.createElement("input");
  input1.setAttribute("name","box");
  input1.setAttribute("id","box" );

//td1.appendChild(oSelect);
td1.innerHTML="<select onchange='change(this)' id='selec'><option value='YOU'> 你 </option><option value='YOU1'> 你1 </option></select>"
td2.appendChild(input1); trnew.appendChild(td1);
trnew.appendChild(td2); tr.appendChild(trnew);
} </script> <table  border="0" cellspacing="0"  bgcolor="#CCCCCC" id="table1">
</table> <input type="button" onclick="DeleteTr(0);" value="删除一行">
<input type="button" onclick="AppendTr();" value="插入一行">
</body>
</html>
function change(a)
{a.parentNode.nextSibling.childNodes[0].value=a.options[a.selectedIndex].value
}也可以
td1.innerHTML="<select onchange='this.parentNode.nextSibling.childNodes[0].value=this.options[this.selectedIndex].value' id='selec'><option value='YOU'> 你 </option><option value='YOU1'> 你1 </option></select>"
不要 change　也可，如上改