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;
}
}
}
}
分享到:
相关推荐
根据给定的文件信息,我们可以总结出一系列关于使用JavaScript(简称JS)操作HTML中的`<table>`元素,尤其是对表格的行(`<tr>`)和列(`<td>`或`<th>`)进行增删操作的关键知识点。以下是对这些功能的详细解释: #...
本篇内容主要介绍了使用JavaScript进行表格操作的方法,包括创建表格、删除行与单元格、选取表格元素以及处理表格事件等。这些技术对于开发动态网页或应用程序来说是非常有用的。通过这些技术,可以实现更加灵活的...
在本文中,我们将深入探讨如何使用JavaScript来动态地操作表格,包括添加、删除行、列以及单元格。这将帮助开发者在不刷新页面的情况下,实现灵活的数据管理功能。 1. **创建表格** 在HTML中,我们可以使用`...
在探讨“javascript表格操作”的知识点时,我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素,包括但不限于创建、删除行或单元格,以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...
总的来说,删除HTML表格中的指定行涉及到jQuery的选择器和DOM操作。掌握这些技能将有助于你更高效地管理动态网页中的表格数据。同时,要注意在实际应用中确保用户体验良好,例如提供确认提示,避免误删重要信息。
- `insertRow()` 方法允许在表格中指定位置插入新行。若未指定位置,则默认添加到表格末尾。 - 示例代码:`theTableBody.insertRow(where);` 其中,`where` 参数指定了新行的插入位置。 #### 删除行:`deleteRow()`...
在JavaScript编程中,动态添加表格数据行是一种常见的需求,特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录,提高了用户体验。在这个例子中,我们将探讨如何利用...
本文将深入探讨如何利用jQuery实现动态添加和删除指定行的功能。 首先,我们来看动态添加行的操作。这个过程通常包括获取表格引用、计算新行的索引、克隆已有行并将其插入到表格中。在提供的代码中,`add()`函数...
通过本文的介绍,我们了解了如何使用JavaScript和DOM操作来实现表格中动态删除指定行的功能。掌握这些知识点对于进行动态网页开发具有重要意义,不仅能够提升网页的用户体验,还可以在处理动态数据时提供更多的交互...
在JavaScript中,表格操作是网页动态交互的重要组成部分。本文将详细介绍如何使用JavaScript来操作HTML表格,包括创建、删除表格行和单元格以及设置属性。 1. **插入行和单元格** - `insertRow()`函数用于在表格...
本文将深入探讨如何使用jQuery实现表格的动态添加和删除行功能,这在许多网页应用中是非常常见的需求。 首先,让我们理解基本概念。在HTML中,表格由`<table>`元素定义,每行由`<tr>`元素表示,而单元格则由`<td>`...
本文将通过一个具体的示例来讲解如何使用JavaScript实现动态插入和删除表格行的功能。 #### 一、核心概念与原理 1. **DOM (Document Object Model)**:DOM 是一种标准,用于表示 HTML 和 XML 文档的结构。它定义了...
* `deleteRow(index)`: 删除表格中的指定行 * `deleteCell(index)`: 删除行中的指定单元格 注意事项 * 在删除表格的行时,表格的行数会马上变化,因此需要注意循环删除的顺序 * 使用 `deleteRow()` 和 `deleteCell...
本文档主要介绍了如何使用JavaScript来动态操作HTML表格,包括添加、删除表格中的行、列以及单元格。以下是对文档中提及内容的知识点详细说明: ### 标题知识点 1. **JavaScript动态操作表格**:指利用JavaScript...
6. **数据管理**:为了确保添加和删除行的操作正确无误,可能需要维护一个数据数组,存储表格中的数据。这样,在添加新行时可以从数组中获取数据,删除行时更新数组内容。 7. **用户交互**:为了提供良好的用户体验...
在JavaScript中,我们可以利用DOM(文档对象模型)方法来对这些元素进行操作。 描述中提到的两种方法是: 1. `appendChild()`:这是DOM中的一个通用方法,用于将一个节点添加到父节点的子节点列表的末尾。例如,...
在JavaScript中,对HTML表格(`<table>`元素)进行添加和删除行的操作是常见的前端开发任务,尤其在动态展示数据或用户交互场景下。这篇博文主要探讨如何使用JavaScript实现这些功能。 首先,我们需要理解HTML表格...
在删除指定行的情景中,我们首先需要选择要删除的行,这可以通过jQuery的选择器来完成。 假设我们有一个HTML表格,结构如下: ```html 数据1 数据2 数据3 数据4 <!-- 更多行... --> ``` 如果我们...
这个功能允许用户在表格中动态添加、删除行,以及上下移动表格中的行,提供了更灵活的数据操作体验。在网页开发中,这种功能常见于数据管理界面,便于用户对数据进行排序和编辑。 首先,我们需要理解jQuery库的基本...
在JavaScript中,需要先找到要删除的行的索引,然后执行删除操作。 - 在数据库中,使用`DELETE FROM`语句可以删除一条或多条符合特定条件的记录。 3. **移动行**: - 移动HTML表格的行涉及获取要移动的行,然后...