将表格中的数据传到模态框中

最新推荐文章于 2022-05-22 22:54:38 发布

原创最新推荐文章于 2022-05-22 22:54:38 发布 · 3.5k 阅读

37 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

本文介绍如何在点击按钮后，使用jQuery从表格行中获取数据，并将其填充到模态框中相应的输入框，实现数据的快速更新。通过绑定点击事件，找到当前行并读取各列数据，最后将这些数据映射到模态框内的字段。

1.表格中的数据如下图所示:

在这里插入图片描述

2.在更新按钮上绑定一个点击事件,将按钮当做参数(this)传到方法中

在这里插入图片描述

        		<td>
        			<button type="button" class="btn btn-primary" data-toggle="modal" 
        				data-target=".bs-example-modal-lg" onclick="showDialog(this)"
        				>更新</button>
        			&nbsp;
        			<button class="delete" th:id="${at.id}" th:onclick="deleteActivity(this,id)" >删除</button>
        		</td>
    		</tr>

3.showDialog方法:在点击按钮后,模态框出现

(模态框的显示可参考bootstrap官方文档:链接:https://v3.bootcss.com/javascript/#modals)

	function showDialog(obj){
		 $('#myModal').modal('show');

4.将表格中当前行的数据传递到模态框中显示

4.1.先通过当前按钮找到当前行(parent()找到当前元素的父元素,当前按钮由于是在列(td)中,所以需要两个parent方法,即先找到列(td),再找到行(tr))

4.2.再通过当前行找到当前行的所有列(td)

		 var tds= $(obj).parent().parent().find('td');

4.3.通过class属性,找到模态框中需要填入数据的对应的输入框,然后将通过下标取出对应列中值,将值赋值给对应的输入框

function showDialog(obj){
	//点击更新按钮后展示模态框
	 $('#myModal').modal('show');
	 //获取当前行的所有列
	 var tds= $(obj).parent().parent().find('td');
	 //(".id"):通过class属性获取当前需要填写数据的输入框
	 //$(tds.eq(0)).text():通过下标取得对应列中的值
	 $(".id").val($(tds.eq(0)).text());
	 $(".title").val($(tds.eq(1)).text());
	 $(".category").val($(tds.eq(2)).text());
	 $(".startTime").val($(tds.eq(3)).text());
	 $(".endTime").val($(tds.eq(4)).text());
	 $(".remark").val($(tds.eq(5)).text());
	 $(".state").val($(tds.eq(6)).text());
	 $(".createdTime").val($(tds.eq(7)).text());
	 $(".createdUser").val($(tds.eq(8)).text());
}