老规矩还是先看效果:
样式有点丑,别在意外表
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'" οnclick="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'\" ο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(); }
到这里全部结束了 有些事情并不是想象的那么难做,不去试一试怎么知道你不行!