<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="./script/jquery-1.5.min.js"></script>
<script type="text/javascript">
var mainTable = "PowerTable";
$(document).ready(function () {
checkboxState();
delButtonState();
delButtonState();
$("#addRow").click(function () {
var randString = getRand();
var htmlText = "<tr id='" + randString + "'>";
htmlText += "<td width='10'><input class='checkbox' type='checkbox' alt='" + randString + "'/></td>";
htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
htmlText += "</tr>";
$("#" + mainTable).append(htmlText);
checkboxState();
});
$("#delRow").click(function () {
$(".checkbox").each(function () {
var findT = $(this).attr("alt").substr(0, 1);
if ($(this).attr("checked")) {
if (findT == "T") {
$("#" + $(this).attr("alt")).remove();
} else {
alert("ajax");
}
$("#checkbox").attr("checked", false);
}
});
checkboxState();
delButtonState();
});
$("tr td").live("keydown", function () {
});
$("#checkbox").click(function () {
checkboxState();
$(".checkbox").attr("checked", $(this).attr("checked"));
delButtonState();
});
$(".checkbox").live("click", function () {
if ($(this).attr("checked")) {
$("#delRow").attr("disabled", false);
} else {
delButtonState();
}
});
});
function delButtonState() {
$("#delRow").attr("disabled", true);
var checkboxArr = $(".checkbox");
for (var i = 0; i < checkboxArr.length; i++) {
if ($(checkboxArr[i]).attr("checked")) {
$("#delRow").attr("disabled", false);
break;
}
}
}
function checkboxState() {
if ($(".checkbox").length > 0) {
$("#checkbox").attr("disabled", false);
} else {
$("#checkbox").attr("disabled", true);
$("#checkbox").attr("checked", false);
}
}
function getRand() {
var randString = "T";
var dateRand = new Date();
randString += dateRand.getFullYear();
randString += dateRand.getMonth() + 1;
randString += dateRand.getDate();
randString += dateRand.getHours();
randString += dateRand.getMinutes();
randString += dateRand.getSeconds();
randString += dateRand.getMilliseconds();
return randString;
}
</script>
</head>
<body>
<table width="100%" border="1" cellSpacing="0" cellPadding="2" id="PowerTable">
<tr align="middle" bgColor="#ffcc00">
<th width=10>
<input id="checkbox" type="checkbox"/>
</th>
<th>
票证名称
</th>
<th>
领取数量
</th>
<th>
字轨
</th>
<th>
起始号码
</th>
<th>
终止号码
</th>
<th>
备注
</th>
</tr>
<tr id="201131516146490">
<td width="10"><input class="checkbox" alt="201131516146490" type="checkbox"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
</tr>
<tr id="201131516147235">
<td width="10"><input class="checkbox" alt="201131516147235" type="checkbox"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
</tr>
<tr id="201131516147863">
<td width="10"><input class="checkbox" alt="201131516147863" type="checkbox"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
</tr>
<tr id="201131516148516">
<td width="10"><input class="checkbox" alt="201131516148516" type="checkbox"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
</tr>
</table>
<input type="button" value="新增行" id="addRow">
<input type="button" value="删除行" id="delRow">
</body>
</html>
分享到：
发表评论
文章已被作者锁定，不允许评论。
-
10个你应该知道的Java正则表达式的例子
2014-04-29 11:24 419转载：10个你应该知道 ... -
Jqyery查找器
2012-02-06 18:04 0fdsfdsf -
event.keyCode
2011-12-12 19:46 682event.keyCode键值表 keycode 0 = ke ... -
javascript弹出窗口
2011-06-09 11:26 738javascript弹出窗口 window.open ( ... -
jQuery测试用品
2011-05-12 17:33 493var testDiv= $("#testDiv&q ... -
jQuery验证
2011-05-12 17:18 738var isError = false; var membe ... -
让IE支持getElementsByClassName
2011-03-10 12:22 1315if (navigator.appName == 'Micro ... -
Java总结
2010-09-06 15:22 495Java本身是很好的,自从第三方的框架出现后.各有各的出色的配 ... -
开发参考手册大全
2010-07-14 13:23 260名称 网址 ... -
Java框架缺包异常总结
2010-07-14 13:22 951编程时使用的struts,spring,hibernate ...
相关推荐
js 表格编辑 插入行 删除行 编辑数据 将表格内容生产json格式
在JavaScript编程中，实现动态添加和删除表格行是一项常见的需求，尤其在构建数据表或配置界面时。这个功能包括在表格中添加新行、删除现有行，并确保在操作过程中序号自动生成和更新。以下是对这个"js实现添加删除...
### JS 实现动态插入输入框以及删除、位置调换 #### 概述 在Web开发中，经常需要根据用户操作动态地添加或移除表单元素。本文将深入探讨如何利用JavaScript来实现动态插入文本输入框及对其进行删除与位置调整的...
总之，动态追加、插入和删除行是Web开发中常用的功能，通过理解HTML表格结构、JavaScript DOM操作以及可能使用到的前端框架，开发者可以构建出灵活、响应式的用户界面。如果你想要深入了解这一主题，建议查看原文...
### 动态插入、添加删除表格行的JS代码 在网页开发中，表格是一个非常重要的元素，用于展示数据。为了使网页更具交互性，我们常常需要动态地对表格进行操作，比如插入或删除行等。本文将通过一个具体的示例来讲解...
本知识点主要探讨如何使用JavaScript（简称JS）来实现表格动态插入行的功能。JavaScript是一种广泛使用的客户端脚本语言，它允许我们对网页进行实时更新和交互，而不需刷新整个页面。 首先，我们需要一个基本的HTML...
在JavaScript中，表格（Table）是网页数据展示的常用元素，而动态地增加或删除行则是常见的交互需求。本文将深入探讨如何巧妙地利用JavaScript来实现这个功能。 首先，我们需要了解HTML中的`<table>`元素及其相关...
在处理表格（Table）元素时，JavaScript可以帮助我们实现实时的动态操作，比如添加、删除和复制行。本文将详细讲解如何使用JavaScript来实现这些功能。 首先，我们需要了解HTML中的`<table>`元素。它用于创建表格，...
本文将深入探讨如何使用纯JavaScript实现表格的排序、插入、删除、移动行或列以及导出功能，同时还会提到如何增加表头。 首先，让我们讨论表格排序。在JavaScript中，我们可以获取表格元素，然后对数据进行比较以...
要添加一行，我们需要确定要在哪一行之后插入新的行。jQuery提供了`eq()`方法来选择具有特定索引的元素。例如，`$("#mytable tr").eq(0)`将选择第一行，`$("#mytable tr").eq(-1)`将选择最后一行。`nth-child(n)`...
在JavaScript中，动态添加行和删除行是网页交互中常见的需求，特别是在表格或者列表展示数据时。这通常涉及到DOM操作，包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点： 1. DOM操作： - `...
本文将深入探讨如何使用JavaScript来动态地增加和删除表格（Table）的行。 首先，我们需要了解HTML表格的基本结构。一个基本的表格由`<table>`元素、`<tr>`（表格行）元素、`<td>`（表格数据单元格）元素组成。如果...
本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先，我们来了解一下HTML表格的基本结构。一个表格由`<table>`元素包含，其中包含`<tr>`（表格行）元素，每行内可以有多个`<td>`（表格数据单元格）或`...
JavaScript splice 数组操作（删除，插入）JavaScript splice 数组操作（删除，插入）JavaScript splice 数组操作（删除，插入）JavaScript splice 数组操作（删除，插入）JavaScript splice 数组操作（删除，插入）...
在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...
本主题聚焦于一款能够实现类似Excel功能的前端表格工具，它允许用户进行编辑、合并单元格、删除和插入行等操作，极大地提高了数据管理和交互的便利性。下面将详细探讨这款表格组件的关键特性和实现技术。 首先，该...
JSP中使用JavaScript动态插入删除输入框实现代码 JSP（Java Server Pages）是一种基于Java技术的服务器端脚本语言，主要用于生成动态网页内容。JavaScript则是一种客户端脚本语言，主要用于实现网页的交互功能。在...
标题解释:JS 删除或者添加一行的代码，可以直接测试。 描述解释：该代码提供了 JavaScript 实现动态添加或删除表格行的功能，可以直接测试和应用。 标签解释：删除添加一行，指的是在网页中通过 JavaScript 动态...
`test.js`可能是实现这种功能的一个脚本文件，其中包含了动态插入HTML元素的JavaScript代码。 在`Noname1.html`这个文件中，很可能展示了一个使用JavaScript动态插入HTML元素的实际例子。你可以打开这个文件查看其...
在JavaScript（JS）编程中，动态增加和删除行是一项常见的任务，特别是在开发表格或表单相关的Web应用时。这项技术可以提升用户体验，使用户能够实时地添加或移除数据，无需刷新整个页面。以下是对这一知识点的详细...