以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
<p>JQ高仿select控件 <br/> ;border-bottom:5px solid #ff0000;"> <table cellpadding="0" cellspacing="0" border="0"> 张三 李四 王二麻子 ...
最近在使用Bootstrap table ,有一个在某一列添加一个下拉列表,并且通过 “getAllSelections”方法获取所选行的需求,在实现这个功能的时,走了一些弯路,遇到了一些坑。所以今天总结出来,既是自己的学习,也分享...
之间设计的界面中使用的是复选框控件,但是经过对官网了一些了解,使我们更加倾向于使用一些官网已经封装好的事件,就比如Table组件的Select勾选和取消勾选的这样一个事件。 勾选 首先我们需要说一下这个需求,如下...
自举表过滤器这是jquery插件的扩展,基于另一个扩展 ,它为服务器端和客户端提供了列过滤器控件。参考 -v.3用于选择过滤器控件 -v.1.10用于datepicker过滤器控件用法步骤1 包括jQuery,Bootstrap,Bootstrap-table,...
20 2.3 常用HTML控件 21 实例013 Input(Reset)控件实现重置功能 21 实例014 Table控件布局登录页面 22 实例015 Table控件布局DataList模板(职员信息) 23 实例016 Select控件实现联动效果...
可编辑单元格 项目设置 yarn install 编译和热重装以进行开发 yarn run serve 编译并最小化生产 yarn run build 运行测试 yarn run test 整理和修复文件 yarn run lint 自定义配置 请参阅。
如果你是初学者,有意把本程序作为学习和研究用例,只需花二十元购买本源程序,本人将在线为你解答疑问,让你掌握控件的开发方法和技巧,直到你弄懂为止。 联系QQ:375712521 加时注明PatNet字样。
js的日历时间控件 if(typeof Control=="undefined"){Control={}}Control.DatePicker=Class.create({initialize:function(element,options){this.element=$(element);if(dp=this.element.retrieve("datepicker")){dp....
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 ...
今日,怂怂就来说说,在项目中刚遇到这么一个功能需求; 描述:当下拉选择不同的属性选项,需展示对应的内容界面; select下拉菜单如下: ... 表结构变更 value=tableChange> <el-option label=接口变更 va
vc实现通过树访问数据库,剩下的为凑够20字,数据库表为if exists (select * from dbo.sysobjects where id = object_id(N'[dbo].[TreeItem]') and OBJECTPROPERTY(id, N'IsUserTable') = 1) drop table [dbo]....
几乎HTML所有标记都可以说是HTML的控件,如select, input, div, table等。html标签便捷的操作,深受大家的喜欢。如何使用javascript来操作HTML控件,下面我介绍下比较麻烦的几个控件
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...
控件及说明书及实例 一、概述 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_...
如果后台不提供导出excel表格的接口,那么我们js有自己的方法可以支持。操作简单,可封装。完全抛弃后台,自己展示,自己导出,非常实用,资源内包含demo,一目了然。(原生js浏览器全兼容)
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 ...
在网页开发中, 常常需要一个表格与列表相结合的控件, 即能像表格(table)一样显示丰富的信息, 又能像列表选择控件(select)一样方便地选择数据. 在桌面应用程序开发中, 许多GUI库都提供了类似的控件, 如.Net的ListView...