Asp.net中动态添加删除文本框
Dot Net里使用方法:
目标:动态添加combobox/textbox/删除button
aspx中添加
<asp:Panel id="Panel2" style="Z-INDEX: 101; LEFT: 224px; POSITION: absolute; TOP: 24px" runat="server" Width="152px" Height="48px">
<INPUT οnclick=addline() type=button value=增加>
<TABLE id=test border=1>
<TR>
<TD><INPUT type=text name=gdf></TD></TR>
</TABLE>
<INPUT type=submit value=提交查询内容>
</asp:Panel>
<script>
function addline(content){
var arrType=new Array(<%=arrType%>);
var strSelect='<OPTION>选择行业类型</OPTION>';
for (i=0;i<arrType.length;i++)
strSelect+='<OPTION>'+arrType[i]+'</OPTION>';
var strInerHtml='<SELECT name="CmbType">'+strSelect+'</SELECT><input type="text" name="TbTranslation"><input type="button" value="删除此行" οnclick="del()">';
newline=document.all.test.insertRow();
newline.insertCell().innerHTML=strInerHtml;
}
function del(){
document.all.test.deleteRow(window.event.srcElement.parentElement.parentElement.rowIndex);
}
</script>
cs中:
public string arrType="/"fadfa/",/"fhghd/",/"hjfgh/"";注意从cs传值给js,字符串要有双引号
string[] autotext = Request.Form["CmbType"].Split(',');多个相同NAME的控件提交的值是以逗号分隔的,Request.Form["autotext"].Split(',')就是把上面这个字符串用逗号分隔，生成一个数组了
第一种方法：
<form>
<input type="button" οnclick="addline()" value="增加">
<table border="1" id="test">
<tr>
<td colspan="2"><input type="text" name="tt[]"></td>
</tr>
</table>
<input type="submit">
</form>
<script>
function addline(content){
newline=document.all.test.insertRow();
newline.insertCell().innerHTML='<input type="text" name="tt[]"><input type="button" value="删除此行" οnclick="del()">'
}
function del(){
document.all.test.deleteRow(window.event.srcElement.parentElement.parentElement.rowIndex);
}
</script>
第二种方法：
<html>
<head>
<title>My Test Page</title>
<script type="text/javascript">
<!--
var textNumber = 1;
function addTextBox(form, afterElement) {
// Increment the textbox number
textNumber++;
// Create the label
var label = document.createElement("label");
// Create the textbox
var textField = document.createElement("input");
textField.setAttribute("type","text");
textField.setAttribute("name","txt"+textNumber);
textField.setAttribute("id","txt"+textNumber);
// Add the label's text
label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));
// Put the textbox inside
label.appendChild(textField);
// Add it all to the form
form.insertBefore(label,afterElement);
return false;
}
function removeTextBox(form) {
if (textNumber > 1) { // If there's more than one text box
// Remove the last one added
form.removeChild(document.getElementById("txt"+textNumber).parentNode);
textNumber--;
}
}
//-->
</script>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
<p>
<input type="button" value="Add Textbox" οnclick="addTextBox(this.form,this.parentNode)" />
<input type="button" value="Remove Textbox" οnclick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>
第三种:表格加一行
<HTML>
<Head>
<Script Language=JavaScript>
function insertRow(isTable){
index = isTable.rows.length;
nextRow = isTable.insertRow(index);
isText = nextRow.insertCell(0);
txtArea = nextRow.insertCell(1);
index++;
index = index.toString();
nameStr = "item"+index;
txtStr = "Item "+index;
isText.innerHTML = txtStr;
txtArea.innerHTML = "<input type=text name="+nameStr+" size=5>";
}
</Script>
</Head>
<Body>
<Form name='Form1'>
<Table id='dynTable' cellpadding=5 cellspacing=5 border=1>
<TR><TD> Item 1</TD><TD><input type="text" name="item1" size="5"></TD></TR>
<TR><TD> Item 2</TD><TD><input type="text" name="item2" size="5"></TD></TR>
<TR><TD> Item 3</TD><TD><input type="text" name="item3" size="5"></TD></TR>
</Table>
</Form>
<input type=button value="Insert row" οnclick="insertRow(dynTable)" >
</Body>
</HTML>
第四种：有个<br>没删除
<input type=button οnclick="add()" value="add">
<script>
var i=1;
function add()
{
document.body.innerHTML+=('<input type=text id="txt'+i+'">');
document.body.innerHTML+=('<input type=button οnclick="del(this)" value="删除" id="btn'+i+'">'+'<br>');
i++;
}
function del(obj)
{
var o=document.getElementById('txt'+obj.id.replace(/[^/d]/g,''));
o.removeNode(true);
obj.removeNode(true);
}
</script>
第五种：
<button id="btn"></button>
<script>
btn.removeNode();
</script>
第六种：
<script>
function s1()
{
document.getElementsByName('txt')[0].removeNode(true);
}
function s2()
{
document.getElementsByTagName('table')[0].rows[0].removeNode(true);
}
</script>
<body>
<input type=text name="txt"><br>
<table>
<tr><td><input type=button value=button></td></tr>
</table>
<input type=button value=删除文本框 οnclick="s1()">
<input type=button value=删除表格行 οnclick="s2()">
</body>
466
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
