`
blaiu
  • 浏览: 131070 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

js动态增加单元格,并删除对应的单元格

 
阅读更多
<table id="table1" name="table1">
    <tr>
    <td><input type="text" name="weProvide" id="weProvide1" size="10"/></td>
    <td><input type="text" name="weProvide" id="weProvide2" size="10"/></td>
    <td><input type="text" name="weProvide" id="weProvide3" size="10"/></td>
    <td><input type="text" name="weProvide" id="weProvide4" size="10"/></td>
    <td></td>
   </tr>
  <tr>
    <td><input type="text" name="weProvide" id="weProvide5" size="10"/></td>
    <td><input type="text" name="weProvide" id="weProvide6" size="10"/></td>
    <td><input type="text" name="weProvide" id="weProvide7" size="10"/></td>
    <td><input type="text" name="weProvide" id="weProvide8" size="10"/></td>
    <td></td>
   </tr>
  <tr>
    <td><input type="text" name="weProvide" id="weProvide9" size="10"/></td>
    <td><input type="text" name="weProvide" id="weProvide10" size="10"/></td>
    <td><input type="text" name="weProvide" id="weProvide11" size="10"/></td>
    <td><input type="text" name="weProvide" id="weProvide12" size="10"/></td>
    <td><div class="red_color" onclick="insertRow1()">增加行</div></td>
   </tr>
   </table>
   <script type="text/javascript">
   		function insertRow1() {
   		var tablelength = document.getElementById("table1");
   		if(tablelength.rows.length>5) {
   			alert("不能在增加了!");
   			return false;
   		}
   		newline = document.all.table1.insertRow();
   		var newcell1 =(newline.insertCell().innerHTML='<input type="text" name="weProvide" size="10"/>');
   		var newcell2 =(newline.insertCell().innerHTML='<input type="text" name="weProvide" size="10"/>');
   		var newcell3 =(newline.insertCell().innerHTML='<input type="text" name="weProvide" size="10"/>');
   		var newcell4 =(newline.insertCell().innerHTML='<input type="text" name="weProvide" size="10"/>');
   		var newcell5 =(newline.insertCell().innerHTML='<div class="red_color" onclick="del1()">删除行</div>');
   		}
   		
   		function del1() {
   			document.all.table1.deleteRow(window.event.srcElement.parentElement.parentElement.rowIndex);
   		}
   </script>
1
0
分享到:
评论

相关推荐

    JavaScript提高:004:JS获取Gridview单元格时层级问题

    在标题提到的"JavaScript提高:004:JS获取Gridview单元格时层级问题"中,我们可以推测作者可能在讨论如何在JavaScript中有效地遍历和访问GridView控件的层次结构,尤其是在HTML渲染后的DOM结构中。通常,GridView在...

    JavaScript动态操作表格,添加,删除行、列及单元格

    删除列时,需要遍历所有行,找到对应列并删除。例如,删除第一列: ```javascript var table = document.getElementById('your_table_id'); var numCols = table.rows[0].cells.length; for (var i = 0; i ; i+...

    JS动态增加删除表格行

    综上所述,动态增加和删除表格行是JavaScript中常见的功能,理解和掌握这些技术对于前端开发至关重要。无论是在传统的HTML表格中操作,还是利用CSS和JavaScript模拟表格,都有其适用的场景和技巧。在实际项目中,...

    JS可编辑单元格内容可以增加或删除行和列

    在JavaScript(JS)编程中,处理可编辑的表格单元格并允许用户动态增删行和列是一项常见的需求。这样的功能可以极大地提升用户交互性和数据管理的便利性。在这个场景下,我们将深入探讨如何使用JavaScript来实现这个...

    vue+elementUI实现动态表格合并单元格.zip

    在本项目中,"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架,它提供了响应式的数据绑定和组件化功能,...

    vue-easytable合并单元格

    在提供的ftl文件和对应的js文件中,我们可以找到具体的实现代码。ftl文件通常用于服务器端模板语言,而js文件则包含Vue组件的逻辑。通过阅读和理解这些代码,可以更深入地学习如何在实际项目中应用单元格合并。 ...

    sheetJs+xlsx-style——前端实现导出excel表格——设置单元格背景色,居中,自动换行,宽度,百分数展示等

    而xlsx-style是SheetJS的一个扩展,它为SheetJS增加了样式支持,允许我们在前端生成具有丰富样式的Excel表格,如设置单元格背景色、文本居中、自动换行、调整宽度以及显示百分比等。 首先,让我们深入了解SheetJS的...

    根据条件设置单元格的颜色

    在IT行业中,尤其是在Web开发领域,我们经常需要根据数据的特定条件来动态地改变用户界面的展示效果,比如设置单元格的颜色。这个过程通常在数据绑定事件中完成,以实现数据与视图的交互。标题“根据条件设置单元格...

    单元格并

    【标题】"单元格并" 指的可能是在电子表格软件中,如Microsoft Excel...对于单元格并的实现,可能是在前端展示部分,通过JavaScript或jQuery对表格元素进行操作,或者在后端处理数据时就已合并好,然后传递给前端显示。

    layui table合并单元格.zip

    在layui中,我们可以利用表格的`render`方法渲染数据,并通过JavaScript逻辑判断哪些单元格需要合并。通常,这涉及到对数据源的分析,找出需要合并的行或列。例如,如果连续几行有相同的数据,那么它们对应的单元格...

    extjs合并单元格

    在Ext JS的Grid中,通常单元格是独立的,每个单元格对应一行数据的一个属性。然而,在某些场景下,我们可能需要将连续的单元格合并,以显示更复杂的布局或汇总信息。例如,创建一个带有总计行的报表,或者在表头中合...

    vue合并单元格

    在Vue.js框架中,实现表格单元格的合并是一项常见的需求,尤其在展示复杂数据或创建报表时。Vue的灵活性使得我们可以轻松地处理这样的任务。在本篇内容中,我们将深入探讨如何在Vue项目中实现“vue合并单元格”的...

    ExtJS GRID单元格合并

    Grid由一系列行(rows)和列(columns)组成,每个单元格(cell)对应一个特定的数据值。在实现单元格合并时,我们需要关注的是`column`配置和`viewConfig`设置。 在创建Grid时,我们通常定义列模型(column model...

    JS获取填报扩展单元格控件的值的解决办法

    我们可以通过js事件来获取对应行控件的值。 3. 示例 新建一个模板,添加数据集ds1:SELECT * FROM 销量 A1单元格设置下拉框控件,B1单元格设置按钮控件,下拉框控件是向下扩展的,模板设计如下图所示: 给B1单元格...

    Ext合并单元格

    在Ext JS这个强大的JavaScript框架中,"Ext 合并单元格"是一个常见的需求,尤其是在创建数据密集型的表格展示时,比如报告或者统计表。它允许开发者将多个相邻的单元格合并成一个大单元格,使得数据显示更加清晰,...

    LayUiTable表单相同参数的单元格合并

    当表格数据中存在相同参数时,我们可以将这些参数对应的单元格合并为一个,减少重复信息,增强视觉效果。下面我们将详细探讨如何操作。 1. **理解LayUI Table的基础使用** 在使用单元格合并功能前,我们需要了解...

    js动态生成文本框并有删除功能

    ### JS动态生成文本框并实现删除功能的知识点 在现代Web开发中,动态地操作DOM(文档对象模型)是常见的需求之一。通过JavaScript可以轻松地实现这一目标。本篇文章将详细解析如何使用JavaScript来动态创建文本框,...

    使用js动态增加记录

    根据提供的描述,“使用js动态增加记录”主要是指通过JavaScript技术,在用户界面中动态地添加或删除数据记录。这种技术通常应用于表格或者列表中,以提供更灵活的数据管理方式。下面将详细介绍该知识点涉及的主要...

    将HtmlTable 导出为Execl文件,支持合并单元格、合并行,无需Office支持

    例如,如果HTML表格的某个表头单元格跨了两列,那么在创建Excel时,我们需要在对应的行中合并两个单元格。同样,如果一个行合并了两行,我们需要在Excel中调整行高,使它们看起来像一个单一的行。 实现这一功能的...

    js统计Table单元格实际行列 不用rowSpan colSpan,而用offsetLeft

    在JavaScript编程中,统计Table单元格的实际行列位置通常涉及到`rowSpan`和`colSpan`属性的使用。然而,有时我们可能需要避开这些属性,转而利用其他方法来获取单元格的位置信息,例如通过计算其`offsetLeft`值。...

Global site tag (gtag.js) - Google Analytics