动态增删表格行列是Ajax处理的常用代码,下面对其过程进行了一些分析和总结.
通过Dom解析到某个表格,表格必须符合W3C标准,即以下的形式:
<table border="1">
<tbody id="folderList">
<tr id="line1">
<td>text</td>
</tr>
</tbody>
</table>
上面黑体部分是必须的.
先看怎么解析到这个表格:
var folderList=document.getElementById("folderList");
再这样解析到表格的一行:
var rowWillDelete=document.getElementById("line1");
这下删除就好办了,直接这样:
folderList.removeChild(rowWillDelete);
要增加的话,需要创建出一行tr,下面是创建过程
var row=document.createElement("tr");// 创建tr
row.setAttribute("id",newFolderName);// 设置tr的id,也就是上面的 id="line1"部分
var cell=document.createElement("td");// 创建td
cell.appendChild(document.createTextNode(newFolderName));// 填充td里面的值,也就是上面的 <td>text</td>的text部分.
row.appendChild(cell);// 将td添加到tr
将tr增加到table可以这样:
document.getElementById("folderList").appendChild(row);
在td中增加什么内容可以根据情况设定,下面代码就加了自删除的按钮:
var deleteButton=document.createElement("input");// 创建input控件
deleteButton.setAttribute("type","button");// 设定input控件的类型为按钮
deleteButton.setAttribute("value","delete");// 设定按钮的显示文字
deleteButton.onclick=function(){deleteFromFolderList(newFolderName);};// 这句很关键,这是按钮的事件处理,可以看到点击此按钮时会交给deleteFromFolderList处理
cell=document.createElement("td");// 这句上面说了
cell.appendChild(deleteButton);// 这句上面也说了
整个过程基本就这样,特别提醒的是书写js代码一要注意规范,二要细心调试,否则容易给自己带来麻烦.
动态增删表格行列是Ajax处理的常用代码,下面对其过程进行了一些分析和总结.
通过Dom解析到某个表格,表格必须符合W3C标准,即以下的形式:
<table border="1">
<tbody id="folderList">
<tr id="line1">
<td>text</td>
</tr>
</tbody>
</table>
上面黑体部分是必须的.
先看怎么解析到这个表格:
var folderList=document.getElementById("folderList");
再这样解析到表格的一行:
var rowWillDelete=document.getElementById("line1");
这下删除就好办了,直接这样:
folderList.removeChild(rowWillDelete);
要增加的话,需要创建出一行tr,下面是创建过程
var row=document.createElement("tr");// 创建tr
row.setAttribute("id",newFolderName);// 设置tr的id,也就是上面的 id="line1"部分
var cell=document.createElement("td");// 创建td
cell.appendChild(document.createTextNode(newFolderName));// 填充td里面的值,也就是上面的 <td>text</td>的text部分.
row.appendChild(cell);// 将td添加到tr
将tr增加到table可以这样:
document.getElementById("folderList").appendChild(row);
在td中增加什么内容可以根据情况设定,下面代码就加了自删除的按钮:
var deleteButton=document.createElement("input");// 创建input控件
deleteButton.setAttribute("type","button");// 设定input控件的类型为按钮
deleteButton.setAttribute("value","delete");// 设定按钮的显示文字
deleteButton.onclick=function(){deleteFromFolderList(newFolderName);};// 这句很关键,这是按钮的事件处理,可以看到点击此按钮时会交给deleteFromFolderList处理
cell=document.createElement("td");// 这句上面说了
cell.appendChild(deleteButton);// 这句上面也说了
整个过程基本就这样,特别提醒的是书写js代码一要注意规范,二要细心调试,否则容易给自己带来麻烦.
分享到:
相关推荐
基于vue+Iview实现动态表单组件,通过拖拽组件到面板即可实现一个表单。支持各个组件的动态隐藏显示,动态表格弹窗式维护。
动态表单插件是单据、基础资料、列表、过滤界面等插件的基类,提供了这些模型插件的统一接口,通过这些接口可以对表单编辑样式、列表样式、操作、model数据等进行控制。 请求加载单据的过程插件一般经历以下几个阶段...
JAVA动态表单设计,自定义表单,自定义数据,在线设计,数据库存储
基于Vue和Element UI的动态表单组件设计源码,该项目包含217个文件,主要文件类型有95个Vue前端文件,78个JavaScript文件,10个json配置文件,6个gif动画文件,5个Markdown文档,5个HTML页面文件,4个CSS样式文件,3...
动态表单系统设计与实现【硕士学位毕业论文
随着计算机技术的发展,动态表单技术逐渐进入了软件领域,越来越多的系统开始采取无代码表单的新技术。无代码表单是指用户可以不通过开发,自定义按需搭建表单内容,达到用户的预期效果,实现在线可视化编程的目的。...
支持vue3的动态表单组件 // main,js // 引入 vue-ele-form import EleForm from './velFrom' // 挂载 use(EleForm)
动态表单
struts动态表单实例struts动态表单实例struts动态表单实例
动态表单的简历实现,包括整个流程:设计表单--入库保存---填写表单---表单的展示。功能都实现了,只是没有做很很细致的调整,只是一个demo
activiti三种表单的demo实现 运行方式: 1,修改连接的数据库 2,sql文件在resources\sql下 3,访问地址http://localhost:8080/activiti-demo/main/index
HTML5+CSS3超酷动态表单 表单高亮时候输入框会随着变化
动态表单的简单实现,可以利用拖拽的形式,设计表单,可以拖拽的控件包括input框、select框、复选框、单选框等等
flex动态表单源码
jQuery制作动态表单验证代码插件,动态验证信息
vue-element-ui动态表单
用jbpm做一个工作流系统,系统支持自定义工作流表单,同时表单要与流程定义关联,这是流程定义与动态表单的设计图
基于SSH框架的动态表单设计与实现
结合面向产业链协同平台的实际需求, 在分析了表单定制技术的基础上, 建立了面向SaaS平台的动态表单定制模型, 提出了面向平台的动态表单定制解决方案。该方案以表单的动态定制为核心, 建立了以平台为载体的动态表单...
DynaActionForm(动态表单)介绍及应用,Struts framework中,ActionForm对象的封装及应用,通过Struts framework中的DynaActionForm类及其子类可以实现动态的ActionForm ,动态的ActionForm允许你通过Struts的配置...