- 浏览: 592658 次
- 性别:
- 来自: 西安
文章分类
最新评论
-
青春依旧:
html5教学哪家强!当然要上华清远见!
深入理解浏览器兼容性模式 -
ashur:
真机智,看得我都笑自己了
js 字符串转dom 和dom 转字符串 -
panghaoyu:
实现一个智能提示功能需要ajax、数据库、jsp/php、算法 ...
solr第一弹 autocomplete(自动补全) -
FakLove:
连线如何删除啊
基于html5 的拖拽连线 -
FakLove:
连线可以再删除吗?
基于html5 的拖拽连线
<body> <table width="100%" id="detailItem"> <tr><td align="center"><b>学历信息</b></td></tr> <table> <table cellspacing="1" cellpadding="1" border="1" width="100%" id="detailItem"> <tbody id="detailItemBody"> <tr> <td nowrap="" width="8%" align="center" class="content_info_items">学校</td> <td nowrap="" width="8%" align="center" class="content_info_items">开始时间</td> <td nowrap="" width="10%" align="center" class="content_info_items">结束时间</td> <td nowrap="" width="10%" align="center" class="content_info_items">学历</td> <td nowrap="" width="18%" align="center" class="content_info_items">专业</td> <td nowrap="" width="8%" align="center" class="content_info_items">毕业?</td> <td width="10%" align="center" class="content_info_items">操作</td> </tr> <tr id="tr1"> <td width="8%" id="td1" > <div align="center"> <input type="text" size="8" name="SampleOrderContentID"/> </div></td> <td nowrap="" width="8%" ><div align="center"><input type="text" size="8" name="ItemNo" id="ItemNo1"/> </div></td> <td nowrap="" width="10%" ><div align="center"> <input type="text" size="10" name="Nickname" id="Nickname1"/></div></td> <td nowrap="" width="10%" ><div align="center"><input type="text" size="8" name="Cleats" id="cleats1"/><div></td> <td nowrap="" width="10%" > <div align="center"><input type="text" size="8"> <div></td> <td nowrap="" width="8%" ><div align="center"><input type="text" size="4" name="Size" id="Size1"/></div></td> <td nowrap="" width="10%" > <!--input name="btnAdd" type="button" id="btnAdd" value="Add" onClick="Add('order-add-line.jsp')"--> <input type="button" onclick="addOrderRow('detailItemBody',2,11,this,'add')" value="Add" id="btnAdd1" name="btnAdd"/> <input type="button" onclick="addOrderRow('detailItemBody',2,11,this,'copy')" value="Copy" id="btnCopy" name="btnCopy"/> <input type="button" onclick="addOrderRow('detailItemBody',2,11,this,'delete')" value="Delete" id="btnDelete" name="btnDelete" style="visibility:hidden "/></td> </tr> </tbody> </table> <script type="text/javascript"> function addOrderRow(tab,rowNum,colNum,obj,addType) { var detailbody=document.getElementById(tab); var row = document.createElement("tr"); var newrow=obj.parentNode.parentNode.innerHTML; if(addType=='add'){ var row = detailbody.insertRow(); for(var i=0;i<obj.parentNode.parentNode.childNodes.length;i++){ var cell=row.insertCell(); cell.innerHTML=obj.parentNode.parentNode.childNodes[i].innerHTML; //如果表单中有值就清空 for(var k=0;k<cell.childNodes.length;k++){ if (cell.childNodes[k].type == 'text') { cell.childNodes[k].value = ''; } if (cell.childNodes[k].type == 'textarea') { cell.childNodes[k].value = ''; } if (cell.childNodes[k].type == 'checkbox') { cell.childNodes[k].checked = false; } if (cell.childNodes[k].type == 'radio') { cell.childNodes[k].checked = false; } if (cell.childNodes[k].type == 'select-multiple') { cell.childNodes[k].selectedIndex = -1; } if (cell.childNodes[k].type == 'select-one') { cell.childNodes[k].selectedIndex = -1; } } //cell.innerHTML=arr[i]; } }else if(addType=='copy'){ //copy //detailbody.insertRow().insertCell().innerHTML = newrow; ok var row = detailbody.insertRow(); for(var i=0;i<obj.parentNode.parentNode.childNodes.length;i++){ var cell=row.insertCell(); cell.innerHTML=obj.parentNode.parentNode.childNodes[i].innerHTML; } }else{ //delete if(confirm("Are you sure to delete this record?")){ obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode); }else{ return false; } } //只显示最后一个add按钮 var leg = detailbody.childNodes.length; if(leg>1){ for(var j=0;j<leg-2;j++){ document.getElementsByName("btnAdd")[j].style.visibility="hidden"; } document.getElementsByName("btnAdd")[leg-2].style.visibility="visible"; //document.getElementsByName("btnDelete")[0].style.visibility="hidden"; } //显示除第一个外所有delete按钮 if(leg>1){ for(var j=1;j<leg-1;j++){ document.getElementsByName("btnDelete")[j].style.visibility="visible"; } } } </script> </body>
发表评论
-
浏览器事件是冒泡还是捕获
2016-07-27 16:37 3020这是三种事件处理的模型 (1)冒泡型事件:事件按照从最特定 ... -
javascript 编程反思1 new 原理
2016-04-27 14:05 0我们在定义对象的时候通常使用两种方式 1:通过new 关键 ... -
javascript 设计模式1 单例模式
2015-06-15 15:10 0... -
facebook html5开发app 失败的原因,
2015-06-08 11:56 1957Here’s why the Facebook iOS a ... -
jQuery zepto 用法区别
2015-05-22 11:50 0以前都是用jQuery 因为移动项目中在使用zepto 基本 ... -
js 加载机制和defer async用法
2015-05-15 17:45 0这是今天我一个 ... -
grunt 不是内部命令
2015-05-04 19:21 1458grunt 不是内部命令!! ... -
你不知道的URL中#井号用法
2015-02-10 12:36 7079URL 中 # 井号的用法 ... -
JS 伪数组原理详解
2014-12-01 11:24 2487jav ... -
jquery 滚动条插件nanoScroller 的用法
2014-11-27 11:17 5699scroller 插件nanoSc ... -
h5,hybrid 开发中问题汇总
2014-10-17 11:26 8205H5开发问题总结 和jqu ... -
backbone中的 reuter 和histroy
2014-10-13 10:45 624Router和History (路由控制) Back ... -
animate 技术分析 raphael
2014-07-28 16:40 0Animate 什么是animate,一般我 ... -
Raphaeljs 插件实现任意SVG节点加载
2014-07-14 09:26 8623SVG 和Raphael http://rap ... -
ECMAScript 5
2014-07-08 14:36 1056新版本在给基本库带来 ... -
jQueryUI Widget 代码详解
2014-07-07 12:20 0为什么需要研究JqueryUI 中Widget 的代码 ... -
typescript 用法介绍
2014-07-01 09:58 1237前言 Typescript的形態 如何定義va ... -
window.eval 与eval 区别
2014-06-27 10:57 1083它们之间有区别吗? 开发过程中似乎很少有人去加个额外的win ... -
jQuery 学习分析系列1 jQuery是个什么东西
2014-06-23 10:06 0jQuery 的基本结构 过去使用jQuery ... -
Sizzle 引擎--原理与实践3
2014-06-18 14:05 787Sizzle引擎--原理与实践(三) 查找的入口对 ...
相关推荐
在网页开发中,jQuery是一个非常流行的JavaScript库,它极大地简化了DOM操作,包括动态地添加和删除表格行。本文将深入探讨如何使用jQuery实现这一功能,以提高网页交互性。 一、HTML基础 首先,我们需要一个基本...
总之,ASP.NET Table控件的自动添加和删除行功能主要依赖于后台代码来处理,通过创建和操作TableRow和TableCell对象,以及利用Table控件的Rows集合。理解这些基础概念和方法,能帮助你更好地构建具有动态交互功能的...
在本话题中,我们将深入探讨如何使用JavaScript来添加和删除HTML表格(table)中的行。这对于构建数据展示或者管理界面非常实用。 首先,让我们了解HTML表格的基本结构。一个简单的HTML表格由`<table>`标签定义,每...
本文将深入探讨`jstable`库中的“行添加”和“行删除”功能,以及如何在实际项目中运用这些功能。 ### jstable简介 `jstable` 是一个轻量级的JavaScript插件,专门用于创建具有Ajax支持的数据表格。它允许用户以...
本文将详细介绍如何使用 jQuery 实现表格的添加、删除行与列的操作。 ### 1. 添加行 添加行通常涉及到在 `<tbody>` 标签内插入新的 `<tr>` 元素。可以使用 jQuery 的 `append()` 方法来完成: ```javascript // ...
这篇教程将专注于如何使用JavaScript动态地添加、删除Table的行,并实现排序功能,包括删除整行和整列。以下是对这些概念的详细解释: 1. **动态添加Table行:** 要动态添加行,我们可以使用`document....
在JavaScript中,表格(Table)是网页数据展示的常用元素,而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先,我们需要了解HTML中的`<table>`元素及其相关...
在`jstable添加行删除行复制行.html`这个示例文件中,可以看到这些概念是如何具体实现的。通过阅读和理解代码,你可以更深入地学习如何利用JavaScript实现表格的动态管理。同时,也可以结合CSS和jQuery等库来增强...
这篇文章主要介绍了如何使用jQuery在指定的HTML表格(table)中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作,包括在表格中动态修改内容。 首先,我们要理解HTML表格的基本结构,一个...
首先,让我们详细了解一下如何使用jQuery添加和删除表格行。在HTML中,表格由`<table>`标签定义,行由`<tr>`标签表示,而单元格则由`<td>`或`<th>`(表头单元格)标签构成。在jQuery中,可以使用`.append()`方法向...
通过上述方法,你可以轻松地实现在表格中添加、删除行和列,为用户提供更灵活的数据展示和交互体验。在实际项目中,结合服务器端的数据操作和Ajax异步请求,可以构建出更加动态、用户友好的表格应用。
在某些交互式应用中,用户可能需要动态地添加或删除表格行,以满足实时编辑和更新数据的需求。"table动态添加行"这个主题就涉及到如何在`HTML`表格中实现这些功能。 首先,我们要理解基本的`HTML`表格结构。一个...
在JavaScript中,对HTML表格(`<table>`元素)进行添加和删除行的操作是常见的前端开发任务,尤其在动态展示数据或用户交互场景下。这篇博文主要探讨如何使用JavaScript实现这些功能。 首先,我们需要理解HTML表格...
table.on('row(demo)', function(obj){ var data = obj.data; //获取当前行数据 var tr = obj.tr; //获取当前行 tr 对象 // 编辑按钮点击事件 $('#editBtn').on('click', function(){ $(tr).find('.layui-...
在JavaScript中,添加和删除表格是常见的操作,特别是在动态网页设计和前端开发中。这篇文章将深入探讨如何使用JavaScript实现这个功能,并提供一个简单的源码示例。首先,我们需要理解HTML表格的基本结构,然后利用...
本文将深入探讨如何使用JavaScript来动态地增加和删除表格(Table)的行。 首先,我们需要了解HTML表格的基本结构。一个基本的表格由`<table>`元素、`<tr>`(表格行)元素、`<td>`(表格数据单元格)元素组成。如果...
本教程将深入探讨如何使用jQuery实现表格(table)的动态添加行和编辑功能,这对于构建数据驱动的Web应用至关重要。 首先,我们需要一个基本的HTML结构来展示表格。一个简单的表格通常包括thead部分(表头)和tbody...
要动态添加行,首先需要创建一个新的TableRow对象,然后向其中添加需要显示的View(如TextView、EditText等)。一旦Row对象填充完成,将其添加到TableLayout的子视图集合中即可。例如: ```java TableRow row = ...
本文将深入探讨如何使用jQuery来动态给table添加和删除行,并对代码进行改进。 首先,让我们看看如何使用jQuery添加新行到table中。这里需要理解几个关键点: 1. 选择器的使用:`$('#table1')` 选择了ID为table1的...
### JS动态添加删除行知识点详解 #### 一、概述 在网页开发中,经常会遇到需要动态操作表格元素的情况,比如动态地添加或删除表格行。本文将基于给定的脚本代码来详细介绍如何使用JavaScript(简称JS)实现动态...