JS控制的动态表格

对应的js:

        function pccAddSignRow() { //读取最后一行的行号，存放在LearnTRLastIndex文本框中
            var pccTRLastIndex = findObj("pccTRLastIndex", document);
            var rowID = parseInt(pccTRLastIndex.value);
            var signFrame = findObj("pcc", document);
            //添加行
            var newTR = signFrame.insertRow(signFrame.rows.length);
            newTR.id = "pccItem" + rowID;

            //添加列:产品名称 

            //添加列内容
            var h = '<option >请选择省</option>';
            var id = 1;
            var io = "txtPro" + rowID;
            var tio = "txtCity" + rowID;
            var oio = "txtCounty" + rowID;
            callBizAPI("AddProvince", {//调用ajax获取数据
                id: id
            }, function (result) {//得到结果后：
                for (var i in result) {
                    var iif = result[i].AreaId;
                    var ifro = result[i].AreaName;
                    h += '<option value="' + iif + '">' + ifro + '</option>';
                }

                var newNameTD = newTR.insertCell(0);
                newNameTD.innerHTML = "<select class=\"txtW95\"  id='txtPro" + rowID + "' onchange=\"addcityCopy('" + io + "','" + rowID + "')\" >'" + h + "'</select>";
                //添加列:说明
                var newNameTD = newTR.insertCell(1);
                //添加列内容
                newNameTD.innerHTML = "<select class=\"txtW95\"  id='" + tio + "' onchange=\"addcountyCopy('" + tio + "','" + rowID + "')\"  ></select>";
                var newNameTD = newTR.insertCell(2);
                //添加列内容
                newNameTD.innerHTML = "<select class=\"txtW95\"  id='txtCounty" + rowID + "'></select>";

                //添加列:操作按钮
                var newDeleteTD = newTR.insertCell(3);
                //添加列内容 <button class='toolbtn' id='add" + rowID + "'  onclick=\"pccAddSignRow()\"><img src='images/plus.png' />添加</button> 
                if (iii >= 2) {
                    var currentBtn = document.getElementById("add0");
                    currentBtn.style.display = "none";
                　　newDeleteTD.innerHTML = "<button class='toolbtn'   onclick=\"pccDeleteRow('pccItem" + rowID + "')\" ><img src='images/del.png'/>删除</button>"
                }
                else {
                    newDeleteTD.innerHTML = "<button class='toolbtn'   onclick=\"pccDeleteRow('pccItem" + rowID + "')\" ><img src='images/del.png'/>删除</button>"
                }

                //将行号推进下一行
                pccTRLastIndex.value = (rowID + 1).toString();
            }
            )

        }
        function pccDeleteRow(rowid) {
            var signFrame = findObj("pcc", document);
            var signItem = findObj(rowid, document);

            //获取将要删除的行的Index
            var rowIndex = signItem.rowIndex;

            //删除指定Index的行
            signFrame.deleteRow(rowIndex);
                var currentBtn = document.getElementById("add0");
                currentBtn.removeAttribute("style");

        }

function findObj(theObj, theDoc) {
            var p, i, foundObj;
            if (!theDoc) theDoc = document;
            if ((p = theObj.indexOf("?")) > 0 && parent.frames.length) {
                theDoc = parent.frames[theObj.substring(p + 1)].document;
                theObj = theObj.substring(0, p);
            }
            if (!(foundObj = theDoc[theObj]) && theDoc.all)
                foundObj = theDoc.all[theObj];
            for (i = 0; !foundObj && i < theDoc.forms.length; i++)
                foundObj = theDoc.forms[i][theObj];
            for (i = 0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++)
                foundObj = findObj(theObj, theDoc.layers[i].document);
            if (!foundObj && document.getElementById)
                foundObj = document.getElementById(theObj);
            return foundObj;
        }

对应的aspx:

<table cellpadding="0" cellspacing="0" border="0" align="center" class="tab_add" id="pcc">
                    <tr>
                        <th>省（直辖市）</th>
                        <th>市</th>
                        <th>县（区）</th>
                        <th>操作</th>
                    </tr>//设置第一行要显示的东西
                    <tr>
                        <td>
                            <select id="province" class="txtW95" onchange="addCity();">
                                <option value="">请选择省</option>
                                <%foreach (var item in base.DataProvider.CountyOrArea.Where(t => t.SuperiorEncoding == "").OrderBy(t => t.AreaCode))
                                    {%>//服务端填充下拉框的项
                                <option value="<%=item.AreaId %>"><%=item.AreaName %></option>
                                <%} %>
                            </select>
                        </td>
                        <td>
                            <select id="city" class="txtW95" onchange="addCounty();">
                            </select></td>
                        <td>
                            <select id="county" class="txtW95">
                            </select></td>
                        <td style="width: 25%">
                            <button class="toolbtn" id="add0" onclick="pccAddSignRow();">
                                <img src="data:images/plus.png" />添加</button>
　　　　　　　　　　　　　　　　<button class="toolbtn"  onclick="cpDeleteRow('cpItem0');">
                                <img src="data:images/del.png" />删除</button>
　　　　　　　　　　　　　　　　<input name='pccTRLastIndex' type='hidden' id='pccTRLastIndex' value="1" />//隐藏记录行号
　　　　　　　　　　　　　　</td>
                    </tr>

                </table>