一个简单的问题，动态添加的表格中如何实现下拉列表？

代码如下，我想在动态添加行的时候，使其中一个字段是下拉列表，应该如何修改？谢谢。<!--实例2 增加/删除表格-->
<html>
<head>
<script type="text/javascript" src="./Calendar.js"></script>
</head>
<body><a href="javascript:addrow();" style="padding:6px; float:left;">添加选项</a>
<table id="tableSelect" border="0" cellpadding="4" cellspacing="1">
<tr><td width="60">序号</td><td>选项内容</td><td width="60">操作</td></tr>
</table><script type="text/javascript">
var tableSelect = document.getElementById("tableSelect");
var hfSelectCount = document.getElementById("hfSelectCount ");
var hfDelIds = document.getElementById("hfDelIds ");
function addrow()
{
    var r = tableSelect.insertRow(tableSelect.rows.length);//插入一行tr
    var c = r.insertCell(0);//插入一个单元格td
    var rIndex = tableSelect.rows.length - 1;
    c.innerHTML = "<input type=\"text\" id=\"in_date"+ rIndex +"\" name=\"date" + rIndex + "\" readOnly onClick=\"setDay(this);\"/>";
    c = r.insertCell(1);
     c.innerHTML = "<input type=\"text\" id=\"txtSubject_" + rIndex + "\" name=\"txtSubject_" + rIndex + "\"/>";
c = r.insertCell(2);
    c.innerHTML = "<a href='javascript:delrow(" + rIndex + ");'>删除</a>";
    
    hfSelectCount.value = tableSelect.rows.length;
    document.getElementById("txtSubject_" + rIndex).focus();
}
function delrow(index)
{
    var txtSID = document.getElementById("txtSID_" + index);
    if(txtSID)
    {
        hfDelIds.value += "," + txtSID.value;
    }
    tableSelect.deleteRow(index);
    for(var i = index; i < tableSelect.rows.length;i++)
    {
        tableSelect.rows[i].cells[0].innerHTML = i;
        var txtS = tableSelect.rows[i].cells[1].getElementsByTagName("input");
        for(var j = 0; j < txtS.length; j++)
        {
            if(txtS[j].type == "text")
            {
                txtS[j].id = "txtSubject_" + i;
                txtS[j].name = "txtSubject_" + i;
            }
            else
            {
                txtS[j].id = "txtSID_" + i;
                txtS[j].name = "txtSID_" + i;
            }
        }
        tableSelect.rows[i].cells[2].innerHTML = "<a href='javascript:delrow("+i+");'>删除</a>";
    }
    hfSelectCount.value = tableSelect.rows.length;
}
hfSelectCount.value = tableSelect.rows.length;
</script></body>
</html>

解决方案 »

  1.   


    <html>
        <head>   
            <script type="text/javascript" src="./Calendar.js"></script>
        </head>
    <body><a href="javascript:addrow();" style="padding:6px; float:left;">添加选项</a>
    <table id="tableSelect" border="0" cellpadding="4" cellspacing="1">
    <tr><td width="60">序号</td><td>选项内容</td><td width="60">操作</td></tr>
    </table>
     
    <script type="text/javascript">
        var tableSelect = document.getElementById("tableSelect");
        var hfSelectCount = document.getElementById("hfSelectCount ");
        var hfDelIds = document.getElementById("hfDelIds ");
        function addrow() {
            var r = tableSelect.insertRow(tableSelect.rows.length); //插入一行tr
            var c = r.insertCell(0); //插入一个单元格td
            var rIndex = tableSelect.rows.length - 1;
            c.innerHTML = "<input type=\"text\" id=\"in_date" + rIndex + "\" name=\"date" + rIndex + "\" readOnly onClick=\"setDay(this);\"/>";
            c = r.insertCell(1);
            c.innerHTML = " <select id=\"txtSubject_" + rIndex + "\" name=\"txtSubject_" + rIndex + "\"><option>1</option><option>2</option><option>3</option></select>";
            c = r.insertCell(2);
            c.innerHTML = "<a href='javascript:delrow(" + rIndex + ");'>删除</a>";        hfSelectCount.value = tableSelect.rows.length;
            document.getElementById("txtSubject_" + rIndex).focus();
        }
        function delrow(index) {
            var txtSID = document.getElementById("txtSID_" + index);
            if (txtSID) {
                hfDelIds.value += "," + txtSID.value;
            }
            tableSelect.deleteRow(index);
            for (var i = index; i < tableSelect.rows.length; i++) {
                tableSelect.rows[i].cells[0].innerHTML = i;
                var txtS = tableSelect.rows[i].cells[1].getElementsByTagName("input");
                for (var j = 0; j < txtS.length; j++) {
                    if (txtS[j].type == "text") {
                        txtS[j].id = "txtSubject_" + i;
                        txtS[j].name = "txtSubject_" + i;
                    }
                    else {
                        txtS[j].id = "txtSID_" + i;
                        txtS[j].name = "txtSID_" + i;
                    }
                }
                tableSelect.rows[i].cells[2].innerHTML = "<a href='javascript:delrow(" + i + ");'>删除</a>";
            }
            hfSelectCount.value = tableSelect.rows.length;
        }
        hfSelectCount.value = tableSelect.rows.length;
    </script>
     
    </body>
    </html>