`
zhou568xiao
  • 浏览: 96800 次
  • 性别: 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是一款基于前端MVC...在使用TableSelect时,首先需要引入LayUI库和TableSelect的扩展模块。通常,我们会在HTML文件中通过`&lt;link&gt;`标签引入LayUI的CSS和JS文件,以及TableSelect的特定JS文件。例如: ```html ...

    Table控件中实现批量增加和更改记录

    在.NET框架中,C#语言提供了丰富的控件库,其中包括Table控件,它常用于创建数据展示和编辑的界面。本文将深入探讨如何在Table控件中实现批量增加和更改记录,这对于处理大量数据时能显著提高效率。 一、Table控件...

    将数据显示在TABLE控件中

    ### 将数据显示在TABLE控件中的关键技术点 #### 一、概述 在ASP.NET应用程序开发过程中,经常需要将从数据库中获取的数据展示给用户。本文将详细介绍如何利用ASP.NET 2005、C#语言及SQL Server数据库,将查询到的...

    table控件连access数据库(2.0)

    在这个场景中,我们关注的是如何利用C#编程与Access数据库进行交互,特别是通过table控件来展示和操作数据。Access数据库是微软提供的一种轻量级数据库解决方案,适合小型项目或开发阶段的数据存储。 首先,我们要...

    HTML常用控件

    除了 HtmlTable 和 HtmlSelect 控件外,还有许多其他的服务器控件,例如 HtmlImage 控件、HtmlLink 控件等。这些控件都可以帮助开发者快速创建动态网页,并提供了丰富的交互体验。 HTML 控件是 Web 开发中非常重要...

    js下用层来实现select的title提示属性.docx

    在获取select控件的尺寸和位置之后,我们可以生成table元素的每个单元格,用于显示select控件的每个选项。我们使用while循环来遍历select控件的所有选项,并将每个选项的文本、值和title属性设置到对应的单元格中。...

    使用数据库记录动态填充HTML Table控件

    在网页开发中,HTML Table控件是用于展示结构化数据的一种常见方式,尤其在与数据库交互时,动态填充表格能够使数据更新实时且直观。本文将深入探讨如何使用数据库记录来动态填充HTML Table控件,以实现高效的数据...

    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 的某一列中添加下拉框(select)控件,并能获取用户选择的值。这涉及到对 Bootstrap Table 的 Column 配置项的理解以及如何利用 `formatter` 函数来动态生成 HTML ...

    4、Webdynpro入门之Select-Option【原创】

    总结来说,本文详细讲解了 Select-Option 在 Webdynpro 中的应用,包括如何新建组件、添加 Select-Option 组件、建立局部节点、设置 Table 控件的 ID、绑定节点、添加 Attributes 和使用 Methods 等内容。

    SWT Table单元格编辑功能

    ### SWT Table单元格编辑功能详解 在Java图形用户界面(GUI)开发中,SWT...通过以上步骤,我们可以在SWT `Table`控件中实现单元格的编辑功能,使用户能够直接在界面上修改数据,提高了应用的交互性和实用性。

    ASP.NET分页一(Table)

    `SET COUNT`配合`OFFSET`和`FETCH NEXT`能有效支持分页和排序,而ASP.NET的控件如GridView则提供了方便的事件和属性来处理用户交互。通过这种方式,即使面对大型表格,也能保证页面的响应速度和用户的浏览体验。

    用html实现的combox控件

    HTML ComboBox控件是一种在网页上实现下拉列表功能的元素,它结合了输入框和下拉列表的优点,用户可以手动输入选项或者从预定义的列表中选择。在本主题中,我们将深入探讨如何使用HTML来创建一个具备自定义功能的...

    控件教程下载(三部分).rar(标准服务器控件,数据验证控件 HTML服务器控件,)

    4. **HtmlTable控件**:创建HTML表格,用于布局和展示数据。 5. **HtmlImage控件**:插入HTML图像。 通过学习这三个部分的教程,开发者能够熟练掌握如何利用这些控件构建功能丰富的交互式Web界面,同时保证用户输入...

    QT Tree View控件的使用

    queryModel-&gt;setQuery("SELECT * FROM table_name"); ui-&gt;treeView-&gt;setModel(queryModel); ``` 这样,数据库表中的记录将显示在QT Tree View中。通过修改查询语句,可以实现动态更新视图。 六、自定义模型和视图 ...

    几个经典JavaScript控件下载

    在这个“几个经典JavaScript控件下载”的压缩包中,包含了几个实用的JavaScript组件,这些组件可以帮助开发者创建更加交互性和用户友好的网页。 1. **表格格式的树示例**: 树形结构在数据展示中非常常见,例如...

    解决layui-table单元格编辑只能text问题

    本篇将详细探讨如何解决layui-table单元格编辑仅支持text问题,以便在实际项目中实现更多元化的表单控件,如自定义表单类型、时间控件、数字框、下拉选择和单选等。 layui-table是layui框架中的表格组件,它提供了...

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

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

    LABVIEW 表格控件

    首先,表格控件(Table Control)在LabVIEW中提供了直观的方式来展示结构化数据,如数组或簇。它的界面设计允许用户通过鼠标或键盘进行交互,包括选择单元格、行和列。在LabVIEW中,你可以通过拖动工具箱中的“表格...

Global site tag (gtag.js) - Google Analytics