select,table控件的添加和删除

以struts2的标签为例
1.select控件的添加和删除

<s:select list="availableAsset" key="asset.name" name="asset.id" listKey="id" listValue="name" headerKey="-1" headerValue="请

选择" />

添加一个option
function addOption1(){
 var options=document.getElementsByName("asset.id")[0];
 var option=new Option(id,name);//id为option的value,name为option显示的内容
 options.add(option);
}

function addOption2(){
 var options=document.getElementsByName("asset.id")[0];
 options[options.length+1]=new Option(id,name) //id为option的value,name为option显示的内容
 
}
删除option
function deleteOption1(){
 var options=document.getElementsByName("asset.id")[0];
 options.remove(i); //i为options的第几项
}
function deleteOption2(){
 var options=document.getElementsByName("asset.id")[0];
 options[i]=null; //
i为options的第几项
}
function deleteAllOption(){
 var options=document.getElementsByName("asset.id")[0];
 for(i=options.length;i>=0;i--){
  options[i]=null; //
i为options的第几项
                或者是
  options.remove(i); //
i为options的第几项
 }
 //注意要删除select里面的全部选项时一定要倒叙删除
 //因为每删除一个option时option的下标就要重新排列一次
 //比如一共有5项option,option的最大下标为5,当你正序删除时第一次删除下标为1的option然后option的

//下标重新排列
 //最大的下标就为4了所以最后一个option就删不掉。

}

2.table控件添加和删除
  <table>
   <tbody id="tableId">
    <tr>
     <th>姓名</th>
     <th>班级</th>
     <th>科目</th>
     <th>分数</th>
    </tr>
    <tr id="trId1">
     <td>李磊</td>
     <td>一班</td>
     <td>语文</td>
     <td>78</td>
    </tr>
   </tbody>
  </table>
添加一行
function addTableTr1(){
   var table=document.getElementById("tableId");
   var newRow=table.insertRow(i); //i=table.rowIndex+1
   var newCell1=newRow.insertCell(0);
   newCell1.innerHTML="王允";
   var newCell2=newRow.insertCell(1);
   newCell2.innerHTML="三班";
   var newCell3=newRow.insertCell(2);
   newCell3.innerHTML="数学";
   var newCell4=newRow.insertCell(3);
   newCell4.innerHTML="90";
  }
function addTableTr2(){
   var table=document.getElementById("tableId");
   var newRow=table.insertRow(-1); //表示直接给table追加一行
   var newCell1=newRow.insertCell(-1);//表示直接给tr追加一列
   newCell1.innerHTML="田田";
   var newCell2=newRow.insertCell(-1);
   newCell2.innerHTML="三班";
   var newCell3=newRow.insertCell(-1);
   newCell3.innerHTML="数学";
   var newCell4=newRow.insertCell(-1);
   newCell4.innerHTML="76";
  }
function addTableTr3(){
   var tr=document.createElement("tr");
   var td1=document.createElement("td");
   td1.appendChild(document.createTextNode("舒蕾"));
   var td2=document.createElement("td");
   td2.appendChild(document.createTextNode("二班"));
   var td3=document.createElement("td");
   td3.appendChild(document.createTextNode("化学"));
   var td4=document.createElement("td");
   td4.appendChild(document.createTextNode("78"));
   tr.appendChild(td1);
   tr.appendChild(td2);
   tr.appendChild(td3);
   tr.appendChild(td4);
   var table=document.getElementById("tableId");
   table.appendChild(tr);
  }
删除一行
function deleteTableTr1(){
   var table=document.getElementById("tableId");
   var rows=table.rows;
   table.deleteRow(i);//i=table.rowIndex;
  }

 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值