jQuery动态操作表单示例【基于table表格】
程序员文章站
2022-08-12 08:35:52
本文实例讲述了jquery动态操作表单。分享给大家供大家参考，具体如下：
j...</div>
<div class="content">
<p>本文实例讲述了jquery动态操作表单。分享给大家供大家参考，具体如下：</p>
<div class="jb51code">
<pre class="brush: javascript;">
<html>
<head>
<title>jquery表格操作</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<style type="text/css">
table
{
border: black solid 1px;
border-collapse: collapse;
}
td
{
border: black solid 1px;
padding: 3px;
}
.td_num
{
width: 60px;
text-align: center;
}
.td_item
{
width: 160px;
text-align: center;
}
.td_oper
{
width: 120px;
text-align: center;
}
.td_oper span
{
cursor: pointer;
}
</style>
</head>
<body>
<table>
<tr>
<td class='td_num'>
序号
</td>
<td class='td_item'>
步骤名称
</td>
<td class='td_item'>
步骤描述
</td>
<td class='td_oper'>
相关操作 <a href="#" rel="external nofollow" onclick="add_line();">添加</a>
</td>
</tr>
</table>
<table id="content">
</table>
<input type="button" value="提交数据" id="btnsubmit" onclick="savedata()" />
</body>
</html>
<script type="text/javascript">
var currentstep = 0;
var max_line_num = 0;
//添加新记录
function add_line() {
max_line_num = $("#content tr:last-child").children("td").html();
if (max_line_num == null) {
max_line_num = 1;
}
else {
max_line_num = parseint(max_line_num);
max_line_num += 1;
}
$('#content').append(
"<tr id='line" + max_line_num + "'>" +
"<td class='td_num'>" + max_line_num + "</td>" +
"<td class='td_item'><input type='text' class='stepname' value='步骤名称" + max_line_num + "'></input></td>" +
"<td class='td_item'><input type='text' class='stepdescription' value='步骤描述" + max_line_num + "'></td>" +
"<td class='td_oper'>" +
"<span onclick='up_exchange_line(this);'>上移</span> " +
"<span onclick='down_exchange_line(this);'>下移</span> " +
"<span onclick='remove_line(this);'>删除</span> " +
"</td>" +
"</tr>");
}
//删除选择记录
function remove_line(index) {
if (index != null) {
currentstep = $(index).parent().parent().find("td:first-child").html();
}
if (currentstep == 0) {
alert('请选择一项!');
return false;
}
if (confirm("确定要删除改记录吗？")) {
$("#content tr").each(function () {
var seq = parseint($(this).children("td").html());
if (seq == currentstep) { $(this).remove(); }
if (seq > currentstep) { $(this).children("td").each(function (i) { if (i == 0) $(this).html(seq - 1); }); }
});
}
}
//上移
function up_exchange_line(index) {
if (index != null) {
currentstep = $(index).parent().parent().find("td:first-child").html();
}
if (currentstep == 0) {
alert('请选择一项!');
return false;
}
if (currentstep <= 1) {
alert('已经是最顶项了!');
return false;
}
var upstep = currentstep - 1;
//修改序号
$('#line' + upstep + " td:first-child").html(currentstep);
$('#line' + currentstep + " td:first-child").html(upstep);
//取得两行的内容
var upcontent = $('#line' + upstep).html();
var currentcontent = $('#line' + currentstep).html();
$('#line' + upstep).html(currentcontent);
//交换当前行与上一行内容
$('#line' + currentstep).html(upcontent);
$('#content tr').each(function () { $(this).css("background-color", "#ffffff"); });
$('#line' + upstep).css("background-color", "yellow");
event.stoppropagation(); //阻止事件冒泡
}
//下移
function down_exchange_line(index) {
if (index != null) {
currentstep = $(index).parent().parent().find("td:first-child").html();
}
if (currentstep == 0) {
alert('请选择一项!');
return false;
}
if (currentstep >= max_line_num) {
alert('已经是最后一项了!');
return false;
}
var nextstep = parseint(currentstep) + 1;
//修改序号
$('#line' + nextstep + " td:first-child").html(currentstep);
$('#line' + currentstep + " td:first-child").html(nextstep);
//取得两行的内容
var nextcontent = $('#line' + nextstep).html();
var currentcontent = $('#line' + currentstep).html();
//交换当前行与上一行内容
$('#line' + nextstep).html(currentcontent);
$('#line' + currentstep).html(nextcontent);
$('#content tr').each(function () { $(this).css("background-color", "#ffffff"); });
$('#line' + nextstep).css("background-color", "yellow");
event.stoppropagation(); //阻止事件冒泡
}
//保存数据
function savedata() {
var data = "<root>";
$('#content tr').each(function () {
data += "<item>";
var stepname = $(this).find("td:eq(1)").find("input").val();
var stepdescription = $(this).find("td:eq(2)").find("input").val();
data += " <stepname>" + stepname + "</stepname>";
data += " <stepdescription>" + stepdescription + "</stepdescription>";
data += "<item>";
});
data += "</root>";
alert(data);
}
</script>
</pre>
</div>
<p>使用本站<span style="color: #ff6600"><strong>在线html/css/javascript代码运行工具</strong></span>：<a target="_blank" href="http://tools.jb51.net/code/htmljsrun" rel="nofollow">http://tools.jb51.net/code/htmljsrun</a>，测试运行上述代码可得到如下运行效果：</p>
<p><img onerror="this.src='/statics/superweb999/images/image_error.jpg'"src="/default/index/img?u=aHR0cDovL2ltYWdlczQuMTBxaWFud2FuLmNvbS8xMHFpYW53YW4vMjAxOTA2MDEvYl8wXzIwMTkwNjAxMTk1NDIyODEyNS5wbmc=" alt="jQuery动态操作表单示例【基于table表格】" title="jQuery动态操作表单示例【基于table表格】"></p>
<p>更多关于jquery相关内容感兴趣的读者可查看本站专题：《<a target="_blank" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS8vd3d3LmpiNTEubmV0L3NwZWNpYWwvNTM5Lmh0bQ==" rel="nofollow">jquery表格(table)操作技巧汇总</a>》、《<a target="_blank" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS8vd3d3LmpiNTEubmV0L3NwZWNpYWwvMzU0Lmh0bQ==" rel="nofollow">jquery操作xml技巧总结</a>》、《<a target="_blank" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS8vd3d3LmpiNTEubmV0L3NwZWNpYWwvNDQ5Lmh0bQ==" rel="nofollow">jquery form操作技巧汇总</a>》、《<a target="_blank" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS8vd3d3LmpiNTEubmV0L3NwZWNpYWwvMjAwLmh0bQ==" rel="nofollow">jquery常用插件及用法总结</a>》、《<a target="_blank" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS8vd3d3LmpiNTEubmV0L3NwZWNpYWwvNDUxLmh0bQ==" rel="nofollow">jquery扩展技巧总结</a>》及《<a target="_blank" href="/default/index/url?u=aHR0cHM6Ly93d3cuMTBxaWFud2FuLmNvbS8vd3d3LmpiNTEubmV0L3NwZWNpYWwvNzUuaHRt" rel="nofollow">jquery选择器用法总结</a>》</p>
<p>希望本文所述对大家jquery程序设计有所帮助。</p> </div>
<div class="info-pre-next">
<p>
上一篇： <a href="/article/1800456.html">
基于C#的多边形冲突检测 </a>
</p>
<p>
下一篇： <a href="/article/1800458.html">
机器人要占领世界了！高达模型已经卖出 4.73 亿个 </a>
</p>
</div>
<div class="wz_tuijian">
<p>
推荐阅读 </p>
<ul>
<li>
<a href="/article/1983905.html" target="_blank" title="jQuery实现为table表格动态添加或删除tr功能示例">
<h2>
jQuery实现为table表格动态添加或删除tr功能示例 </h2>
</a>
</li>
<li>
<a href="/article/1800457.html" target="_blank" title="jQuery动态操作表单示例【基于table表格】">
<h2>
jQuery动态操作表单示例【基于table表格】 </h2>
</a>
</li>
<li>
<a href="/article/1585325.html" target="_blank" title="jQuery实现表单动态添加与删除数据操作示例">
<h2>
jQuery实现表单动态添加与删除数据操作示例 </h2>
</a>
</li>
<li>
<a href="/article/1158542.html" target="_blank" title="jQuery实现为table表格动态添加或删除tr功能示例">
<h2>
jQuery实现为table表格动态添加或删除tr功能示例 </h2>
</a>
</li>
<li>
<a href="/article/752609.html" target="_blank" title="基于JQuery的动态删除Table表格的行和列的代码_jquery">
<h2>
基于JQuery的动态删除Table表格的行和列的代码_jquery </h2>
</a>
</li>
<li>
<a href="/article/662279.html" target="_blank" title="jQuery动态操作表单示例【基于table表格】">
<h2>
jQuery动态操作表单示例【基于table表格】 </h2>
</a>
</li>
<li>
<a href="/article/451082.html" target="_blank" title="jQuery实现表单动态添加与删除数据操作示例">
<h2>
jQuery实现表单动态添加与删除数据操作示例 </h2>
</a>
</li>
<li>
<a href="/article/418408.html" target="_blank" title="基于JQuery的动态删除Table表格的行和列的代码_jquery">
<h2>
基于JQuery的动态删除Table表格的行和列的代码_jquery </h2>
</a>
</li>
</ul>
</div>
</article>
</div>
</main>
<footer><div class="box"><div class="ft_nav"><div class="ft_about"><p>关于网站</p><ul><li><a href="/sitemap.xml" target="_blank" title="网站地图">网站地图</a></li><li><a href="/list/2/" title="最新程序员文章站">最新程序员文章站</a></li></ul></div><div class="ft_contact"><ul><li>本站所有数据收集于网络如有侵犯到您的权益，请联系我们进行下架处理。</li><li class="email_show"></li></ul></div></div><div class="copyright"><div class="cr_left"><p> 备案号：<a href="https://beian.miit.gov.cn/#/Integrated/index" target="_blank">粤ICP备20058927号</a></p><p>© Copyright © 2020-2022 www.superweb999.com 程序员文章站. </p></div></div></div></footer> </body>
</html>