在项目中遇到对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>
相关推荐
在JavaScript（JS）中，动态操作表格是一种常见的需求，它涉及到HTML DOM（Document Object Model）的元素操作。本文将深入探讨如何使用JavaScript实现对表格的动态添加、删除、修改和查询功能，结合给出的标签...
JavaScript是一种强大的客户端脚本语言，广泛应用于网页交互和动态内容的生成。...以上内容涵盖了JavaScript动态创建Table的基本步骤和相关技术，理解并掌握这些知识点将有助于实现各种复杂的网页交互功能。
本文代码主要实现了javascript如何操作table并动态添加行的方法
在JavaScript中，动态修改表格（Table）以及合并单元格是常见的需求，特别是在处理数据展示或者报表生成时。以下将详细介绍如何使用JS实现这些功能。 首先，要动态修改表格，我们需要获取表格元素。在HTML中，表格...
在JavaScript中，动态生成table是一种常见的网页交互功能，它允许我们根据需求在页面上实时创建、添加或删除表格行（tr）和单元格（td）。这个功能在数据展示、表格编辑或者用户交互丰富的应用场景中非常实用。下面...
### JavaScript 动态生成 Table 及处理 在现代 Web 开发中，动态生成 HTML 元素是一种非常实用的技术，尤其当涉及到数据展示时，如表格（`<table>`）。通过 JavaScript 动态生成表格可以更加灵活地管理和更新数据。...
本主题主要聚焦于如何利用JavaScript动态创建一个包含表格（table）的DOM结构，并且在表格行（tr）中添加可点击的按钮。这通常用于展示数据集，允许用户进行交互操作，比如删除、编辑或查看详情。 首先，我们需要...
3. **JavaScript操作**：使用JavaScript获取表格数据并创建CSV（逗号分隔值）字符串，这是Excel能识别的一种格式。 ```javascript function exportTableToCSV(filename) { var table = document.getElementById('...
在JavaScript中，动态增加table是一种常见的操作，尤其在网页交互和数据展示中。在这个场景中，我们看到的代码是用于JSP页面上的一个功能，它允许用户动态添加表格行（`<tr>`）到已有表格中。以下是相关知识点的详细...
以上就是JS操作table的基本方法和常见应用，通过熟练掌握这些技巧，你可以构建出功能丰富的交互式表格。然而，实际开发中可能需要根据具体需求进行更复杂的定制和优化，这就需要开发者具备深厚的JavaScript和DOM操作...
在JavaScript中，动态修改HTML表格（Table）的内容是一项常见的任务，尤其在网页交互和数据展示时。本篇文章将深入探讨如何使用JavaScript实现这一功能，包括选择表格元素、获取和设置单元格内容，以及监听事件来...
在JavaScript中，对HTML表格（`<table>`）进行排序是一项常见的需求，特别是在动态数据展示和用户交互的应用中。本文将深入探讨如何使用JavaScript实现表格数据的排序功能。 首先，我们要理解HTML表格的基本结构，...
在JavaScript中，动态添加table是一种常见的任务，尤其在构建数据驱动的Web应用时。这个功能允许开发者在用户交互或后台数据变化时实时更新页面上的表格。以下是对这一知识点的详细阐述： 1. **HTML表格基础** 在...
低调发布，因为是小样版本，集成了几个简单的方法...写此类的目的一个事方便操作table二是可以引入ajax做无刷新分页啥的 当然这些还没做 只是最简单实用的方法 争取尽快完善，引入ajax元素。尽请期待。 demo地址： ...
js操作table的特效分享
使用javascript脚本向页面中的table添加和删除行
在网页设计中，JavaScript（JS）是一种常用的客户端脚本语言，用于增强用户的交互体验和动态更新页面内容。本文将深入探讨如何使用JavaScript手动改变HTML表格（table）的宽度，并结合鼠标选中文字查询功能，为用户...
针对Table的操作,针对Table增加/删除 行和列,向上移,向下移.etc
在网页开发中，表格（Table）是展示数据的常用元素，而JavaScript（js）则提供了强大的功能来操作DOM（文档对象模型），包括动态地向表格中添加行。本篇文章将详细探讨如何使用JavaScript高效地实现表格动态添加行，...
JavaScript 动态创建 Table 表格和节点操作 根据提供的文件信息，我们可以总结出以下知识点： 1. 节点操作 在 HTML 文档中，所有内容都是节点，包括文档节点、元素节点、文本节点、属性节点和注释节点。节点操作...