使用DOM编程实现添加行和删除行
来源：互联网 发布：lol for mac 国服 编辑：程序博客网 时间：2024/06/07 05:18
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Untitled Document</title>
<link href="../../css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="25" align="center" valign="bottom" class="td06"><table width="98%" border="0" cellspacing="3" cellpadding="0">
<tr>
<td width="15"><img src="../../images/index_32.gif" width="9" height="9"></td>
<td valign="bottom" class="title">网上调查</td>
</tr>
</table>
</td>
</tr>
</table>
<br>
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td class="td_title">添加调查</td>
</tr>
</table>
<form action="#" method="post">
<table width="95%" border="0" align="center" cellpadding="2" cellspacing="0">
<tr>
<td width="90" align="right" class="td_form01">调查主题</td>
<td class="td_form02"><input name="textfield" type="text" class="input" id="textName" size="90">
*不得超过 50 个汉字</td>
</tr>
<tr>
<td width="90" align="right" class="td_form01">调查类型</td>
<td class="td_form02">
<input type="radio" name="voteType" value="1" checked="checked"/>单选
<input type="radio" name="voteType" value="0" />多选
</td>
</tr>
<tr>
<td align="right" class="td_form01" >选 项<br> </td>
<td class="td_form02" id="td_form02">
<span><input type="text" name="voteOption" class="input" value=""/>*不得超过 50 个汉字<br/></span>
<span><input type="text" name="voteOption" class="input" value=""/><br/></span>
</td>
</tr>
</table>
<br />
<script language="javascript">
function $(obj){
return document.getElementById(obj);
}
var index = 0;
function add(){
//定义id
var ids = "span"+index;
var nodes = "<span id='"+ids+"'></span>";
//获得表格文本
var obj = $("td_form02");
//创建span节点
var spans = document.createElement("span");
spans.id=ids;
spans.innerHTML="<input type='text' name='voteOption' class='input' value=''/> ";
spans.innerHTML=spans.innerHTML+"<a href='javascript:deletes("+spans.id+")'>删除</a><br/>";
//alert(obj.innerHTML);
//添加节点
//alert(spans.innerHTML);
//将创建的节点拼接到子节点的末端
obj.appendChild(spans);
alert(obj.innerHTML);
index++;
}
//删除节点的方法
function deletes(spanObj){
//获得对象
var obj = $("td_form02");
//删除节点
obj.removeChild(spanObj);
}
</script>
<table width="95%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<input name="Submit2" type="submit" class="buttonface" value=" 确定 ">
<input name="Submit2" type="button" class="buttonface" value=" 增加选项 " onclick="add()">
<input name="Submit22" type="submit" class="buttonface" value=" 清除 "> </td>
</tr>
</table>
</form>
<br>
</body>
</html>
效果如图：
- 使用DOM编程实现添加行和删除行
- DOM删除和添加节点
- QtCreator 使用DOM创建和操作(添加，删除，更新)XML
- Dom编程（添加、删除附件）
- 使用EasyUI实现添加和删除功能
- 24、DOM的高级应用1-------表格的动态删除和添加行的操作
- 创建，添加，插入和删除DOM元素
- 11.jquery DOM操作 添加和删除
- JQuery DOM元素的删除和添加
- Dom编程（动态创建 表格、删除行、删除列）
- Dom操作 表格的添加行，删除行，修改行，
- JS实现添加和删除TR行（一）
- DOM添加删除元素
- js DOM添加删除
- Web_PHP_PHP XML DOM编程：查询、添加、删除操作；
- 使用JQuery 表单动态添加和删除行
- 动态添加和删除行
- 使用JQuery实现全选、反选、添加和删除功能
- 使用struts提供的验证框架怎莫会弹出上次的错误
- HTML DOM 中实现删除ul 中li节点
- struts2中的if标签怎样判断action中的对象是否为空
- V4L2通过摄像头采集图片 （转载）
- struts2中action的方法里怎样判断用户是否选择了上传文件
- 使用DOM编程实现添加行和删除行
- struts2中怎样使用Map集合
- java中格式化小数保留小数
- 怎样获得本机的Ip地址和计算机的名称
- java获得本机的mac
- Java中创建数组的方法
- java过滤器
- Spring mvc (一)
- Spring MVC (二)
