在项目中遇到对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添加操作
本文代码主要实现了javascript如何操作table并动态添加行的方法
1.js动态生成table,对table的创建，添行，删行操作
主要介绍了JS实现动态修改table及合并单元格的方法,结合完整实例形式分析了JS动态遍历及修改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的一个例子. 可以下去研究下