以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是一款基于前端MVC...在使用TableSelect时,首先需要引入LayUI库和TableSelect的扩展模块。通常,我们会在HTML文件中通过`<link>`标签引入LayUI的CSS和JS文件,以及TableSelect的特定JS文件。例如: ```html ...
在.NET框架中,C#语言提供了丰富的控件库,其中包括Table控件,它常用于创建数据展示和编辑的界面。本文将深入探讨如何在Table控件中实现批量增加和更改记录,这对于处理大量数据时能显著提高效率。 一、Table控件...
### 将数据显示在TABLE控件中的关键技术点 #### 一、概述 在ASP.NET应用程序开发过程中,经常需要将从数据库中获取的数据展示给用户。本文将详细介绍如何利用ASP.NET 2005、C#语言及SQL Server数据库,将查询到的...
在这个场景中,我们关注的是如何利用C#编程与Access数据库进行交互,特别是通过table控件来展示和操作数据。Access数据库是微软提供的一种轻量级数据库解决方案,适合小型项目或开发阶段的数据存储。 首先,我们要...
除了 HtmlTable 和 HtmlSelect 控件外,还有许多其他的服务器控件,例如 HtmlImage 控件、HtmlLink 控件等。这些控件都可以帮助开发者快速创建动态网页,并提供了丰富的交互体验。 HTML 控件是 Web 开发中非常重要...
在获取select控件的尺寸和位置之后,我们可以生成table元素的每个单元格,用于显示select控件的每个选项。我们使用while循环来遍历select控件的所有选项,并将每个选项的文本、值和title属性设置到对应的单元格中。...
在网页开发中,HTML Table控件是用于展示结构化数据的一种常见方式,尤其在与数据库交互时,动态填充表格能够使数据更新实时且直观。本文将深入探讨如何使用数据库记录来动态填充HTML Table控件,以实现高效的数据...
<p>JQ高仿select控件 <br/> ;border-bottom:5px solid #ff0000;"> <table cellpadding="0" cellspacing="0" border="0"> 张三 李四 王二麻子 ...
在这个特定的问题中,我们需要在 Bootstrap Table 的某一列中添加下拉框(select)控件,并能获取用户选择的值。这涉及到对 Bootstrap Table 的 Column 配置项的理解以及如何利用 `formatter` 函数来动态生成 HTML ...
总结来说,本文详细讲解了 Select-Option 在 Webdynpro 中的应用,包括如何新建组件、添加 Select-Option 组件、建立局部节点、设置 Table 控件的 ID、绑定节点、添加 Attributes 和使用 Methods 等内容。
### SWT Table单元格编辑功能详解 在Java图形用户界面(GUI)开发中,SWT...通过以上步骤,我们可以在SWT `Table`控件中实现单元格的编辑功能,使用户能够直接在界面上修改数据,提高了应用的交互性和实用性。
`SET COUNT`配合`OFFSET`和`FETCH NEXT`能有效支持分页和排序,而ASP.NET的控件如GridView则提供了方便的事件和属性来处理用户交互。通过这种方式,即使面对大型表格,也能保证页面的响应速度和用户的浏览体验。
HTML ComboBox控件是一种在网页上实现下拉列表功能的元素,它结合了输入框和下拉列表的优点,用户可以手动输入选项或者从预定义的列表中选择。在本主题中,我们将深入探讨如何使用HTML来创建一个具备自定义功能的...
4. **HtmlTable控件**:创建HTML表格,用于布局和展示数据。 5. **HtmlImage控件**:插入HTML图像。 通过学习这三个部分的教程,开发者能够熟练掌握如何利用这些控件构建功能丰富的交互式Web界面,同时保证用户输入...
queryModel->setQuery("SELECT * FROM table_name"); ui->treeView->setModel(queryModel); ``` 这样,数据库表中的记录将显示在QT Tree View中。通过修改查询语句,可以实现动态更新视图。 六、自定义模型和视图 ...
在这个“几个经典JavaScript控件下载”的压缩包中,包含了几个实用的JavaScript组件,这些组件可以帮助开发者创建更加交互性和用户友好的网页。 1. **表格格式的树示例**: 树形结构在数据展示中非常常见,例如...
本篇将详细探讨如何解决layui-table单元格编辑仅支持text问题,以便在实际项目中实现更多元化的表单控件,如自定义表单类型、时间控件、数字框、下拉选择和单选等。 layui-table是layui框架中的表格组件,它提供了...
之间设计的界面中使用的是复选框控件,但是经过对官网了一些了解,使我们更加倾向于使用一些官网已经封装好的事件,就比如Table组件的Select勾选和取消勾选的这样一个事件。 勾选 首先我们需要说一下这个需求,如下...
首先,表格控件(Table Control)在LabVIEW中提供了直观的方式来展示结构化数据,如数组或簇。它的界面设计允许用户通过鼠标或键盘进行交互,包括选择单元格、行和列。在LabVIEW中,你可以通过拖动工具箱中的“表格...