在项目中遇到对table中的数据进行动态调整,弹框修改/新增,并对选定某行移动且实时显示,所以对js进行二次探索,需引入jqurey.js、弹框使用layer.js就ok了
js代码如下:
function add_line(key,value) { // var key = prompt('请输入列表后台value值,并确认'); //var value = prompt('请输入列表显示值,并确认'); var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\"\"\\[\\].<>/?~!@#¥……&*()——|{}【】‘;:”“'。,、?]"); if (pattern.test(key)) { layer.alert('包含非法字符!', {icon: 2}); return false; } if (pattern.test(value)) { layer.alert('包含非法字符!', {icon: 2}); return false; } if (key == null || value == null || key == "" || value == "") { layer.alert('请输入列表键值数据!', {icon: 2}); return; } 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 + "' onclick='lineclick(this);'><td style='text-align:center;display:table-cell;vertical-align:inherit; padding:6px !important;height:26px; width:22% ' >" + max_line_num + "</td><td style='text-align:center;display:table-cell;vertical-align:inherit;padding:6px !important;height: 26px;width:33% ' >" + key + "</td><td style='text-align:center;display:table-cell;vertical-align:inherit;padding:6px !important;height:26px;width:45% ' >" + value + "</td></tr>"); } function remove_line() { if (currentStep == 0) { layer.alert('请选择数据!', {icon: 2}); return false; } $("#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); }); if(seq>currentStep){ $("#line"+seq).attr("id","line"+(seq-1)); } } ); max_line_num=max_line_num-1; currentStep = 0; } function up_exchange_line() { if (currentStep == 0) { layer.alert('请选择数据!', {icon: 2}); return false; } if (currentStep <= 1) { layer.alert('已至最顶行!', {icon: 2}); 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", " #7F9DB9"); currentStep = upStep; } function down_exchange_line() { if (currentStep == 0) { layer.alert('请选择数据!', {icon: 2}); return false; } if (currentStep >= max_line_num) { layer.alert('已至最底行!', {icon: 2}); 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", " #7F9DB9"); currentStep = nextStep; } function lineclick(line) { $('#content tr').each(function () { $(this).css("background-color", "#ffffff"); }); $(line).children("td").css("background-colo", " #7F9DB9"); var seq = $(line).children("td").html(); $(line).css("background-color", " #7F9DB9"); currentStep = seq; } //修改某行数据 function update_exchange_line(key,value) { if (key == null || value == null || key == "" || value == "") { layer.alert('请输入列表键值数据!', {icon: 2}); return; } var pattern = new RegExp("[`~!@#$^&*()=|{}':',\"\"\\[\\]<>/?~!@#¥……&*()——|{}‘:”“'、?]"); if (pattern.test(key)) { layer.alert('包含非法字符!', {icon: 2}); return false; } if (pattern.test(value)) { layer.alert('包含非法字符!', {icon: 2}); return false; } //修改序号td:nth-child(2)" $('#line' + currentStep + " td:nth-child(2)").html(key); $('#line' + currentStep + " td:nth-child(3)").html(value); $('#line' + currentStep).css("background-color", "#ffffff"); currentStep = 0; } function updateContent(){ if (currentStep == 0) { layer.alert('请选择数据!', {icon: 2}); return false; } layer.open({ title: '请输入列表key,value值,并确认!', content: 'key值:<input type="text" class="key" /><br/><br/>value值 :<input type="text" class="value" />', btn: ['确认', '取消'], yes: function(index, layero) { var key=layero.find(".key").val(); var value=layero.find(".value").val(); update_exchange_line(key,value); layer.close(index); }, btn2: function(index, layero) { layer.close(index); }, cancel: function(index, layero) { layer.close(index); } }); } function inputContent(){ layer.open({ title: '请输入列表key,value值,并确认!', content: 'key值:<input type="text" class="key" /><br/><br/>value值 :<input type="text" class="value" />', btn: ['确认', '取消'], yes: function(index, layero) { var key=layero.find(".key").val(); var value=layero.find(".value").val(); add_line(key,value); layer.close(index); }, btn2: function(index, layero) { layer.close(index); }, cancel: function(index, layero) { layer.close(index); } }); }
html代码:
<table style="width: 100%"> <thead> <tr class="thead"> <th colspan="3"> <a href="JavaScript:void(0);"background-color: #0000cc"><span class="align-center" style="font-size:20px;color: #00a346;width: 100px;display:inline-block" title="添加单个" onclick="inputContent();">+</span></a> <a href="JavaScript:void(0);" background-color: #0000cc"><span class="align-center" style="font-size:20px;color: #00a0e9;width: 100px;display:inline-block" title="向上移动" onclick="up_exchange_line();">↑</span></a> <a href="JavaScript:void(0);" background-color: #0000cc"><span class="align-center" style="font-size:20px;color: #0D93BF;width: 100px;display:inline-block" title="向下移动" onclick="down_exchange_line();">↓</span></a> <a href="JavaScript:void(0);" background-color: #0000cc"><span class="align-center" style="font-size:20px;color: blue;width: 50px;display:inline-block" title="修改某行" onclick="updateContent();">✎</span></a> <a href="JavaScript:void(0);" background-color: #0000cc"><span class="align-center" style="font-size:20px;color: red;width: 100px;display:inline-block" title="删除选中" onclick="remove_line();">×</span></a> </th> </tr> </thead> <tbody> <tr> <td style="text-align: center; width: 22% ">序号</td> <td style="text-align: center; width: 33% ">键(key)</td> <td style="text-align: center; width: 45% ">值(value)</td> </tr> </tbody> </table> <table id="content" style="clear:both; width:100%; margin-top: 8px;table-layout:fixed"> </table>
相关推荐
NULL 博文链接:https://lee20101029.iteye.com/blog/870156
js动态创建table点击按钮dom table tr添加操作
主要介绍了JS实现动态修改table及合并单元格的方法,结合完整实例形式分析了JS动态遍历及修改table单元格的具体操作技巧,需要的朋友可以参考下
本文代码主要实现了javascript如何操作table并动态添加行的方法
1.js动态生成table,对table的创建,添行,删行操作
js 代码操作 table 排序功能
资源提供js操作html、table导出生成excel文件,代码简介易懂
一个JS写的 操作table大全 里面包括合并 拆分。删除 添加 基本都有。如果还要实现特殊的效果 请大家自己改造改造
通过js动态操作table(新增,删除相关列信息)的实现代码,需要的朋友可以参考下
table动态添加行并进行行数据编辑,数据修改等操作,动态操作table
低调发布,因为是小样版本,集成了几个简单的方法...写此类的目的一个事方便操作table二是可以引入ajax做无刷新分页啥的 当然这些还没做 只是最简单实用的方法 争取尽快完善,引入ajax元素。尽请期待。 demo地址: ...
js操作table的特效分享
使用javascript脚本向页面中的table添加和删除行
JavaScript操作select JavaScript操作table
针对Table的操作,针对Table增加/删除 行和列,向上移,向下移.etc
通过js来操作table行的动态添加删除,进行相关的操作
使用js动态添加行,简单而方便,所以操作table。
用于动态操作表格~~~~~~~~~~~~~~~~~~~~~~·
使用javascript实现table动态增加删除行列。
javascript 操作 table的一个例子. 可以下去研究下