Javascript 如何通过模式向jQuery表中插入新条目？
我有一个数据表，我想通过模式添加额外的信息。步骤：Javascript 如何通过模式向jQuery表中插入新条目？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我有一个数据表，我想通过模式添加额外的信息。步骤： 模特坐在桌子上方 单击“模式”按钮 在模式对话框中输入表单的信息 单击提交并关闭模式，数据显示在表中 如果您对以下代码有任何帮助，我们将不胜感激 脚本： $(document).ready(function() { var exampleDatatable = $('#example').DataTable({ responsive: { details: { ty
$(document).ready(function() {
var exampleDatatable = $('#example').DataTable({
responsive: {
details: {
type: 'column',
target: 'tr'
}
},
columnDefs: [ {
className: 'control',
orderable: false,
targets: 1
} ],
order: [ 1, 'asc' ],
bFilter: true,
bLengthChange: true,
pagingType: "simple",
"paging": true,
"searching": true,
"language": {
"info": " _START_ - _END_ of _TOTAL_ ",
"sLengthMenu": "<span class='custom-select-title'>Rows per page:</span> <span class='custom-select'> _MENU_ </span>",
"sSearch": "",
"sSearchPlaceholder": "Search",
"paginate": {
"sNext": " ",
"sPrevious": " "
},
},
dom:
"<'row'<'col-sm-12'tr>>" +
"<'pmd-card-footer' <'pmd-datatable-pagination' l i p>>",
});
$('#enter').click(function(){
$row = $('<tr/>');
cellVal = $("input1").val();
$row.append($("<td/>").text(cellVal));
$('example').append($row);
});
/// Select value
$('.custom-select-info').hide();
$(".custom-select-action").html('<button class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">delete</i></button><button class="btn btn-sm pmd-btn-fab pmd-btn-flat pmd-ripple-effect btn-primary" type="button"><i class="material-icons pmd-sm">more_vert</i></button>');
} );
$（文档）.ready（函数（）{
var exampleDatatable=$（“#示例”）.DataTable({
响应：{
详情：{
键入：“列”，
目标：“tr”
}
},
columnDefs:[{
类名：“控件”，
可订购：错误，
目标：1
} ],
订单：[1，‘asc']，
B过滤器：是的，
bLengthChange：没错，
pagingType：“简单”，
“分页”：正确，
“搜索”：没错，
“语言”：{
“信息”：“总数”的“开始”-“结束”，
“sLengthMenu”：“每页行数：_MENU”，
“搜索”：“搜索”，
“搜索占位符”：“搜索”，
“分页”：{
“sNext”：“，
“以前的”：”
},
},
dom:
"" +
"",
});
$（'#enter'）。单击（函数（）{
$row=$（''）；
cellVal=$（“input1”）.val（）；
$row.append（$（“”）.text（cellVal））；
$（'example'）。追加（$row）；
});
///选择值
$（'.custom select info'）.hide（）；
$（“.custom select action”）.html（'deletemore\u vert'）；
} );
提交新代码
×
新代码
密码
创造
名字
姓
位置
办公室
年龄
阿什顿
考克斯
初级技术作者
旧金山
66
加勒特
冬天
会计
东京
63
阿什顿
考克斯
初级技术作者
旧金山
66
塞德里克
凯莉
高级Javascript开发人员
爱丁堡
22
虎
尼克松
系统架构师
爱丁堡
61
加勒特
冬天
会计
东京
63
阿什顿
考克斯
初级技术作者
旧金山
66
塞德里克
凯莉
高级Javascript开发人员
爱丁堡
22
塞德里克
凯莉
高级Javascript开发人员
爱丁堡
22
阿什顿
考克斯
初级技术作者
旧金山
66
塞德里克
凯莉
高级Javascript开发人员
爱丁堡
22
唐娜
斯奈德
客户支持
纽约
27
唐娜
斯奈德
客户支持
纽约
<section class="row component-section">
<!-- table card code and example -->
<div class="col-md-12">
<div class="component-box">
<!-- table card example -->
<!-- responsive table example -->
<div class="pmd-card pmd-z-depth pmd-card-custom-view">
<div class="pmd-card-body modal-btn">
<div class="row">
<div class="col-md-12 col-sm-12">
<h3><button data-target="#form-dialog" data-toggle="modal" class="btn pmd-ripple-effect btn-primary pmd-z-depth" type="button">Submit a new Code</button></h3>
<div tabindex="-1" class="modal fade" id="form-dialog" style="display: none;" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header bordered">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h2 class="pmd-card-title-text">New Code</h2>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group pmd-textfield pmd-textfield-floating-label">
<label for="first-name">Code</label>
<input type="text" class="mat-input form-control" id="test1" value="">
</div>
</form>
</div>
<div class="pmd-modal-action">
<button data-dismiss="modal" value="submit" id="hello" class="btn pmd-ripple-effect btn-primary" type="submit" href="/referal-page.html">Create</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<table id="example" class="table pmd-table table-hover table-striped display responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>First name</th>
<th>Last name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
</tr>
<tr>
<td>Tiger</td>
<td>Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
</tr>
<tr>
<td>Garrett</td>
<td>Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
</tr>
<tr>
<td>Ashton</td>
<td>Cox</td>
<td>Junior Technical Author</td>
<td>San Francisco</td>
<td>66</td>
</tr>
<tr>
<td>Cedric</td>
<td>Kelly</td>
<td>Senior Javascript Developer</td>
<td>Edinburgh</td>
<td>22</td>
</tr>
<tr>
<td>Donna</td>
<td>Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
</tr>
<tr>
<td>Donna</td>
<td>Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
</tr>
</tbody>
</table>
</div> <!-- responsive table example end -->
</div>
</div> <!-- table card code and example end -->
</section> <!-- table card end -->