JS实现数据在两表格间高效转移的实用方法

74 浏览量更新于2024-08-31 收藏 49KB PDF 举报

本文将详细介绍如何使用JavaScript实现两个HTML表格之间数据的来回转移。在实际项目中，作者遇到了需要在两个表格间共享数据的需求，虽然代码已经实现了基本功能，但界面设计相对简单且可能不够优雅。以下是主要的步骤和技术要点： 1. **HTML结构**: 首先，HTML部分包括doctype声明、`<html>`标签、`<head>`标签，以及元数据如标题（"提货送货"）、关键词和描述。同时，页面样式通过CSS定义，包括链接样式、浮动布局的左侧、中间和右侧三个部分，以及特定元素如输入框的宽度和边框样式。 2. **JavaScript**: - **全选事件处理函数**：`myclick`函数用于处理全选操作，它接收一个参数`itemName`，遍历所有具有相同名称的表单元素（可能是复选框或单选按钮），并设置它们的`checked`属性，实现批量选择或取消选择。 - **数据转移**: - 为了在两个表格之间传输数据，作者可能使用了JavaScript的`getElementById`或`getElementsByTagName`方法来获取表格中的特定元素，例如单元格或行数据。这涉及到对DOM的操作，包括获取、创建新的DOM元素，以及可能的数据复制或序列化。 - 可能有两种数据转移方式： - **直接修改表格数据**: JavaScript可以通过修改表格元素的值或者索引来实现数据的添加、删除或替换。例如，如果两个表格是同构的，可以直接在源表格上操作后，同步目标表格。 - **利用隐藏域或临时变量**: 为了保持前后端数据一致，作者可能会使用隐藏输入字段（如`<input type="hidden">`）作为数据暂存区，从一个表格复制数据到隐藏域，然后在另一个表格读取这个隐藏域的数据。 3. **缺点与优化**: 作者提到代码“写得有点繁琐”，可能是因为没有使用现代前端框架（如React、Vue或Angular），导致代码重复和复杂性较高。未来可以考虑采用库或框架来简化数据操作和界面管理。此外，为了提高用户体验，可以优化界面布局和交互，比如添加确认对话框、实时更新效果等。总结起来，本文的核心知识点是利用JavaScript进行跨表格的数据双向同步，通过DOM操作实现数据的移动，并提供了一个基础的全选事件处理示例。虽然代码目前尚有提升空间，但对于理解如何在HTML页面上使用纯JavaScript处理表格数据是一个很好的起点。

JS实现两表格里数据来回转移的方法实现两表格里数据来回转移的方法

本文实例讲述了JS实现两表格里数据来回转移的方法。分享给大家供大家参考。具体分析如下：

最近做项目里用到了一个两个表格里数据的来回转移,用JS稍微做了下,界面也没有去弄很漂亮

感觉写得有点繁琐了,有时间再改进哈

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

text-decoration: none;

text-align: center;

}

#main{

postion:relation;

}

/*左边层*/

#div1 {

float: left;

postion:relation;

}

#div1 #left{

float:left;

}

/*中间层*/

#div2{

float:left;

margin-top:50px;

}

#div2 #div2_2{

margin-top:15px;

}

/*右边层*/

#div3 {

float: left;

}

#tab_sendValue1 input,#tab_sendValue3 input{

width:40px;

border:none;

}

</style>

//全选事件

function myclick(e,itemName){

var items = document.getElementsByName(itemName);

for(var i = 0;i < items.length;i++){

items[i].checked = e.checked;

}

//移动左边表格的值到右边表格

function sendValueToRight(){

var ary = new Array();

var items = document.getElementsByName("item");

for(var i = 0;i < items.length;i++){

if(items[i].checked){

ary[i] = document.getElementById("id"+items[i].value).parentNode.parentNode.rowIndex;//保存下所选行的索引

moveValueOfLeft(items[i].value);//移值

}

for(var i = ary.length;i >0;i--){

var leftTbody = document.getElementById("tab_sendValue1");

//左边表格的tbody

//判断数组ary里的值是不是行索引

if(!isNaN(ary[i-1])){

leftTbody.deleteRow(ary[i-1]-1);

//移除表格的所选行

}

document.getElementById("check_all").checked = false;

//全选复选框置为false

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38657353

粉丝: 5
资源: 929

JS实现数据在两表格间高效转移的实用方法

JS实现按钮颜色切换效果

js实现表格相同数据合并

利用JS+CSS实现滚动表格数据展示

JS实现表格数据各种搜索功能的方法

JS实现table表格数据排序功能(可支持动态数据+分页效果)

js遍历获取表格内数据的方法(必看)

JS实现向表格中动态添加行的方法

js动态添加表格数据使用insertRow和insertCell实现

JS实现HTML表格排序功能

Vue.js实现表格动态增加删除的方法（附源码下载）

最新资源