动态添加table tr td 表格

妖狐艹你老母 2022-05-09 02:48 279阅读 0赞

老规矩还是先看效果：

![70][]

样式有点丑，别在意外表

jsp 代码：

这里最重要的就是id=”schol“ 别大意喽

接下来就是重点喽（js）：

function addSchol(V){
    //这里是生成0-20的 随机数   
        var tcount=Math.floor(Math.random()*20);
    //把生成的随机数 赋予 生成的新的tr 标签  用于删除下面会讲到
        var tr="<tr id='t"+tcount+"'>" +
            "<td><input class=\"easyui-textbox textbox-f\" style=\"display: none;\" textboxname=\"subject\"><span class=\"textbox\" ><input id=\"_easyui_textbox_input30\" class=\"textbox-text validatebox-text textbox-prompt\"  style=\"margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px;\" type=\"text\"><input class=\"textbox-value\" name=\"subject\" value=\"\" type=\"hidden\"></span></td>" +
            "<td><input class=\"easyui-textbox textbox-f\" style=\"display: none;\" textboxname=\"subject\"><span class=\"textbox\"><input id=\"_easyui_textbox_input30\" class=\"textbox-text validatebox-text textbox-prompt\"  style=\"margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; \" type=\"text\"><input class=\"textbox-value\" name=\"subject\" value=\"\" type=\"hidden\"></span></td>" +
            "<td><input class=\"easyui-textbox textbox-f\" style=\"display: none;\" textboxname=\"subject\"><span class=\"textbox\"><input id=\"_easyui_textbox_input30\" class=\"textbox-text validatebox-text textbox-prompt\"  style=\"margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; \" type=\"text\"><input class=\"textbox-value\" name=\"subject\" value=\"\" type=\"hidden\"></span></td>" +
            "<td><input class=\"easyui-textbox textbox-f\" style=\"display: none;\" textboxname=\"subject\"><span class=\"textbox\"><input id=\"_easyui_textbox_input30\" class=\"textbox-text validatebox-text textbox-prompt\"  style=\"margin: 0px; padding-top: 0px; padding-bottom: 0px; height: 22px; line-height: 22px; \" type=\"text\"><input class=\"textbox-value\" name=\"subject\" value=\"\" type=\"hidden\"></span></td>" +
            "<td><a id=\"school\" href=\"#\" class=\"easyui-linkbutton l-btn l-btn-small\" data-
    options=\"iconCls:'icon-delete'\" οnclick=\"delteSchol("+tcount+")\" group=\"\"><span class=\"l-btn-left l-btn-icon-left\"><span class=\"l-btn-text\"><font style=\"color:red\">删除</font></span><span class=\"l-btn-icon icon-stop\"> </span></span></a></td>" +
            "</tr>";
    //οnclick="delteSchol("+tcount+")"  把生成的随机数传到 下一个要删除的 方法中
            $("#schol").append(tr);
      
    }

这里就实现了动态添加 表格

现在就讲一下删除表格 很简单 一行代码

function delteSchol(value){
        $("#t"+value+"").remove();
    }

到这里全部结束了 有些事情并不是想象的那么难做，不去试一试怎么知道你不行！

[70]: /images/20220509/1d53e2fc236e497caaac8ab3b1c07521.png