`

表格中删除指定行javascript操作

 
阅读更多
	function $(objId){ 
		return document.getElementById(objId); 
	} 
	function del_tbl(tblN,ckN){ 
		var ck = document.getElementsByName(ckN); 
    	var tab = $(tblN);
    	var existCk = false; 
		var rowIndex;
		if(ck){ 
			for(var i=0;i<ck.length;i++){ 
        		if(ck[i].checked){ 
        			existCk = true;
					rowIndex = ck[i].parentNode.parentNode.sectionRowIndex; 
        			tab.deleteRow(rowIndex); 
					i = -1; 
				} 
			} 
		}
		if (!existCk) {
			alert('请选择要删除的记录');
		}
	}

生成表格的javascript:

 function initTable(params){
        	var tableData = "<table id=\"decoderResourceTable\"  class=\"list-table\" align = \"center\"   style=\"margin:0;padding:0;\" cellspacing=\"1\" cellpadding=\"0\">";
        	tableData = tableData + "<tr>";
            tableData = tableData + "<td width=\"8%\" align=\"center\"><input type = \"checkbox\" id = \"checkAllId\" onclick = \"checkAll(this)\"/></td>";
        	tableData = tableData + "<td width=\"12%\" align=\"center\">编号</th>";
        	tableData = tableData + "<td width=\"34%\" align=\"center\">解码设备名称</td>";
        	tableData = tableData + "<td width=\"22%\" align=\"center\">设备类型</td>";
        	tableData = tableData + "<td width=\"24%\" align=\"center\">IP地址</td>";
        	tableData = tableData + "</tr>";
        	
        	for(var i=0; i<params.length; i++){
        		if (params[i] != ""){
        			var rowParams = params[i].split(";");
        			if(rowParams.length == 4){
        			    if( i%2 == 1 ){
        			       tableData = tableData + "<tr class=\"trEven\" align=\"center\" id=\"" + nCol + "\" onClick=\"\";>";
        			    } else {
        			       tableData = tableData + "<tr class=\"trOdd\" align=\"center\" id=\"" + nCol + "\" onClick=\"\";>";  
        			    }				
        				tableData = tableData + "<td class=\"list\"><input id = \"checkboxDecodesId\" type = \"checkbox\" name = \"checkboxRlDecodes\" /></td>";
        				tableData = tableData + "<td class=\"list\">" + nCol + "</td>";
        				tableData = tableData + "<td class=\"text-left\" class=\"list\">" + rowParams[1] + "</td>";
        				tableData = tableData + "<td class=\"text-left\" class=\"list\">" + rowParams[2] + "</td>";
        				tableData = tableData + "<td class=\"text-left\" class=\"list\">" + rowParams[3] + "</td>";
        				tableData = tableData + "<input type=\"hidden\" name=\"decodeResId\" value=\"" + rowParams[0] + "\"/>";
        				tableData = tableData + "<input type=\"hidden\" name=\"typeMtdsId\" value=\"" + rowParams[2] + "\"/>";
        				tableData = tableData + "</tr>";
        				nCol++;
        			}
        		}
        	}
        	tableData = tableData + "</table>";
        	old_Decoder = null;
        	
        	return tableData;
        }


全选所有checkBox的操作

function checkAll(chk){
   			var chkArray;
   			chkArray=document.getElementsByName("checkboxRlDecodes");
   			if(chk){
   			if(chkArray){
   				for(var i=0;i<chkArray.length;i++){
   					chkArray[i].checked=chk.checked;
   				}
  		 	}
  		 	}
		}
分享到:
评论

相关推荐

    js操作table元素,表格的行列新增、删除汇集.txt

    根据给定的文件信息,我们可以总结出一系列关于使用JavaScript(简称JS)操作HTML中的`&lt;table&gt;`元素,尤其是对表格的行(`&lt;tr&gt;`)和列(`&lt;td&gt;`或`&lt;th&gt;`)进行增删操作的关键知识点。以下是对这些功能的详细解释: #...

    JavaScript操作表格

    本篇内容主要介绍了使用JavaScript进行表格操作的方法,包括创建表格、删除行与单元格、选取表格元素以及处理表格事件等。这些技术对于开发动态网页或应用程序来说是非常有用的。通过这些技术,可以实现更加灵活的...

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

    在本文中,我们将深入探讨如何使用JavaScript来动态地操作表格,包括添加、删除行、列以及单元格。这将帮助开发者在不刷新页面的情况下,实现灵活的数据管理功能。 1. **创建表格** 在HTML中,我们可以使用`...

    javascript表格操作

    在探讨“javascript表格操作”的知识点时,我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素,包括但不限于创建、删除行或单元格,以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...

    jQuery删除table指定行

    总的来说,删除HTML表格中的指定行涉及到jQuery的选择器和DOM操作。掌握这些技能将有助于你更高效地管理动态网页中的表格数据。同时,要注意在实际应用中确保用户体验良好,例如提供确认提示,避免误删重要信息。

    javascript 表格操作

    - `insertRow()` 方法允许在表格中指定位置插入新行。若未指定位置,则默认添加到表格末尾。 - 示例代码:`theTableBody.insertRow(where);` 其中,`where` 参数指定了新行的插入位置。 #### 删除行:`deleteRow()`...

    javascript动态添加表格数据行

    在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...

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

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

    JS实现从表格中动态删除指定行的方法

    通过本文的介绍,我们了解了如何使用JavaScript和DOM操作来实现表格中动态删除指定行的功能。掌握这些知识点对于进行动态网页开发具有重要意义,不仅能够提升网页的用户体验,还可以在处理动态数据时提供更多的交互...

    javascript表格操作集锦

    在JavaScript中,表格操作是网页动态交互的重要组成部分。本文将详细介绍如何使用JavaScript来操作HTML表格,包括创建、删除表格行和单元格以及设置属性。 1. **插入行和单元格** - `insertRow()`函数用于在表格...

    74、jquery表格动态添加删除行代码

    本文将深入探讨如何使用jQuery实现表格的动态添加和删除行功能,这在许多网页应用中是非常常见的需求。 首先,让我们理解基本概念。在HTML中,表格由`&lt;table&gt;`元素定义,每行由`&lt;tr&gt;`元素表示,而单元格则由`&lt;td&gt;`...

    动态插入、添加删除表格行的JS代码

    本文将通过一个具体的示例来讲解如何使用JavaScript实现动态插入和删除表格行的功能。 #### 一、核心概念与原理 1. **DOM (Document Object Model)**:DOM 是一种标准,用于表示 HTML 和 XML 文档的结构。它定义了...

    javascript动态创建表格

    * `deleteRow(index)`: 删除表格中的指定行 * `deleteCell(index)`: 删除行中的指定单元格 注意事项 * 在删除表格的行时,表格的行数会马上变化,因此需要注意循环删除的顺序 * 使用 `deleteRow()` 和 `deleteCell...

    JavaScript动态操作表格实例(添加,删除行,列及单元格)

    本文档主要介绍了如何使用JavaScript来动态操作HTML表格,包括添加、删除表格中的行、列以及单元格。以下是对文档中提及内容的知识点详细说明: ### 标题知识点 1. **JavaScript动态操作表格**:指利用JavaScript...

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

    6. **数据管理**:为了确保添加和删除行的操作正确无误,可能需要维护一个数据数组,存储表格中的数据。这样,在添加新行时可以从数组中获取数据,删除行时更新数组内容。 7. **用户交互**:为了提供良好的用户体验...

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

    在JavaScript中,我们可以利用DOM(文档对象模型)方法来对这些元素进行操作。 描述中提到的两种方法是: 1. `appendChild()`:这是DOM中的一个通用方法,用于将一个节点添加到父节点的子节点列表的末尾。例如,...

    javascript对table的添加,删除行的操作

    在JavaScript中,对HTML表格(`&lt;table&gt;`元素)进行添加和删除行的操作是常见的前端开发任务,尤其在动态展示数据或用户交互场景下。这篇博文主要探讨如何使用JavaScript实现这些功能。 首先,我们需要理解HTML表格...

    CSS之jQuery删除指定行

    在删除指定行的情景中,我们首先需要选择要删除的行,这可以通过jQuery的选择器来完成。 假设我们有一个HTML表格,结构如下: ```html 数据1 数据2 数据3 数据4 &lt;!-- 更多行... --&gt; ``` 如果我们...

    jquery实现的可增加,删除行,可多行上下移动表格

    这个功能允许用户在表格中动态添加、删除行,以及上下移动表格中的行,提供了更灵活的数据操作体验。在网页开发中,这种功能常见于数据管理界面,便于用户对数据进行排序和编辑。 首先,我们需要理解jQuery库的基本...

    table--表格的各种操作--增,删,移动,插入到指定位置

    在JavaScript中,需要先找到要删除的行的索引,然后执行删除操作。 - 在数据库中,使用`DELETE FROM`语句可以删除一条或多条符合特定条件的记录。 3. **移动行**: - 移动HTML表格的行涉及获取要移动的行,然后...

Global site tag (gtag.js) - Google Analytics