jquery+ajax实现动态加载表单

场景：

springMVC+jquery+ajax+jsp实现在页面中输入数字后，点击按钮，表单中自动加载指定行数据。

1、user实体类

2、创建controller组件类。

toDymyuser（）方法用于跳转到jsp页面

getMyUserClass（）方法用于jsp页面的数据加载来源

3、新增jsp页面

1）、获取当前服务路径bathpath

2）、引入jquery包，这里直接使用的是 http://cdn.static.runoob.com 下的jquery包，在浏览器中输入该地址可访问，即为可用

3）、引入style样式，让页面简洁美观

4）、在script中，使用ajax时，需要传入参数便于动态显示表格，所以需要与controller层交互，这里使用post的方式，并在url中引入controller中设置的地址，数据传输成功后，动态追加到htmltxt中，最后使用jquery选择器将htmltxt传到元素的html即可。

4、使用springMVC必须要配置web.xml文件

5、web.xml中使用到了/spring-mvc-servlet.xml，所以要在web-inf目录下新增该文件

6、启动tomcat，在浏览器中输入： http://localhost:8080/dyuser 。效果如下

你想要的效果是，表格的每一行后面有个“添加”按钮，点击按钮后，会自动复制当前行，添加到当前行的后面，这个效果吧？

假设，我们有这样一个table表格：

<table id="table">

    <tr>

        <td>内容1</td>

        <td>

            <button class="addtr">添加</button>

            <button class="deltr">删除</button>

        </td>

    <tr>

</table>

用jquery来实现“添加”和“删除”的功能：

下面这个是添加：

$("#table").on("click","button.addtr",function(){

    var $tr=$(this).parents("tr")

    $tr.append($tr.clone())

})

下面是删除：

$("#table").on("click","button.deltr",function(){

    var $tr=$(this).parents("tr")

    $tr.remove()

})

可以参考这里，有完整的在线实例演示：

query实例：表格里点击按钮后添加一行，新添加的行附带删除按钮

如下所示：

////在table的第二行的位置添加一行：

var tbl_elm = $("#dgList")

$('<tr><td colspan=\'2\'>xxxxxx</td></tr>').insertBefore($("TR", tbl_elm).eq(1))

////table中指定行第N列合并单元格(合并后会多出一列，删除N+1单元格即可)

var tds = $("#dgList .TableHeader1").find('td')

tds[6].setAttribute("colSpan", "2")

还可以写成：tds[6].attr("rowSpan", 2)

这种格式$("#dgList").find("tr").eq(0).find("td").eq(7).remove()

////juqery 读取table第N行第M列

$("#dgList").find("tr").eq(N).find("td").eq(M)

////合并一行中除个别单元格之外的所有单元格

$("#dgList tr:eq(0) td").each(function () {

if ($(this).text() != '租赁资源' &&$(this).text() != '用地规范') {

$(this).attr("rowspan", "2")

}

})

////指定行插入指定行后面

$('<tr><td>租赁资源</td><td>用地规范</td></tr>').insertAfter($("#dgList tr:eq(0)"))

---