动态添加table tr td 表格

老规矩还是先看效果：

动态添加table tr td 表格

样式有点丑，别在意外表

jsp 代码：

<table border="1" style="width: 100%" bordercolor="#C0D4EF" id="schol">
    <tr>
        <th colspan="5" style="font-weight: bold">教育背景</th>
    </tr>
    <tr>
        <th>起止时间</th>
        <th>学校名称</th>
        <th>学制</th>
        <th>专业名称/毕业证</th>
        <th>操作</th>
    </tr>
    <tr>
        <td><input class="easyui-textbox" name="subject"></td>
        <td><input class="easyui-textbox" name="subject"></td>
        <td><input class="easyui-textbox" name="subject"></td>
        <td><input class="easyui-textbox" name="subject"></td>
        <td><a id="schools" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add1'" onclick="addSchol(1)"><font style="color:#444444">增加</font></a></td>
    </tr>
</table>

这里最重要的就是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'\" onclick=\"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\">&nbsp;</span></span></a></td>" +
        "</tr>";
//onclick="delteSchol("+tcount+")"  把生成的随机数传到 下一个要删除的 方法中
        $("#schol").append(tr);
  
}

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

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

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

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

动态添加table tr td 表格

相关推荐