【JS】使用JS动态加载

一、前言

      前几天的项目中遇到了这个问题，点击一个按钮就添加一行，然后可以对这行数据进行操作。当然自己想到的是使用js中的innerHTML这个方法啦，但是要马上做出这个效果还是要试一试的。

二、效果

      要达到的效果如下所示：

三、实现方法

      首先在html或者是jsp或者是aspx页面中有一个表格：

    <table width="95%" border="0" cellpadding="0" cellspacing="0" name="tblFlowCardDetail" id="tblFlowCardDetail">
                    <tr>
                        <td nowrap>
                            <div align="left">
                                <font color="#FF0000">*</font>需方客户代码
                            </div>
                        </td>
                        <td nowrap>
                            <div align="left">
                                需方客户名称
                            </div>
                        </td>
                        <td nowrap>
                            <div align="left">
                                <font color="#FF0000">*</font>物料代码
                            </div>
                        </td>
                        <td nowrap>
                            <div align="left">
                                物料名称
                            </div>
                        </td>
                        <td nowrap>
                            规格
                        </td>
                        <td nowrap>
                            型号
                        </td>
                        <td nowrap>
                            计量单位
                        </td>
                        <td nowrap>
                            <font color="#FF0000">*</font>操作数量
                        </td>
                        <td nowrap>
                            <div align="left">
                                删除
                            </div>
                        </td>
                    </tr>
                </table>

      在js文件中获取到table；table有一个insertRow属性：在表格中的指定位置插入一个新行。

      这里我们通过tblFlowCardDetail.rows.length获取表格的行数，通过tblFlowCardDetail.insertRow(tblFlowCardDetail.rows.length)来插入一行

 function addOneLineOnClick() {
        //insertRow在表格中的指定位置插入一个新行
        var row=tblFlowCardDetail.insertRow(tblFlowCardDetail.rows.length);
        var col = row.insertCell(0); //插入一列
        col.innerHTML = "<input type=\"hidden\" name=\"aimInnerId\" id=\"aimInnerId\"><input readonly=\"true\" maxLength=6 size=6 name=aimId><input type=button  value =...   name=btnSelectAimClient index=\""+ rowIndex +"\" onclick=\"selectAimClient(this.index)\">";
        col = row.insertCell(1);
        col.innerHTML = "<input id=aimName name=aimName size=25 maxlength=25 readonly=\"true\">";
        col = row.insertCell(2);
        col.innerHTML = "<input readonly=\"true\" maxLength=6 size=6 name=itemNo><input type=button  value =...   name=btnSelectItem index=\""+ rowIndex +"\" onclick=\"selectItem(this.index)\">";
        col = row.insertCell(3);
        col.innerHTML = "<input id=itemName name=itemName size=25 maxlength=25 readonly=\"true\">";     
        col = row.insertCell(4);
        col.innerHTML = "<input id=spec name=spec size=10 maxlength=10 readonly=\"true\">";
        col = row.insertCell(5);
        col.innerHTML = "<input id=pattern name=pattern size=10 maxlength=10 readonly=\"true\">";
        col = row.insertCell(6);
        col.innerHTML = "<input id=unit name=unit size=4 maxlength=4 readonly=\"true\">";
        col = row.insertCell(7);
        col.innerHTML = "<input id=qty name=qty size=6 maxlength=6>";
        col = row.insertCell(8);
        col.innerHTML = "<input type='button' value='删除' id=btnDeleteLine name=btnDeleteLine onclick=\"return DeleteRow('row" + rowIndex + "')\">";
        row.setAttribute("id", "row" + rowIndex);
        rowIndex++;
    }

    function DeleteRow(rowTag){
        var i = tblFlowCardDetail.rows(rowTag).rowIndex;
        var j;
        for(j=i;j<=rowIndex;j++) {  
            tblFlowCardDetail.rows(j).cells(0).all("btnSelectAimClient").index--;
            tblFlowCardDetail.rows(j).cells(2).all("btnSelectItem").index--;    
        }
        tblFlowCardDetail.deleteRow(i);
        rowIndex--;
    }

四、小结

      通过分析学习，其实js这里的东西没有什么难度，就是自己需要有一个清楚的思路，加油！这些项目经验是十分宝贵的，一定要注入这种思想，加油！