Javascript 动态添加&删除列表框内容
2010-09-14 13:34:54 来源:WEB开发网例一
<HTML>
<HEAD>
<TITLE> 测试Select</TITLE>
<script>
function addItem()
{
var txt=document.all("txt").value;
if(txt!="")
{
document.myForm.mySelect.length++;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].text=txt;
document.myForm.mySelect.options[document.myForm.mySelect.length - 1].value =document.myForm.mySelect.length;
}
else
{
alert("请填写内容");
}
}
</script>
</HEAD>
<BODY>
<form name="myForm">
<SELECT NAME="mySelect" multiple="multiple">
<option value="1">item1</option>
</SELECT></form>
内容:<input type="text" size=20 name="txt" id="txt"><br>
<input type="button" name="addBtn" value="添加内容" onClick="addItem();">
</BODY>
</HTML>
例二
<HTML>
例三
<HEAD>
<TITLE> New Document </TITLE>
</HEAD>
<BODY>
<input type="button" name="btn" value="添加一行" onClick="addrow()">
<table id="activeTable" style="border: #000000 solid 1px;" cellspacing="0" width="100%" cellpadding="0">
<caption>請 求 内 訳</caption>
<tr>
<td nowrap>請求月</td>
<td nowrap>計上月</td>
<td nowrap>請求件名</td>
<td nowrap>入金期限日</td>
<td nowrap>金額</td>
<td nowrap>消費税</td>
<td nowrap>備考</td>
<td nowrap>操作</td>
</tr>
<table>
</BODY>
</HTML>
<SCRIPT LANGUAGE="JavaScript">
<!--
function addrow() {
var row = activeTable.insertRow(activeTable.rows.length);
var col = row.insertCell(0);
var i = row.rowIndex;
col.innerHTML = '<input name="seituki1" size="2"><input name="seituki2" size="2">';
col = row.insertCell(1);
col.innerHTML = '<input name="keituki1" size="2"><input name="keituki2" size="2">';
col = row.insertCell(2);
col.innerHTML = '<input name="kenmei" size="18" value="">';
col = row.insertCell(3);
col.innerHTML = '<input name="kigen" size="17">';
col = row.insertCell(4);
col.innerHTML = '<input name="kingaku1" size="15" style="text-align: right">';
col = row.insertCell(5);
col.innerHTML = '<input name="zei1" size="13" style="text-align: right">';
col = row.insertCell(6);
col.innerHTML = '<input name="bikou1" value="' + i + ' " size="15">';
col = row.insertCell(7);
col.innerHTML = '<button onClick="delrow()">删除本行</button>';
}
function delrow () {
var srcName = document.getElementsByTagName("button");
var rowIndex = 0;
for ( i=0;i<srcName.length;i++){
if(srcName[i]==event.srcElement)
rowIndex=i;
}
activeTable.deleteRow(rowIndex + 1);
}
</script>
Tags:Javascript 动态 添加
编辑录入:爽爽 [复制链接] [打 印]更多精彩
赞助商链接