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

动态创建行和删除行

阅读更多

在HTML页面动态使用Jquery的添加和删除Table的行:

 

<html> 
<head> 
<title> 
</title> 
<script src="js/jquery.js" type="text/javascript"></script> 
<script type="text/javascript" language="javascript" defer="defer"> 
var row_count = $('#table1 tr').length; 
function addRow_() 
{ 
	var table1 = $('#table1'); 
	var row = $("<tr></tr>"); 
	var td = $("<td></td><td></td><td></td>"); 
	td.eq(0).append($("<input type='text' name='count' value=''>")); 
	row.append(td); 
	td.eq(1).append($("<input type='text' name='count' value=''>")); 
	row.append(td);
	td.eq(2).append($("<input type='text' name='count' value=''>")); 
	row.append(td).append($("<input type='hidden' name='count' value=''>"));
	table1.append(row); 
	row_count++;  
} 

	/* 删除table Row */
function delRow_(){
		if(row_count >0){
			var trs = $('#table1 tr'); 
			trs.eq(row_count).remove();
			row_count --;
		}
	}

</script> 
</head> 
<body> 
<input type="button" value="Add" onClick="addRow_();"> 
<input type="button" value="Delete" onClick="delRow_();"> 
<div id="rightcontent"> 
<table id="table1" cellspacing="3" cellpadding="3" border="1"> 
<tbody> 
<tr><th>属性名称</th><th>属性值</th><td>描述</td></tr>
</tbody> 
</table> 
</div> 
</body> 
</html>



分享到:
评论

相关推荐

    js的节点操作动态创建table表格,创建行,删除行.pdf

    使用 JavaScript 可以动态创建行和删除行。首先,创建一个 table 元素,然后创建多个 tr 元素,每个 tr 元素中创建多个 td 元素,并将其添加到 table 元素中。当点击添加按钮时,创建一个新的 tr 元素,并将其添加到...

    jquery动态创建、删除表格中的行

    jquery动态创建表格中的行、删除指定行

    js动态添加行和删除行

    在JavaScript中,动态添加行和删除行是网页交互中常见的需求,特别是在表格或者列表展示数据时。这通常涉及到DOM操作,包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点: 1. DOM操作: - `...

    动态创建行 插入上行 删除选定行 上移 下移 代码

    动态创建行 插入上行 删除选定行 上移 下移

    js 删除动态创建的行

    在JavaScript编程中,动态创建和操作DOM元素是常见的任务,特别是在网页交互丰富的应用中。"js 删除动态创建的行"这个主题涉及到如何在HTML表格中动态添加行,并且能够根据需求删除特定行。这里我们将详细探讨这个...

    JavaScript动态添加删除表格行

    删除行通常涉及找到要删除的行(可以通过点击事件或其他用户交互触发),然后使用`removeChild`方法。首先,获取要删除的行的引用,然后将其从父元素(即表格)中移除。 ```javascript function deleteRow...

    动态创建删除表格

    总的来说,jQuery提供了一套丰富的DOM操作方法,使得动态创建和删除表格变得简单易行。通过结合使用`append()`、`remove()`、`click()`等方法,我们可以根据需求构建出灵活且响应式的表格交互功能。在实际项目中,...

    javascript动态创建表格

    JavaScript 动态创建表格是指使用 JavaScript 语言来动态地创建和修改 HTML 表格的行和单元格。这种技术非常有用,特别是在需要频繁地更新表格数据的情况下。 动态创建表格的两种方式 1. 使用 `appendChild()` ...

    javascript 动态创建表格:新增、删除行和单元格.zip

    本压缩包中的"javascript 动态创建表格:新增、删除行和单元格.zip"内容着重介绍了如何使用JavaScript来动态地构建和修改HTML表格。 首先,我们要理解表格在HTML中的基本结构,它由`&lt;table&gt;`元素包含,内部包含`...

    angular 动态增加行和删除行

    本篇文章将详细探讨如何利用Angular和Angular Material的`MatTable`组件来实现动态增加行和删除行的功能,以及解决在增加时的分页问题和删除时的选择多行删除。 首先,我们需要在项目中引入Angular Material库。...

    表格行记录动态增加和删除

    当你需要添加一行时,可以通过JavaScript动态创建`&lt;tr&gt;`元素,并将其插入到表格的适当位置。例如,可以使用`document.createElement('tr')`创建新的行元素,然后利用`innerHTML`或`appendChild`方法添加内容和将其...

    利用jquery给指定的table动态添加一行、删除一行的方法

    这篇文章主要介绍了如何使用jQuery在指定的HTML表格(table)中动态地添加和删除行。jQuery是一种广泛使用的JavaScript库,它简化了DOM操作,包括在表格中动态修改内容。 首先,我们要理解HTML表格的基本结构,一个...

    Ajax动态表格,可适时添加行、删除行、复制行

    删除行的操作类似,但需要传递要删除的行的标识(例如,行ID)到服务器。服务器删除对应数据后返回确认信息。客户端根据返回结果移除对应的表格行。 5. **复制行**: 复制行涉及获取当前选中行的所有数据,发送...

    jquery动态添加 删除指定行元素

    本文将深入探讨如何利用jQuery实现动态添加和删除指定行的功能。 首先,我们来看动态添加行的操作。这个过程通常包括获取表格引用、计算新行的索引、克隆已有行并将其插入到表格中。在提供的代码中,`add()`函数...

    JS动态增加删除表格行

    - **数据驱动**:将表格数据存储在JavaScript数组中,增加或删除行时直接操作数组,然后同步更新到DOM,这样可以避免直接操作DOM的频繁操作。 - **动画效果**:添加过渡动画可以使用户体验更好,比如在删除行时淡出...

    js动态添加和删除行

    2. **创建新行和单元格**:使用`document.createElement`创建`&lt;tr&gt;`和`&lt;td&gt;`元素,并设置其内容或属性。 3. **插入新行**:找到目标表格(`&lt;table&gt;`),使用`appendChild`或`insertBefore`方法将新行添加到表格的...

    表格动态追加、插入、删除行

    动态追加、插入和删除行是用户界面交互中的基本功能,可以极大地提升用户体验。这篇博客文章“表格动态追加、插入、删除行”可能详细介绍了如何在网页中实现这些操作。虽然没有提供直接的博客内容,但我们可以根据这...

    c# tablelayoutpanel 动态增加和删除列 已测试通过 动态合并单元格 动态添加控件

    在`TableLayoutPanel`中,可以使用`RowSpan`和`ColumnSpan`属性来合并行和列。例如,如果想让一个控件占据两行两列,可以这样设置: ```csharp Control myControl = new Button(); myControl.Dock = DockStyle.Fill...

    TableLayout,实现动态添加和删除行,并实现统计表格中的数据

    综上所述,TableLayout在Android开发中提供了一种强大且灵活的方式来组织和展示数据,通过动态操作行和统计数据,我们可以创建出交互性强、功能丰富的表格应用。在实际开发中,结合其他组件和设计模式,TableLayout...

    jquery表格动态添加删除行代码.zip

    5. **动态创建元素**:在添加行时,通常需要创建新的`&lt;tr&gt;`元素,并填充相应的`&lt;td&gt;`。这可以通过使用`$("&lt;tr&gt;&lt;td&gt;content&lt;/td&gt;&lt;/tr&gt;")`这样的方式来实现,然后使用`.append()`将其添加到表格中。 6. **数据管理**...

Global site tag (gtag.js) - Google Analytics