<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="Keywords" content="" />
<meta name="Description" content="" />
<title></title>
<style>
#tab {
border:1px solid #aaa;
border-collapse:collapse;
width:80%;
}
#tab th{
border:1px solid #aaaaaa;
background:#ECE9D8;
border-collapse:collapse;
padding:5px;
text-align:left;
}
#tab td{
border:1px solid #d8d8d8;
border-collapse:collapse;
padding:5px;
}
.txt{
border:1px solid #888;
background:#ECE9D8;
}
.checkBg{
border:1px solid #aaaaaa;
background:#ECE9D8;
}
.checkTxt{
border:1px solid #aaa;
background:##d8d8d8;
}
.button {
border:1px solid #888;margin:5px 0px;
width:80px;background:#ECE9D8;height:22px;line-height:22px;
}
</style>
<script language="javascript" type="text/javascript">
/*
author:kevin
email:kevin_218@163.com
msn:xiao-kevin@hotmail.com
website:http://www.bluekevin.com
*/
function $(id) {return document.getElementById(id);}
function $F(name){return document.getElementsByTagName(name);}
function add(){
var otr = document.getElementById("tab").insertRow(-1);
var checkTd=document.createElement("td");
checkTd.innerHTML = '<input type="checkbox" class="check" onclick="ccolor()" name="checkItem">';
var otd1 = document.createElement("td");
otd1.innerHTML = '<input type="text" class="txt" name="infoName_txt" id="infoName_txt'+($('tab').rows.length-1)+'" maxlength="30" value=""/>';
var otd2 = document.createElement("td");
otd2.innerHTML = '<input type="text" class="txt" name="infoValue_txt" id="infoValue_txt'+($('tab').rows.length-1)+'" maxlength="30" value=""/>';
otr.appendChild(checkTd);
otr.appendChild(otd1);
otr.appendChild(otd2);
}
function ccolor()
{
var c1 = document.getElementsByName('checkItem');
for(var i=0; i<c1.length; i++)
if(c1[i].checked)
{
c1[i].parentNode.parentNode.className="checkBg";
c1[i].parentNode.nextSibling.firstChild.className="checkTxt";
c1[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";
}
else { c1[i].parentNode.parentNode.className="";
c1[i].parentNode.nextSibling.firstChild.className="";
c1[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
}
function del(){
var c = document.getElementsByName('checkItem');
var idArray = new Array();
for(var i=0; i<c.length; i++)
if(c[i].checked)
idArray.push(i);
var rowIndex;
var nextDiff =0;
for(j=0;j< idArray.length;j++)
{
rowIndex = idArray[j]+1-nextDiff++;
document.getElementById("tab").deleteRow(rowIndex);
}
}
function save(){
var postString = $("postString");
var checkboxs = document.getElementsByName("checkItem");
var ttab = document.getElementsByName("infoName_txt");
var tt2 = document.getElementsByName("infoValue_txt");
var idArray = new Array();
for(i=0;i<checkboxs.length;i++)
{
idArray.push(ttab[i].value + "|" + tt2[i].value);
}
postString.value = idArray.join("-");
alert(postString.value);
}
function alldell()
{
var des =document.getElementsByName('checkItem');
for(var i=0;i<des.length;i++)
{
if(des[i].checked=document.getElementById('delall').checked){
des[i].parentNode.parentNode.className="checkBg";
des[i].parentNode.nextSibling.firstChild.className="checkTxt";
des[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";}
else{ des[i].parentNode.parentNode.className="";
des[i].parentNode.nextSibling.firstChild.className="";
des[i].parentNode.nextSibling.nextSibling.firstChild.className="";}
}
}
</script>
</head>
<body>
<input name="addv_btn" id="addv_btn" type="button" class="button" onClick="add();" value="add" />
<input name="del_btn" id="del_btn" type="button" class="button" onClick="del();" value="del" />
<input name="save" id="save" type="button" class="button" onClick="save();" value="save" /><br>
<table id="tab" >
<tr>
<th width="5%"><input type="checkbox" id="delall" onclick="alldell()"></td>
<th width="40%">Name</td>
<th width="55%">value</td>
</tr>
</table>
<p>
<input type="text" name="postString" id="postString">
</p>
</body>
</html>
分享到：
相关推荐
这篇博客"JavaScript动态添加删除表格行"可能详细讲解了如何使用JavaScript实现这一功能。通过给定的标签"源码"和"工具"，我们可以推测这篇文章会包含实际的代码示例和实用方法。 在HTML中，`<table>`元素用于创建...
在JavaScript中，动态添加和删除表格是常见的网页交互功能，主要应用于数据展示、表单处理等场景。这篇博文通过一个简单的实例，展示了如何利用JavaScript实现这个功能。在讲解之前，我们先了解一下HTML表格的基本...
本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先，我们来了解一下HTML表格的基本结构。一个表格由`<table>`元素包含，其中包含`<tr>`（表格行）元素，每行内可以有多个`<td>`（表格数据单元格）或`...
在JavaScript中，添加和删除表格是常见的操作，特别是在动态网页设计和前端开发中。这篇文章将深入探讨如何使用JavaScript实现这个功能，并提供一个简单的源码示例。首先，我们需要理解HTML表格的基本结构，然后利用...
在开发Web应用时，动态添加和删除表格行是常见的需求，尤其在数据管理或表单填写场景中。本文将深入探讨如何使用C#后端和JavaScript前端技术来实现这一功能，为初学者提供一个基础的实践指导。 首先，我们要了解...
- **交互功能**：例如，添加删除行、添加列、排序等功能，这需要更复杂的JavaScript逻辑。 通过熟练掌握这些技能，你不仅可以创建简单的表格，还能构建功能丰富的交互式表格。JavaScript的灵活性和强大的DOM操作...
JavaScript 动态创建 Table 表格和节点操作 根据提供的文件信息，我们可以总结出以下知识点： 1. 节点操作 在 HTML 文档中，所有内容都是节点，包括文档节点、元素节点、文本节点、属性节点和注释节点。节点操作...
在`jstable添加行删除行复制行.html`这个示例文件中，可以看到这些概念是如何具体实现的。通过阅读和理解代码，你可以更深入地学习如何利用JavaScript实现表格的动态管理。同时，也可以结合CSS和jQuery等库来增强...
在网页开发中，jQuery是一个非常流行的JavaScript库，它极大地简化了DOM操作，包括动态地添加和删除表格行。本文将深入探讨如何使用jQuery实现这一功能，以提高网页交互性。 一、HTML基础 首先，我们需要一个基本...
在本话题中，我们将深入探讨如何使用JavaScript来添加和删除HTML表格（table）中的行。这对于构建数据展示或者管理界面非常实用。 首先，让我们了解HTML表格的基本结构。一个简单的HTML表格由`<table>`标签定义，每...
本示例“jquery表格动态添加删除行代码”利用jQuery的强大功能，为用户提供了一个直观且用户友好的表格管理体验。这个代码实现了一个功能，即在表格中动态地添加和删除行，这对于数据展示和编辑是非常实用的。 首先...
本文将深入探讨如何使用 jQuery 动态添加和删除表格行，以实现高效且用户友好的数据展示。 首先，理解 HTML 表格的基本结构至关重要。`<table>` 元素用于创建表格，`<tr>` 代表表格行，`<td>` 或 `<th>` 分别表示...
在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...
总的来说，动态添加删除表格是前端开发中的常见需求，通过熟练掌握HTML、CSS和JavaScript，结合现代前端框架，我们可以创建出灵活、用户友好的交互式表格。在设计和实现过程中，需要注意性能优化，避免大量DOM操作...
总的来说，实现动态添加和删除表格行的基本步骤如下： 1. 选择表格和行：使用jQuery选择器定位到表格和目标行。 2. 创建新行：准备要插入的新行的HTML代码。 3. 插入行：使用`.after()`或`.before()`方法在适当的...
在JavaScript编程中，动态添加和删除表格行是一个常见的需求，特别是在网页交互和数据展示中。这个例子主要展示了如何使用JS实现这一功能。首先，我们来理解这个“动态添加table行的js例子”的核心知识点。 1. **...
这篇教程将专注于如何使用JavaScript动态地添加、删除Table的行，并实现排序功能，包括删除整行和整列。以下是对这些概念的详细解释： 1. **动态添加Table行：** 要动态添加行，我们可以使用`document....
动态添加和删除行通常涉及向现有表格动态插入或移除这些元素。 1. **动态添加行**： - 使用jQuery，可以获取表格引用，例如`$("#myTable")`，其中`#myTable`是表格的ID。 - 创建新的`<tr>`元素，可以使用`$('<tr>...