关于用js实现控件联动的问题？

Question

function doAddCtrl(){
 var number = document.myform1.cys.value;
 try{
  var obj = document.myform1.addDiv;
  for(var i=0; i<number; i++){
   obj.insertAdjacentHTML("beforeEnd", "<input><select><option>请选择</option></select>");
     obj.insertAdjacentHTML("beforeEnd", "<tr>")
    obj.insertAdjacentHTML("beforeEnd", "<td align='center'>")
      obj.insertAdjacentHTML("beforeEnd", "<input type='text' name='xm' id='xm' size='15'>")
    obj.insertAdjacentHTML("beforeEnd", "</td>")
    obj.insertAdjacentHTML("beforeEnd", "<td align='center'>")
      obj.insertAdjacentHTML("beforeEnd", "<select name='xb' id='xb'>")
        obj.insertAdjacentHTML("beforeEnd", "<option value='男' selected>男</option>")
        obj.insertAdjacentHTML("beforeEnd", "<option value='女'>女</option>")
      obj.insertAdjacentHTML("beforeEnd", "</select>")
    obj.insertAdjacentHTML("beforeEnd", "</td>")
    obj.insertAdjacentHTML("beforeEnd", "<td align='center'><input name='age' type='text' id='age' size='15'></td>")
    obj.insertAdjacentHTML("beforeEnd", "<td align='center'><input name='gx' type='text' id='gx' size='15'></td>")
    obj.insertAdjacentHTML("beforeEnd", "<td align='center'><input name='sfzh' type='text' id='sfzh' size='20'></td>")
  obj.insertAdjacentHTML("beforeEnd", "</tr>")
  obj.insertAdjacentHTML("beforeEnd", "<tr>")
    obj.insertAdjacentHTML("beforeEnd", "<td align='center'>主要健康问题</td>")
    obj.insertAdjacentHTML("beforeEnd", "<td colspan='4' align='left'><textarea name='zyjkwt' id='zyjkwt' cols='30' rows='5'></textarea></td>")
  obj.insertAdjacentHTML("beforeEnd", "</tr>")
  }
 }
 catch(e){ }
} 
 </Script>
我要通过js实现在文本框中输入数字后，可以根据这个数字相应的生成几行表单控件？
用上面的代码怎么不能实现呢？

Answer 1

单独插入"td"、"tr"、"option"标签是不能的，因为他们不是能独立存在的东东，并且insertAdjacentHTML只能用在IE。可行的方法就是外边补一个table标签。
<input id="cys" type="text" value="2"/>
<div id="addDiv"></div>
<script>
function doAddCtrl() {
    var number = document.getElementById("cys").value;
    try {
        var obj = document.getElementById("addDiv");
var html = [];
        for (var i = 0; i < number; i++) {
html.push("\
<table>\
<tr>\
<td>\
<input><select><option>请选择</option></select>\
</td>\
</tr>\
<tr>\
<td align='center'>\
<input type='text' name='xm' id='xm' size='15'>\
</td>\
<td align='center'>\
<select name='xb' id='xb'>\
<option value='男' selected>男</option>\
<option value='女'>女</option>\
</select>\
</td>\
<td align='center'><input name='age' type='text' id='age' size='15'></td>\
<td align='center'><input name='gx' type='text' id='gx' size='15'></td>\
<td align='center'><input name='sfzh' type='text' id='sfzh' size='20'></td>\
</tr>\
<tr>\
<td align='center'>主要健康问题</td>\
<td colspan='4' align='left'><textarea name='zyjkwt' id='zyjkwt' cols='30' rows='5'></textarea></td>\
</tr>\
</table>\
");
        }
obj.insertAdjacentHTML("beforeEnd", html.join("\n"));
    } catch (e) {
alert(e.message);
}
}doAddCtrl();
</script>高级一点参考jquery的replaceWith实现。