使用js动态添加删除行

麻烦的一笔 2019-09-29 09:51:24



<table id="tbl">

                        <tr>

                            <td style="width: 228px; height: 25px; text-align: right">

                                <span>充装单位名称</span>

                            </td>

                            <td style="width: 500px; height: 25px; text-align: left">

                                 <asp:DropDownList ID="ddlStation" runat="server" Width="300px"></asp:DropDownList>

                            </td>

                        </tr>

                        <tr>

                            <td style="width: 228px; height: 25px; text-align: right">

                                <span>联营单位名称</span>

                            </td>

                            <td style="width: 500px; height: 25px; text-align: left">

                                <asp:DropDownList ID="ddlChainStation" runat="server" Width="300px"></asp:DropDownList>

                            </td>

                        </tr>

                        <tbody id="tbody">

                        <tr>

                            <td style="width: 228px; height: 25px; text-align: right">

                                <span>联营码</span>

                            </td>

                            <td style="width: 500px; height: 25px; text-align: left">

                                <asp:TextBox ID="txtChainCode" runat="server" Width="100px" MaxLength="3"></asp:TextBox>  <span style=" color: #ff0000">3位数字</span>

                                  <input onclick="return addCode()" type="button" id="btnAdd" runat="server" value="添加联营码" />

                            </td>

                        </tr> 

                        </tbody>

                        <tr>

                            <td style="height: 25px; padding-top:10px; text-align: center" colspan="2"> 

                                <asp:Button ID="btnSave" runat="server" Text="提 交" OnClick="btnSave_Click" OnClientClick="return SaveCheck();" />

                                    

                                <asp:Button ID="btnBack" runat="server" Text="返 回" OnClick="btnBack_Click" />

                                <asp:HiddenField ID="hdnId" runat="server" />

                            </td>

                        </tr>  

                    </table>



function addCode() {

            //获取table的总行数

            var nums = document.getElementById("tbl").getElementsByTagName("tr").length;

            var tb = document.getElementById("tbl");

            var tr = tb.insertRow(nums-1);

            var td1 = tr.insertCell();

            td1.innerHTML = "<span>联营码</span>";

            var td2 = tr.insertCell();

            td2.innerHTML = "<input type=\"Text\" ID=\"txtChainCode\" name=\"txtCode\" style=\"width:100px\" MaxLength=\"3\"/>    ";

            td2.innerHTML += "<input type=\"button\" value=\"删除\" onclick=\"return deletetr(this)\">";

            

        }

        function deletetr(This) {

            This.parentNode.parentNode.removeChild(This.parentNode);

        }

主要是2个问题吧，第一个删除行有问题，无法全部删除
第二个就是我在添加行的时候联营码的那列样式无法和之前的保持一致之前的td样式是"width: 228px; height: 25px; text-align: right"

...全文

107 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

麻烦的一笔 2019-09-29

打赏
举报

楼上的兄弟，谢谢，我解决了，给分

麻烦的一笔 2019-09-29

打赏
举报

引用 1 楼三岁打酱油的回复:



 function addCode() {

    // if ('这里判断是否选择充装单位名称、充装单位名称并且联营吗不为空才执行') {



    // }

    //获取table的总行数

    var nums = document.getElementById("tbl").getElementsByTagName("tr").length;

    var tb = document.getElementById("tbl");

    var tr = tb.insertRow(nums - 1);

    var td1 = tr.insertCell();

    td1.innerHTML = "<span>联营码</span>";

    var td2 = tr.insertCell();

    td2.innerHTML =

      '<input type="Text" ID="txtChainCode" name="txtCode" style="width:100px" MaxLength="3"/>';

    td2.innerHTML += '<input type="button" value="删除" onclick="return deletetr(this)">';



  }



  function deletetr(This) {

    // This.parentNode.parentNode.removeChild(This.parentNode);

    This.parentNode.parentNode.remove();

  }

样式无法保持一致那就统一样式，不需要额外在添加的时候给样式.



#tbl tr td input[type=text]{

width: 100px;

}

td2.innerHTML =

      '<input type="Text" ID="txtChainCode" name="txtCode" MaxLength="3"/><input type="button" value="删除" onclick="return deletetr(this)">';

 function deletetr(This) {

    // This.parentNode.parentNode.removeChild(This.parentNode);这个是删除单元格

    This.parentNode.parentNode.remove(); // 删除一行用这个

  }

你可以把我的html代码复制到一文件下，然后看看，我的用脚本添加的联营码和页面生成的联营码样式不一致
td的style里有“width: 228px; height: 25px; text-align: right”，用脚本怎么添加呢

jio可 2019-09-29

打赏
举报


 function addCode() {
    // if ('这里判断是否选择充装单位名称、充装单位名称并且联营吗不为空才执行') {

    // }
    //获取table的总行数
    var nums = document.getElementById("tbl").getElementsByTagName("tr").length;
    var tb = document.getElementById("tbl");
    var tr = tb.insertRow(nums - 1);
    var td1 = tr.insertCell();
    td1.innerHTML = "<span>联营码</span>";
    var td2 = tr.insertCell();
    td2.innerHTML =
      '<input type="Text" ID="txtChainCode" name="txtCode" style="width:100px" MaxLength="3"/>';
    td2.innerHTML += '<input type="button" value="删除" onclick="return deletetr(this)">';

  }

  function deletetr(This) {
    // This.parentNode.parentNode.removeChild(This.parentNode);
    This.parentNode.parentNode.remove();
  }

样式无法保持一致那就统一样式，不需要额外在添加的时候给样式.


#tbl tr td input[type=text]{
width: 100px;
}
td2.innerHTML =
      '<input type="Text" ID="txtChainCode" name="txtCode" MaxLength="3"/><input type="button" value="删除" onclick="return deletetr(this)">';
 function deletetr(This) {
    // This.parentNode.parentNode.removeChild(This.parentNode);这个是删除单元格
    This.parentNode.parentNode.remove(); // 删除一行用这个
  }