`

纯javascript写的动态添加删除行

 
阅读更多
<div id="testR">
<select id="cfo" name="columnDefineInfo" style="display:none">
<c:forEach var="dcDefine" items="${decisionColumnDefineList}" varStatus="status">
<option value="<c:out value="${dcDefine.columnDefineId}"/>"><c:out value="${dcDefine.columnName}" /></option>
</c:forEach>
</select>

</div>
<table id="mytable" width="100%" border="0" cellspacing="1" cellpadding="2" align="center" class="etable">
             <TR align="center">
                    <TD class="content" colspan="4">
                        <b>条件列信息</b>
                    </TD>
                </TR>
              <TR align="left">
              <td colspan="4">
              <input type="button" name="tpbutton" value="增 加" onclick="addTableRow();" />
              </td>
              </TR>
</table>
<script languge="javascript">
var infoNum=0;
var ruleFactNum=0;
/**
     * 功能:select对象动态添加Options项
     * @param {} objSelectNow select对象
     * @param {} txt    显示值text
     * @param {} val    值value
     */ 
function addOption(objSelectNow, txt, val) { 
        // / 使用W3C标准语法为SELECT添加Option 
        var objOption = document.createElement("option"); 
        objOption.text = txt; 
        objOption.value = val; 
        objSelectNow.options.add(objOption); 
    }
  /**
     * 功能:动态添加行
     */   
function addTableRow() {  
var listTable = document.getElementById('mytable');
var row = listTable.insertRow(listTable.rows.length);
var cells = new Array(1);
for(var i = 0;i < cells.length;i++){
cells[i] = row.insertCell();
}
infoNum = infoNum + 1;
//动态添加值开始
var objSel = document.getElementById("cfo");
    var ops = objSel.options;
   
//条件列
var limitFlag0 = document.createElement("<select name='conditionInfo'>");
var delBtn = document.createElement("<input id='"+infoNum+"' name='btnSave' value='删除 ' type='button' class='tpbutton' onclick='javasript:delTableRow(this);'>");
addOption(limitFlag0,"请选择","");
limitFlag0.style.width="300";
for(var i=0; i<ops.length; i++){
    addOption(limitFlag0,ops[i].text,ops[i].value);
cells[0].appendChild(limitFlag0);
    }
    cells[0].appendChild(delBtn);
   
}
/**
     * 功能:动态删除行
     */  
function delTableRow(obj){
var tableObj = document.getElementById("mytable");
      tableObj.deleteRow(obj.parentElement.parentElement.rowIndex);

}
</script>
分享到:
评论

相关推荐

    纯javascript增加删除表格行

    在本主题中,我们将深入探讨如何使用纯JavaScript来实现表格(table)的行增删功能,这对于创建数据管理界面或者用户输入表单的网页特别有用。 首先,我们需要了解HTML中的`&lt;table&gt;`元素。`&lt;table&gt;`是用于展示结构...

    js动态添加删除行,实用

    &lt;title&gt;JS 动态添加删除行 姓名 年龄 &lt;!-- 动态添加的数据行将放在这里 --&gt; ()"&gt;添加行 ()"&gt;删除选中行 function addRow() { var table = document.getElementById('myTable'); var ...

    纯js实现行的添加删除

    本文将深入探讨如何使用纯JavaScript实现动态的行添加与删除功能,尤其关注在特定条件下的按钮显示逻辑。这个功能通常应用于表格或者列表的管理,比如在线表单、任务列表等。 首先,我们需要创建一个基础的HTML结构...

    JS动态增加删除行

    上述代码展示了如何使用纯JavaScript动态增加和删除表格行的基本思路。实际应用中,你可能需要根据具体需求进行调整,例如添加验证、处理表单数据等。在给定的`test03.htm`文件中,可能包含了这样一个简单的实例,你...

    纯js的树形菜单(添加删除节点)

    本篇将深入探讨如何使用纯JavaScript和jQuery来创建一个具备添加与删除功能的树形菜单。 首先,我们需要理解JavaScript的基本语法和DOM操作。JavaScript是一种广泛应用于Web开发的脚本语言,它可以直接在浏览器中...

    js添加删除行功能实现

    在JavaScript中实现添加删除行的功能是一项常见的任务,尤其在网页表格或者数据管理界面中。这里我们将探讨四种不同的方法来实现这一功能,每种方法都有其适用场景和优缺点。 **方法一:DOM操作** 最基础的方法是...

    ListBox动态添加数据删除数据和上移下移

    在ASP.NET中,可以使用UpdatePanel或纯JavaScript/AJAX请求来更新ListBox而无需整个页面刷新。在JavaScript中,可以通过调用`update()`或`innerHTML`属性改变ListBox的内容。 5. 示例代码: 提供的HTML文件...

    纯 JavaScript CRUD 示例.zip

    纯 JavaScript CRUD 示例(带源代码) 项目:纯 JavaScript CRUD 示例(带源代码) CRUD 示例是 HTML5、CSS 和 JavaScript 中的一个简单项目。这是一个有趣的项目。该项目用于添加姓名作为员工记录以及编辑、更新和...

    纯javascript 完美 无障碍层拖拽

    2. **DOM操作**:通过Document Object Model (DOM)可以对网页元素进行操作,包括获取、修改、添加和删除元素,这对于实现拖拽功能至关重要。 3. **事件监听**:JavaScript的事件监听机制,如`addEventListener`,...

    左侧多级子栏目纯JavaScript

    开发者可以通过查看这些文件,学习如何用纯JavaScript实现一个动态的、多级的左侧导航菜单,提升自己的前端开发技能。 总之,“左侧多级子栏目纯JavaScript”是一个典型的前端开发示例,它展示了JavaScript和CSS在...

    动态增删表格行(纯JS写法) 归档

    动态增删表格行的纯JavaScript实现并不复杂,关键在于理解DOM操作和事件处理。通过创建和操作HTML元素,结合数据模型,我们可以轻松实现这一功能。在实际项目中,根据需求,可能还需要考虑数据的持久化、表单验证、...

    自动增加删除表格行代码(纯JS)

    本文将详细介绍如何使用纯JavaScript实现表格行的自动增加与删除功能,以及如何为表格中的特定单元格添加当前日期。该功能不仅提高了用户交互体验,还增强了页面的灵活性。 #### 一、功能概述 本示例通过三个按钮...

    纯js仿腾讯微博无刷新添加删除留言板功能插件

    【纯js仿腾讯微博无刷新添加删除留言板功能插件】是一个使用JavaScript编写的插件,其目的是模拟腾讯微博的无刷新交互体验。在现代Web应用中,无刷新技术已经成为提高用户体验的重要手段,它使得页面在进行数据更新...

    纯JavaScript实现的简单TodoMVC示例应用

    **纯JavaScript实现的TodoMVC示例应用** TodoMVC是一个流行的学习和比较不同前端框架或库的小型应用模板。在这个纯JavaScript版本中,我们将深入探讨如何不依赖任何外部库,仅使用原生JavaScript实现一个功能完备的...

    纯javascript实现的日期选择器

    【标题】:“纯JavaScript实现的日期选择器” 在网页开发中,日期选择器是一个非常常见的功能,它允许用户方便地选择日期,常用于表单填写、日历应用或事件预订等场景。本教程将深入探讨如何使用纯JavaScript来创建...

    纯javascript模仿微信打飞机小游戏共13页.pdf

    【标题】: "纯javascript模仿微信打飞机小游戏共13页.pdf" 【描述】: 这个压缩包文件包含了一份13页的PDF文档,详细讲述了如何使用纯JavaScript语言来模仿开发微信上著名的"打飞机"小游戏。JavaScript是一种广泛应用...

    HTML完美动态表格(可编辑)

    5. **动态添加行和删除行**: 这种功能通常通过JavaScript实现,例如,可以添加一个按钮,当点击时,触发一个函数来创建新的表格行,并将其插入到适当的位置。同样,删除行可能涉及选定行后点击删除按钮,触发一个...

    JavaScript Ajax动态购物车代码.zip

    总结,通过JavaScript和AJAX,我们可以创建一个动态的购物车功能,使用户能够在不刷新页面的情况下添加、删除或修改购物车中的商品。这种技术提高了用户体验,降低了服务器压力,是现代Web应用程序不可或缺的一部分...

    纯JavaScript实现HTML业务流程图

    本教程将详细介绍如何使用纯JavaScript来实现HTML业务流程图,同时结合jQuery库和其他辅助资源,以创建动态且交互式的流程图。 首先,`index.html`是我们的主页面文件,它会包含HTML结构以及引用的外部JavaScript和...

    单网页纯JavaScript英语字典软件

    可以放在u盘等易于携带的地方,在有浏览器的电脑上就可以只有使用,不用额外的服务器和脚本语言就可以实现的动态的添加修改删除功能,更重要的时候所有的数据都存储在这个网页当中而不用另外的服务器数据库。...

Global site tag (gtag.js) - Google Analytics