gpt4 book ai didi

javascript - jQuery UI 可排序不适用于动态表

转载 作者:行者123 更新时间:2023-12-03 10:40:34 25 4
gpt4 key购买 nike

我正在动态创建一个表并尝试使每一行 (tr) 可排序。我遵循了 jQuery UI 网站上的各种文档,并认为我理解了。但是,我似乎不太明白。

我哪里出错了?谢谢!

 <!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。我还建议将标题放在标题 block 中 --- 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();
});

关于javascript - jQuery UI 可排序不适用于动态表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28800492/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com