`
tangqi609567707
  • 浏览: 36013 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

JS 添加行删除行附带样式

阅读更多


  最近在做一个table的动态添加删除行,可以带有当前行的样式,记录一下。

其中el是在html标签中 onclick="doAddRow(this)"

function doAddRow(el){
el = getParent(el, 'TR'); //TR 是table中的tr,不知道是否区分大小写,有知道的可以说一下哈,没测试过。
var rowIndex = el.rowIndex;
var obj=document.all.tableid;// table 的id
 if (obj==null) return false;
 var rw=document.all.tiaokuan;//tiaokuan是tr的id.
 var nRow=obj.insertRow(rowIndex+1);//向下添加一行,如果为空,默认在最下面添加一行。
 var cel=null;
 for (var i=1; i<rw.cells.length; i++)
 {
   cel=nRow.insertCell();
   cel.innerHTML=rw.cells[i].innerHTML;
   cel.className = rw.cells[i].className;//复制样式
   cel.colSpan = rw.cells[i].colSpan;//复制列所占列数
 }
 //document.getElementById("yjfltk").rowSpan =parseInt(document.getElementById("yjfltk").rowSpan)+1;
 //document.getElementById("qbhsxx").rowSpan =parseInt(document.getElementById("qbhsxx").rowSpan)+1;//我只复制了一样的后两列,所以需要对第一列进行所占的行数+1
 return true;
}

 

 

function doDelRow(el){
el = getParent(el, 'TR'); 
var rowIndex = el.rowIndex; 
el = getParent(el, 'table1'); 
document.all.table1.deleteRow(rowIndex);
document.getElementById("yjfltk").rowSpan =parseInt(document.getElementById("yjfltk").rowSpan)-1;
}

 

function getParent (el, parentTag) {
    do {
        el = el.parentNode; 
    } while (el && el.tagName !== parentTag); 
    return el; 
}

 删除遇到一个问题没有解决:除了第一条原始行外都可以删除,比如说一行四列,我复制的是2,3,4列,对应的第一列实际就是rowspan+n的效果。如果删除第一行原始行,第一列就会没删除,这样问题就来了,如果我保留复制后的 第二行,把原始的第一样删除,那表的格式就会乱掉。我想不允许删除第一行,但是这样做我觉得不是解决问题的办法,各位大神谁有好的建议可以提提,我试一试。

  

 图画完显示总是出问题,见截图。

分享到:
评论

相关推荐

    draw2d.js v2.9.1最新版本附带完整demo

    - 加载库:首先,加载draw2d.js库和所需的CSS样式文件。 - 创建canvas:在HTML中定义canvas元素,并在JavaScript中获取引用。 - 初始化Canvas:使用draw2d.Canvas初始化画布,设置其大小。 - 添加图形:通过create...

    JavaScript权威指南第六版中文版+附带源码

    书中会介绍如何选择元素、添加和删除节点,以及如何修改元素的属性和样式。 6. **BOM与事件处理**:浏览器对象模型(BOM)让JavaScript可以访问浏览器特性,如窗口、历史、存储等。事件处理是JavaScript实现用户...

    附带缩略图的js轮换广告

    【标题】"附带缩略图的js轮换广告"是一种使用JavaScript技术来实现的动态广告展示方式。这种技术在网页设计中广泛应用,为用户提供更丰富的视觉体验,同时也能提高网站的互动性。通过js轮换广告,可以展示多个广告...

    附带缩略图的JS图片轮换 2.rar

    综上所述,"附带缩略图的JS图片轮换2"是一个结合了JavaScript编程、DOM操作、事件处理、动画效果等多方面技术的实例,它展示了如何通过代码实现一个具有交互性和动态性的图片展示系统。理解并掌握这些技术对于任何...

    2048小游戏,js版,附带源码

    在"2048小游戏,js版"中,主要涉及以下几个JavaScript相关的知识点: 1. **DOM操作**:JavaScript通过Document Object Model(DOM)来操作HTML元素。在这个游戏里,每个数字方块都是一个HTML元素,JavaScript会通过...

    附带缩略图的JS图片轮换.rar

    "附带缩略图的JS图片轮换"是一个典型的网页组件,它结合了图片展示和用户交互,通过JavaScript实现图片的自动切换,并且提供了缩略图导航,增强了用户体验。以下是关于这个主题的一些关键知识点: 1. **图片轮换...

    z-tree 所需的js和css文件,附带一个版本的jq文件

    这些文件包含了实现树形视图的逻辑,包括节点的添加、删除、展开和折叠,以及事件处理(如点击、拖拽等)。在Z-Tree的官方文档中,开发者通常会引入一个主JS文件,如`ztree.js`,它包含了Z-Tree的基本功能。如果...

    博客附带插件

    其次,`$(selector).append()`和`$(selector).prepend()`方法则用于向元素内部添加内容,这对于添加新行或者列到表格非常有用。同时,`$(selector).remove()`方法可以删除指定的元素,例如在用户交互时移除表格中的...

    附带摘要的Flash图片代码.rar

    标题中的“附带摘要的Flash图片代码.rar”表明这是一个包含与Flash图片相关的代码资源的压缩文件,可能是一个JavaScript(JS)实现的动态图片展示效果,如焦点图或幻灯片。这种类型的代码通常用于网站设计,使用户...

    最好用的js流程控件gooflow最新版1.0源码

    5. **API接口**:Gooflow的API可能提供了丰富的函数和方法,如添加、删除、移动节点,以及获取和设置节点属性等,使得开发者能够灵活地控制流程图的行为。 6. **兼容性和适应性**:Gooflow作为JavaScript库,应兼容...

    jsp新闻发布系统可以增加修改删除还附带数据库

    - **CSS样式表**:定义了新闻列表、详情页等界面的样式,使网站具有良好的视觉效果。 - **JavaScript脚本**:用于增强用户体验,例如表单验证、分页加载等。 - **图片和其他资源**:新闻中可能包含的图片、图标等...

    Bootstrop table实现增删改查,以及行内编辑,附带数据

    这通常包括Bootstrap的核心样式、jQuery库、Bootstrap Table的主JS文件和其对应的CSS文件。确保正确地链接到这些资源,以保证功能的正常运行。 接着,创建一个基本的HTML表格结构。Bootstrap Table通过JavaScript...

    用html+css+js实现ToDoList

    这段代码监听添加按钮的点击事件,当用户输入任务后,会在列表中创建一个新的任务项,并附带一个删除按钮。删除按钮也有自己的点击事件,用于移除对应的任务项。 在学习过程中,你可能会接触到更高级的概念,如数据...

    javascript权威指南+源码

    对于DOM操作,书中提供了详尽的指导,包括如何选择元素、修改元素属性、添加和删除元素,以及使用CSS样式。这使得开发者能够动态地改变网页内容,实现丰富的用户界面。 在异步编程方面,《JavaScript权威指南》讲解...

    随书光盘+PDF JavaScript DOM编程艺术(第2版)-源代码2.5MB PDF114MB .zip

    总之,"JavaScript DOM编程艺术(第2版)"是Web前端开发者的宝贵资源,它涵盖了从基础到进阶的JavaScript DOM知识,通过随书附带的源代码和PDF,读者可以理论结合实践,提升自己的Web开发技能。无论你是初学者还是经验...

    精美js日历大全,好东西

    4. **事件处理**:强大的日历组件会提供添加、编辑和删除事件的功能,同时可能还有提醒和通知机制。 5. **响应式设计**:考虑到现代网页设计的趋势,这些日历应该具备响应式布局,能够在桌面、平板和手机等不同设备...

    JavaScript网页特效实例大全 (清华大学出版)

    例如,可以通过DOM获取元素、改变元素样式、添加或删除元素,以此来实现网页动态效果。 三、事件处理 JavaScript的事件驱动特性使得网页具有响应用户行为的能力。例如,当用户点击按钮、滚动页面或输入数据时,可以...

    Node.js-一个使用node将word转成html的小工具

    1. **Node.js**: Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境,它使得开发者可以在服务器端使用 JavaScript 编程,从而实现了JavaScript的全栈开发能力。Node.js 具有非阻塞I/O模型和高效的事件驱动,...

    JavaScript DOM编程艺术(第二版)-含源码

    例如,你可以用JavaScript获取某个元素,改变其样式、内容或位置,甚至添加新的元素。 书中涵盖了以下几个关键知识点: 1. **DOM基础**:讲解了DOM的基本概念,包括节点类型、节点关系以及如何通过JavaScript访问...

    最新运营级技术导航系统网址导航系统源码-附带新秀导航全站数据

    2. **链接管理**:添加、编辑、删除网址,支持分类管理。 3. **搜索功能**:快速查找所需网址。 4. **数据分析**:可能包含统计用户行为、热门链接等功能。 5. **自定义设置**:允许运营者根据品牌调整界面样式和...

Global site tag (gtag.js) - Google Analytics