WEB开发网
开发学院网页设计JavaScript Javascript 动态添加&删除列表框内容 阅读

Javascript 动态添加&删除列表框内容

 2010-09-14 13:34:54 来源:WEB开发网   
核心提示: 例一<HTML><HEAD><TITLE> 测试Select</TITLE><script>function addItem(){var txt=document.all("txt").value;if(txt

例一

<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>
例三

上一页  1 2 3 4 5  下一页

Tags:Javascript 动态 添加

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接