フォームを動的に操作し、列レンダリングを行う(改良)

6598 ワード
JavaScript html 同前 
            
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
		<title>       /    </title>
	</head>
	<body>
		<table width=700 height="20" border="1" align="center" cellpadding=0
			cellspacing=0 id=listtable>
			<tr align=center height=20>
				<td bgcolor=#FFFFFF>
					<b>-</b>
				</td>
				<td bgcolor=#FFFFFF>
					<b>     </b>
				</td>
				<td bgcolor=#FFFFFF>
					<b>-</b>
				</td>
				<td bgcolor=#FFFFFF>
					<b>    </b>
				</td>				
			</tr>
		</table>
		<table width="700" height="25" border="0" align="center"
			cellpadding="0" cellspacing="0">
			<tr>
				<td align="center">
					<input type=button value=     onclick=addline()>
				</td>
			</tr>
		</table>
	</body>
</html>
<script language=javascript>

	var allCount = 1;					//     ;
	var curRowId = allCount;	//   ID

	function insertline(lineid) {
		var c1;
		for (i = 0; i < listtable.rows.length; i++) {
			if (listtable.rows[i].cells[0].id == lineid.id) {				
				document.getElementById("line" + curRowId).innerHTML = renderFirstCellToSelect();		// +,-      ;
				curRowId++;

				newRow = listtable.insertRow(i);
				newRow.ln = allCount;
				newRow.id = allCount;
				
				c1 = newRow.insertCell(0);
				c1.bgColor = "#FFFFFF";
				c1.align = "CENTER";
				c1.id = "line" + allCount;
				c1.innerHTML = "<input type='button' value='-' style='width:20px;'  onclick='delline(line" + allCount + ")'>";
				c1.innerHTML += "<input type='button' value='+' style='width:20px;' onclick='insertline(line" + allCount + ")'>";
				
				c1 = newRow.insertCell(1);
				c1.bgColor = "#FFFFFF";
				c1.innerHTML = "<select name=sClass" + allCount + ">"
					+ " <option>     1</option>" 
					+ " <option>     2</option>" 
					+ "</select>";

				c1 = newRow.insertCell(2);
				c1.bgColor = "#FFFFFF";
				c1.innerHTML = "<select name=sClass" + allCount + ">"
					+ " <option>=</option>" 
					+ " <option>!=</option>" 
					+ "</select>";
				
				c1 = newRow.insertCell(3);
				c1.bgColor = "#FFFFFF";
				c1.innerHTML = "<select name=sClass" + allCount + ">"
					+ " <option>    A</option>" 
					+ " <option>    B</option>" 
					+ "</select>";

				allCount++
				return;
			}
		}
	}
	
	//lineid-       id;
	function delline(lineid) {		
		if(allCount-1 > 1){
			//     lineid;
			for (i = 0; i < listtable.rows.length; i++) {
				for (j = 0; j < listtable.rows[i].cells.length; j++) {
					if (listtable.rows[i].cells[j].id == lineid.id) {  //      id;
						listtable.deleteRow(i);
						curRowId--;
						//alert("   " + lineid + "     " + curRowId);
						allCount--;
						break;
					}
				}
			}

			
			//    lineid     lastRowId      "+", "-";
			document.getElementById("line" + curRowId).innerHTML = renderFirstCell(curRowId);;		
		}else{
			alert("      ！");
		}
	}

	//          ;
	function renderFirstCellToSelect(){
		var ret = "<select>"
			+ "<option>AND</option>"
			+ "<option>OR</option>"
			+ " </select>";
		return ret
	}

	//    lineid   "+", "-";
	function renderFirstCell(lineid){
		var ret = "";
		ret = "<input type='button' value='-' style='width:20px;'  onclick='delline(" + "line" + lineid + ")'>";
		ret += "<input type='button' value='+' style='width:20px;' onclick='insertline(" + "line" + lineid + ")'>";
		return ret;
	}

	function addline() {
		var c1;
		newRow = listtable.insertRow(listtable.rows.length);
		newRow.ln = allCount;
		newRow.id = allCount;

		c1 = newRow.insertCell(0);
		c1.bgColor = "#FFFFFF";
		c1.align = "CENTER";
		c1.id = "line" + allCount;
		c1.innerHTML = "<input type='button' value='-' style='width:20px;' onclick='delline(line" + allCount + ")'>";
		c1.innerHTML += "<input type='button' value='+' style='width:20px;' onclick='insertline(line" + allCount + ")'>";

		c1 = newRow.insertCell(1);
		c1.bgColor = "#FFFFFF";
		c1.innerHTML = "<select name=sClass" + allCount + ">"
			+ " <option>     1</option>" 
			+ " <option>     2</option>" 
			+ "</select>";

		c1 = newRow.insertCell(2);
		c1.bgColor = "#FFFFFF";
		c1.innerHTML = "<select name=sClass" + allCount + ">"
			+ " <option>=</option>" 
			+ " <option>!=</option>" 
			+ "</select>";

		c1 = newRow.insertCell(3);
		c1.bgColor = "#FFFFFF";
		c1.innerHTML = "<select name=sClass" + allCount + ">"
			+ " <option>    A</option>" 
			+ " <option>    B</option>" 
			+ "</select>";

		allCount++
	}

	addline();
</script>
TabPanelはiframeを通じてページの問題をロードします.