Select 值在 Table 模态内部并填充模态外部的表单?
Select Value In Table Inside Of Modal And Populate The Form Outside Of The Modal?
这第一张图片显示了空窗体,有 3 个样本输入并有自己的名字。
在第二张图片上你会看到里面有 Table 的模态,每个模态都有不同的 name/data.
我想要的是,如果我 select 1 行在那 table 无论我过滤还是点击第二页,外面的表格必须由 select 上的数据填充40=] <td>
.
这是我的示例代码: JSFIDDLE
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Trigger the modal with a button -->
<br> <br>
<button type="button" class="btn btn-info btn-sm pull-right" data-toggle="modal" data-target="#myModal">Show Record</button> <br> <br>
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body">
<form>
<div class="form-group">
<input type="Hidden" name="ID" class="form-control">
</div>
<div class="form-group">
<label>Name</label>
<input type="text" name="Name" class="form-control">
</div>
<div class="form-group">
<label>Bday</label>
<input type="date" name="Bday" class="form-control">
</div>
<div class="form-group">
<label>Age</label>
<input type="number" name="Age" class="form-control">
</div>
<div class="form-group">
<input type="submit" name="Submit" class="btn btn-success">
</div>
</form>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table" id="example">
<thead>
<tr>
<th>Name</th>
<th>Bday</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>10-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name2</td>
<td>9-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name3</td>
<td>8-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name4</td>
<td>7-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name5</td>
<td>6-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name6</td>
<td>10-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name7</td>
<td>9-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name8</td>
<td>8-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name9</td>
<td>7-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name10</td>
<td>6-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name11</td>
<td>6-1-1997</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</html>
我不知道应该如何将模态上的点击值传递给表单。
在此先感谢我希望有人能帮助我。
使用以下步骤填充表单中的值:
1) 捕获数据table
创建的tableobject
var table= $('#example').DataTable();
2) 现在捕获您的 table
的 table body
var tableBody = '#example tbody';
3) 在 tbody
上添加点击事件处理程序
$(tableBody).on('click', 'tr', function () {
var cursor = table.row($(this).parents('tr'));//get the clicked row
var data=cursor.data();// this will give you the data in the current row.
});
4) 现在根据您捕获的数据在表单中设置数据值。例如
$('form').find("input[name='name'][type='text']").val(data.name);
在找出键以获取值之前,请先控制台数据。
或检查这个
Fiddle工作结果
这第一张图片显示了空窗体,有 3 个样本输入并有自己的名字。
在第二张图片上你会看到里面有 Table 的模态,每个模态都有不同的 name/data.
我想要的是,如果我 select 1 行在那 table 无论我过滤还是点击第二页,外面的表格必须由 select 上的数据填充40=] <td>
.
这是我的示例代码: JSFIDDLE
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.16/datatables.min.js"></script>
</head>
<body>
<div class="container-fluid">
<!-- Trigger the modal with a button -->
<br> <br>
<button type="button" class="btn btn-info btn-sm pull-right" data-toggle="modal" data-target="#myModal">Show Record</button> <br> <br>
<div class="panel panel-default">
<div class="panel-heading"></div>
<div class="panel-body">
<form>
<div class="form-group">
<input type="Hidden" name="ID" class="form-control">
</div>
<div class="form-group">
<label>Name</label>
<input type="text" name="Name" class="form-control">
</div>
<div class="form-group">
<label>Bday</label>
<input type="date" name="Bday" class="form-control">
</div>
<div class="form-group">
<label>Age</label>
<input type="number" name="Age" class="form-control">
</div>
<div class="form-group">
<input type="submit" name="Submit" class="btn btn-success">
</div>
</form>
</div>
</div>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="table-responsive">
<table class="table" id="example">
<thead>
<tr>
<th>Name</th>
<th>Bday</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name1</td>
<td>10-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name2</td>
<td>9-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name3</td>
<td>8-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name4</td>
<td>7-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name5</td>
<td>6-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name6</td>
<td>10-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name7</td>
<td>9-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name8</td>
<td>8-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name9</td>
<td>7-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name10</td>
<td>6-1-1997</td>
<td>20</td>
</tr>
<tr>
<td>Name11</td>
<td>6-1-1997</td>
<td>20</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
} );
</script>
</html>
我不知道应该如何将模态上的点击值传递给表单。 在此先感谢我希望有人能帮助我。
使用以下步骤填充表单中的值:
1) 捕获数据table
创建的tableobjectvar table= $('#example').DataTable();
2) 现在捕获您的 table
的 table bodyvar tableBody = '#example tbody';
3) 在 tbody
上添加点击事件处理程序$(tableBody).on('click', 'tr', function () {
var cursor = table.row($(this).parents('tr'));//get the clicked row
var data=cursor.data();// this will give you the data in the current row.
});
4) 现在根据您捕获的数据在表单中设置数据值。例如
$('form').find("input[name='name'][type='text']").val(data.name);
在找出键以获取值之前,请先控制台数据。 或检查这个 Fiddle工作结果