`
zhou568xiao
  • 浏览: 96237 次
  • 性别: Icon_minigender_2
  • 来自: 上海
社区版块
存档分类
最新评论

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;
  }

 

 

 

分享到:
评论

相关推荐

    LayUi组件TableSelect

    LayUi组件:TableSelect

    JQ高仿select控件

    &lt;p&gt;JQ高仿select控件 &lt;br/&gt; ;border-bottom:5px solid #ff0000;"&gt; &lt;table cellpadding="0" cellspacing="0" border="0"&gt; 张三 李四 王二麻子 ...

    Bootstrap Table 在指定列中添加下拉框控件并获取所选值

    最近在使用Bootstrap table ,有一个在某一列添加一个下拉列表,并且通过 “getAllSelections”方法获取所选行的需求,在实现这个功能的时,走了一些弯路,遇到了一些坑。所以今天总结出来,既是自己的学习,也分享...

    Vue中Table组件Select的勾选和取消勾选事件详解

    之间设计的界面中使用的是复选框控件,但是经过对官网了一些了解,使我们更加倾向于使用一些官网已经封装好的事件,就比如Table组件的Select勾选和取消勾选的这样一个事件。 勾选 首先我们需要说一下这个需求,如下...

    bootstrap-table-filter:这是Bootstrap表jquery插件的扩展,基于另一个扩展表过滤器控件,该扩展为服务器端和客户端提供了列过滤器控件

    自举表过滤器这是jquery插件的扩展,基于另一个扩展 ,它为服务器端和客户端提供了列过滤器控件。参考 -v.3用于选择过滤器控件 -v.1.10用于datepicker过滤器控件用法步骤1 包括jQuery,Bootstrap,Bootstrap-table,...

    asp.net程序开发范例宝典

    20 2.3 常用HTML控件 21 实例013 Input(Reset)控件实现重置功能 21 实例014 Table控件布局登录页面 22 实例015 Table控件布局DataList模板(职员信息) 23 实例016 Select控件实现联动效果...

    editablecell:Ant Design of Vue之带select控件,单元格编辑功能的表格EditableCell组件

    可编辑单元格 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 yarn run lint 自定义配置 请参阅。

    PatNet分页控件

    如果你是初学者,有意把本程序作为学习和研究用例,只需花二十元购买本源程序,本人将在线为你解答疑问,让你掌握控件的开发方法和技巧,直到你弄懂为止。 联系QQ:375712521 加时注明PatNet字样。

    js的日历时间控件

    js的日历时间控件 if(typeof Control=="undefined"){Control={}}Control.DatePicker=Class.create({initialize:function(element,options){this.element=$(element);if(dp=this.element.retrieve("datepicker")){dp....

    rx第三方控件

    select multiple records; convert columns headings to buttons. TDBStatusLabel displays the DataSet state (for all datasets) or current record number (for DBase or Paradox tables). TDateEdit and ...

    vue实现select下拉显示隐藏功能

    今日,怂怂就来说说,在项目中刚遇到这么一个功能需求; 描述:当下拉选择不同的属性选项,需展示对应的内容界面; select下拉菜单如下: ... 表结构变更 value=tableChange&gt; &lt;el-option label=接口变更 va

    树控件vc源码

    vc实现通过树访问数据库,剩下的为凑够20字,数据库表为if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[TreeItem]') and OBJECTPROPERTY(id, N'IsUserTable') = 1) drop table [dbo]....

    javascript操作html控件实例(javascript添加html)

    几乎HTML所有标记都可以说是HTML的控件,如select, input, div, table等。html标签便捷的操作,深受大家的喜欢。如何使用javascript来操作HTML控件,下面我介绍下比较麻烦的几个控件

    《ASP.NET+SQL组建动态网站》随书光盘

    3.1.3 HtmlTable、HtmlTableRow和HtmlTableCell控件 3.1.4 HtmlForm控件 3.1.5 HtmlButton控件 3.2 Web服务器控件 3.2.1 Label控件 3.2.2 TextBox控件 3.2.3 LinkButton控件 3.2.4 ImageButton控件 3.2.5 CheckBox...

    Web 打印 控件 Lodop6.010

    控件及说明书及实例 一、概述 3 二、系统文件 4 install_lodop.exe 4 LodopFuncs.js 4 三、控件参数 6 Caption 6 Color 6 Border 6 四、功能函数 7 1、基本函数 7 VERSION 7 PRINT_INIT 7 SET_PRINT_PAGESIZE 8 ADD_...

    html页面表格导出excel(原生js浏览器全兼容)

    如果后台不提供导出excel表格的接口,那么我们js有自己的方法可以支持。操作简单,可封装。完全抛弃后台,自己展示,自己导出,非常实用,资源内包含demo,一目了然。(原生js浏览器全兼容)

    Visual Basic 6编程技术大全 中译本扫描版带书签 2/2

    3.3 CommandButton、CheckBox和 OptionButton控件71 3.3.1 CommandButton控件72 3.3.2 CheckBox控件72 3.3.3 OptionButton控件73 3.3.4使用图形化控件73 3.4 ListBox和ComboBox控件74 3.4.1 ListBox控件74 3.4.2 ...

    JS数据表格分页控件 1.0

    在网页开发中, 常常需要一个表格与列表相结合的控件, 即能像表格(table)一样显示丰富的信息, 又能像列表选择控件(select)一样方便地选择数据. 在桌面应用程序开发中, 许多GUI库都提供了类似的控件, 如.Net的ListView...

Global site tag (gtag.js) - Google Analytics