<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.tab {
border: 1px red solid;
border-collapse: collapse;
} .td {
border: 1px red solid;
}
</style>
<script type="text/javascript">
function add() {
var tab = document.getElementById("tab");
// if(!tab.childNodes[0]){
// tab.appendChild(document.createElement("tbody"));
// }
var tr = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
td1.className = "td";
td2.className = "td";
td3.className = "td";
td1.innerHTML = "aa";
td2.innerHTML = "bb";
td3.innerHTML = "cc";
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tab.childNodes[0].appendChild(tr);
}
function del() {
var tab = document.getElementById("tab");
if (tab.childNodes.length > 0) {
tab.childNodes[0].removeChild(tab.childNodes[0].lastChild);
}
}
</script>
<title></title>
</head>
<body>
<table class="tab" id="tab">
<tr>
<td class="td">aaa</td>
<td class="td">bb</td>
<td class="td">cc</td>
</tr>
</table><input type="button" value="add" onclick="add()"/>
<input type="button" value="del" onclick="del()"/>
</body>
</html>
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href=" <%=basePath%>">
<title>My JSP 'index.jsp' starting page </title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script> var count=1;
function addline(){
++count;
var newline=document.all.query.insertRow();
var newCell = newline.insertCell();
newCell.id = "didiao"+count;
newCell.innerHTML=' <select> <option>并且 </option> <option>或者 </option> </select>';
newCell.innerHTML=' <select onChange="changerV('+count+')"> <option>姓名 </option> <option>密码 </option> </select>';
newCell = newline.insertCell();
newCell.innerHTML=' <select> <option>大于 </option> <option>等于 </option> <option>小于 </option> </select>';
var col="td"+count;
var coll=newline.insertCell();
coll.id=col;
coll.innerHTML=' <input type="text">';
newline.insertCell().innerHTML='';
}
function changerV(count){
var sel="didiao"+count ;
var statement1 = document.getElementById(sel).lastChild.options[0].selected;
var statement2 = document.getElementById(sel).lastChild.options[1].selected;
alert("sel:"+sel+",statement1:"+statement1+",statement2:"+statement2);
if(statement1){
var a=document.getElementById("td"+count);
a.innerHTML=' <select> <option>姓名 </option> <option>密码 </option> </select>';
}
if(statement2){
var a=document.getElementById("td"+count);
a.innerHTML=' <input type="button" value="添加" onclick="addline()">'; }
}
function changer(){
if(document.all.didiao1.options[0].selected){
var a=document.getElementById("td1");
a.innerHTML=' <select> <option>姓名 </option> <option>密码 </option> </select>';}
if(document.all.didiao1.options[1].selected){
var a=document.getElementById("td1");
a.innerHTML=' <input type="button" value="添加" onclick="addline()">'; }
} </script> </head> <body>
<table id="query">
<tr>
<td> </td>
<td>
查询条件
</td>
<td>
比较值
</td>
<td>
查询值
</td>
<td>
添加查询
</td>
</tr>
<tr>
<td> </td>
<td>
<select id="didiao1" onChange="changer()">
<option value="1">
姓名
</option>
<option value="2">
密码
</option>
</select>
</td>
<td>
<select>
<option>大于 </option>
<option>等于 </option>
<option>小于 </option>
</select>
</td>
<td id="td1">
<input type="text">
</td>
<td>
<input type="button" value="添加" onClick="addline()">
</td> </tr>
</table>
</body>
</html>
lz看看上边的代码,应该可以实现你的功能.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>Dome Send Mail</title>
<script language="javascript">
<!--
function selectInda(sele_id,add_id) {
var frm = document.getElementById(sele_id);
var bjm = document.getElementById(add_id);
var oi = bjm.options.length
if(frm.value!="") {
if(oi==0) {
bjm.options[oi] = new Option(frm.options[frm.selectedIndex].text,frm.value);
} else if(oi==1) {
if(bjm.options[oi-1].value!=frm.value) {
bjm.options[oi] = new Option(frm.options[frm.selectedIndex].text,frm.value);
}
} else if(oi>1) {
var sign=0;
for(var a=0;a<oi;a++) {
if(frm.value==bjm.options[a].value) {sign = sign+1;}
}
if(sign==0) {
bjm.options[oi] = new Option(frm.options[frm.selectedIndex].text,frm.value);
}
}
}
}function deleteIndex(dele_id) {
var frm = document.getElementById(dele_id);
var fln = frm.options.length;
if(frm.value!="") {
frm.options.removeChild(frm.options[frm.selectedIndex]);
}
}function subIndex(subid, questid) {
var Sobj = document.getElementById(subid);
var Qobj = document.getElementById(questid);
if(Sobj.options.length!=0) {
Qobj.value = "";
for(var b=0;b<Sobj.options.length;b++) {
if(b!=0) {Qobj.value += "," + Sobj.options[b].value;}
else {Qobj.value += Sobj.options[b].value;}
}
} else {
Qobj.value = "";
}
}function selectall_option(subid, questid) {
var Sobj = document.getElementById(subid);
var Qobj = document.getElementById(questid);
if(Sobj.options.length!=0) {
Qobj.options.length=0;
for(var a=0; a<Sobj.options.length; a++ ) {
Qobj.options[a] = new Option(Sobj.options[a].text,Sobj.options[a].value)
}
} else {
Qobj.options.length=0;
}
}
//-->
</script>
</head>
<body>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="2" bgcolor="#CCCCCC">
<tr>
<td> </td>
<td><table width="500" border="0" align="center" cellpadding="0" cellspacing="0" id="groupgoods-table" style="display:">
<tr>
<th height="25" bgcolor="#CCCCCC">可选</th>
<th bgcolor="#CCCCCC">操作</th>
<th bgcolor="#CCCCCC">已选</th>
</tr>
<tr>
<td width="42%"><select name="about_select1" size="20" id="about_select1" style="width:100%" ondblclick="selectInda('about_select1','about_option1');subIndex('about_option1', 'about_fitg');">
<option value="1">[email protected]</option>
<option value="2">[email protected]</option>
<option value="3">[email protected]</option>
<option value="4">[email protected]</option>
<option value="5">[email protected]</option>
</select></td>
<td align="center">
<p>
<input name="news_addall" type="button" class="button" id="news_addall" value=">>" onclick="selectall_option('about_select1', 'about_option1');subIndex('about_option1', 'about_fitg');" />
</p>
<p>
<input name="left_add1" type="button" class="button" id="left_add1" value="添加>" onclick="selectInda('about_select1','about_option1');subIndex('about_option1', 'about_fitg');" />
</p>
<p>
<input name="right_del1" type="button" class="button" id="right_del1" value="<删除" onclick="deleteIndex('about_option1');subIndex('about_option1', 'about_fitg');" />
</p>
<p>
<input name="right_delall" type="button" class="button" id="right_delall" value="<<" onclick="document.getElementById('about_option1').options.length=0;document.getElementById('about_fitg').value='';" />
</p></td>
<td width="42%"><select name="about_option1" size="20" multiple="multiple" id="about_option1" style="width:100%" ondblclick="deleteIndex('about_option1');subIndex('about_option1', 'about_fitg');">
</select>
<input name="about_fitg" id="about_fitg" type="hidden" value="" /></td>
</tr>
</table></td>
<td> </td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
.tab {
border: 1px red solid;
border-collapse: collapse;
} .td {
border: 1px red solid;
}
</style>
<script type="text/javascript">
function add() {
var tab = document.getElementById("tab");
// if(!tab.childNodes[0]){
// tab.appendChild(document.createElement("tbody"));
// }
var tr = document.all.tab.insertRow(-1);
var td1 = tr.insertCell(0);
var td2 = tr.insertCell(1);
var td3 = tr.insertCell(2);
td1.innerHTML = "aa";
td2.innerHTML = "bb";
td3.innerHTML = "cc";
}
function del() {
var tab = document.getElementById("tab");
tab.deleteRow(-1);
}
</script>
<title></title>
</head>
<body>
<table class="tab" id="tab">
<tr>
<td class="td">aaa</td>
<td class="td">bb</td>
<td class="td">cc</td>
</tr>
</table><input type="button" value="add" onclick="add()"/>
<input type="button" value="del" onclick="del()"/>
</body>
</html>
就是获得你上一个td
然后插入一个和它同级的node