jQuery UI排序无法使用动态表
jQuery UI Sortable Not Working With Dynamic Table
我正在动态创建一个表,并试图使每一行(tr)都可排序。我已经阅读了jQueryUI网站上的各种文档,并认为我已经理解了。然而,我似乎不太明白。
我哪里错了?谢谢
<!doctype HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css">
<link href="css/bootstrap-form-helpers.min.css" rel="stylesheet" media="screen">
<link href="jquery-ui.css" type="text/css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript>" href="jquery-ui.js"></script>
<script type="text/javascript" href="bootstrap-2.2.2.min.js"></script>
<script>
$(function() {
$( "tr" ).sortable();
$( "tr" ).disableSelection();
});
</script>
</head>
<body>
<div class="center">
<form id="agenda_form">
<p>Session Title</p>
<input type="text" id="session_title">
<p>Start Time<p>
<input type="number" id="start_time">
<p>End Time</p>
<input type="number" id="end_time">
<input type="submit" value="Submit" id="submit_form">
</form>
<table class="table-striped">
<tr>
<td>Session Title</td>
<td>Start Time</td>
<td>End Time</td>
</tr>
</table>
</div>
<script type="text/javascript">
$("#submit_form").click(function (event) {
event.preventDefault();
var $tr = $('<tr />');
$tr.append($("<td />", { text: $("#session_title").val()} ))
$tr.append($("<td />", { text: $("#start_time").val()} ))
$tr.append($("<td />", { text: $("#end_time").val()} ))
$tr.appendTo("table");
$("#agenda_form").each(function (){
this.reset();
});
});
</script>
</body>
</html>
您需要在jquery选择中使用tbody而不是tr。我还建议你把你的头做成一个扇形块——http://jsfiddle.net/rcottkqx/1/
<div class="center">
<form id="agenda_form">
<p>Session Title</p>
<input type="text" id="session_title">
<p>Start Time
<p>
<input type="number" id="start_time">
<p>End Time</p>
<input type="number" id="end_time">
<input type="submit" value="Submit" id="submit_form">
</form>
<table class="table-striped">
<thead>
<th>Session Title</th>
<th>Start Time</th>
<th>End Time</th>
</thead>
</table>
$("#submit_form").click(function (event) {
event.preventDefault();
var $tr = $('<tr class="t" />');
$tr.append($("<td />", {
text: $("#session_title").val()
}));
$tr.append($("<td />", {
text: $("#start_time").val()
}));
$tr.append($("<td />", {
text: $("#end_time").val()
}));
$tr.appendTo("table");
$("#agenda_form").each(function () {
this.reset();
});
$("tbody").sortable();
$("tbody").disableSelection();
});
相关文章:
- 在有角度的ui网格中设置动态列的问题
- 剑道UI下载列表:如何动态添加新元素
- 语义UI动态下拉菜单重新初始化问题
- jQuery mobile-动态更改ui页面背景颜色
- 动态创建的 jQuery UI 对话框错误后 jQuery 2.2.0 升级
- 动态模板 URL 在角度 ui 路由器中解析时
- AngularJS - ui.router - 如何在动态添加它们后重定向到所需的状态
- 关闭动态创建的 jQuery-ui 对话框
- WordPress + JQuery UI 选项卡 + 动态更改选项卡的宽度
- jQuery UI中的动态url,数据表
- jQuery UI排序无法使用动态表
- 在AngularJS UI路由器中动态更改视图
- 使用ui路由器实现动态URL路由的最佳方式是什么
- 如何将动态模板加载到$uibModal.open()(Angular UI引导程序)中
- angular ui:ui路由器动态路由和状态
- Angular UI Bootstrap Datepicker动态日期(变量)
- 如何从静态ui引导选项卡切换到动态ui选项卡
- 动态ui-sref内部指令
- 在Angular JS中使用HTML版本来渲染动态UI
- 使用Jquery为旋转木马创建动态ui