In the project, the data in the table is dynamically adjusted, the pop-up box is modified/added, and the selected row is moved and displayed in real time. Therefore, for the secondary exploration of js, jqurey.js needs to be introduced, and the pop-up box uses layer .js is ok
js code is as follows:
function add_line(key,value) {
// var key = prompt('Please enter the list background value and confirm');
//var value = prompt('Please enter the list display value and confirm');
var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\"\"\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]");
if (pattern.test(key)) {
layer.alert('Contains illegal characters!', {icon: 2});
return false;
}
if (pattern.test(value)) {
layer.alert('Contains illegal characters!', {icon: 2});
return false;
}
if (key == null || value == null || key == "" || value == "") {
layer.alert('Please enter the list key value data!', {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('Please select data!', {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('Please select data!', {icon: 2});
return false;
}
if (currentStep <= 1) {
layer.alert('To the top row!', {icon: 2});
return false;
}
var upStep = currentStep - 1;
//modify the serial number
$('#line' + upStep + " td:first-child").html(currentStep);
$('#line' + currentStep + " td:first-child").html(upStep);
// get the contents of two lines
var upContent = $('#line' + upStep).html();
var currentContent = $('#line' + currentStep).html();
$('#line' + upStep).html(currentContent);
//Swap the current line with the previous line
$('#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('Please select data!', {icon: 2});
return false;
}
if (currentStep >= max_line_num) {
layer.alert('The bottom line is reached!', {icon: 2});
return false;
}
var nextStep = parseInt(currentStep) + 1;
//modify the serial number
$('#line' + nextStep + " td:first-child").html(currentStep);
$('#line' + currentStep + " td:first-child").html(nextStep);
// get the contents of two lines
var nextContent = $('#line' + nextStep).html();
var currentContent = $('#line' + currentStep).html();
$('#line' + nextStep).html(currentContent);
//Swap the current line with the previous line
$('#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;
}
//modify a row of data
function update_exchange_line(key,value) {
if (key == null || value == null || key == "" || value == "") {
layer.alert('Please enter the list key value data!', {icon: 2});
return;
}
var pattern = new RegExp("[`~!@#$^&*()=|{}':',\"\"\\[\\]<>/?~！@#￥……&*（）——|{}‘：”“'、？]");
if (pattern.test(key)) {
layer.alert('Contains illegal characters!', {icon: 2});
return false;
}
if (pattern.test(value)) {
layer.alert('Contains illegal characters!', {icon: 2});
return false;
}
//Modify the serial number 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('Please select data!', {icon: 2});
return false;
}
layer.open({
title: 'Please enter the list key, value and confirm!',
content: 'key值:<input type="text" class="key" /><br/><br/>value值 :<input type="text" class="value" />',
btn: ['Confirm', 'Cancel'],
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: 'Please enter the list key, value and confirm!',
content: 'key值:<input type="text" class="key" /><br/><br/>value值 :<input type="text" class="value" />',
btn: ['Confirm', 'Cancel'],
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 code:
<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>