javascript 动态表格 可新增删除表格行 移动行
注释少了点
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head><title>new document</title>
</head><body>
<table id="data" style="border: 2px solid rgb(255, 255, 255); width: 300px; background-color: #FFFFCC;" >
<tbody>
<tr value="text"onmouseover="this.style.background='#CDE7FF';" onmouseout="this.style.background='';"><td>text:</td><td>text</td><td><input type="button" value="删除" onclick="d()" style="cursor:pointer;"><input type="button" value="↑" onclick="mu()" style="cursor:pointer;"><input type="button" value="↓" onclick="md()" style="cursor:pointer;"></td></tr>
<tr value="link" onmouseover="this.style.background='#CDE7FF';" onmouseout="this.style.background='';"><td>link:</td><td><a href="#" onclick="return false;">linkName</a></td><td><input type="button" onclick="d()" value="删除" style="cursor:pointer;"><input type="button" value="↑" onclick="mu()" style="cursor:pointer;"><input type="button" value="↓" onclick="md()" style="cursor:pointer;"></td></tr>
</tbody>
</table>
<input type="button" value="增加文本" onclick="iT();" />
<input type="button" value="增加链接" onclick="iL();" />
<input type="button" value="获取值" onclick="s();" />
<SCRIPT LANGUAGE="JavaScript">
<!--
/*
*/
var tb = document.getElementById("data").tBodies[0];
var len = tb.rows.length;
function s(){
var tt = tb.rows;
var temp = '';
for(var i = 0 ;i<tt.length;i++)
{
//alert(tt[i].value);
temp += tt[i].value+":"
}
alert(temp);
}
function d()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
//alert(_tr.rowIndex);
tb.deleteRow(_tr.rowIndex);
//tb.removeChild(_tr);
}
function md()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
var index = _tr.rowIndex
if(index!=tb.rows.length-1)
{
tb.moveRow(index,index+1);
}else{
alert("已经是最下面了")
}
}
function mu()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
var index = _tr.rowIndex
if(index!=0)
{
tb.moveRow(index,index-1);
}else{
alert("已经是最上面了")
}
}
function iT()
{
len++;
var _tr = document.createElement("tr");
_tr.onmouseover = function(){ this.style.background="#CDE7FF";};
_tr.onmouseout = function(){ this.style.background="";};
_tr.value = "test"+len;
//_tr.setAttribute('value',"test");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var text1 = document.createTextNode("text:");
var text2 = document.createTextNode("test "+len);
var bTxt = document.createElement("input");
bTxt.type = "button";
bTxt.value = "删除";
bTxt.onclick = function ()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
//alert(_tr.rowIndex);
tb.deleteRow(_tr.rowIndex);
}
var mdb = document.createElement("input");
mdb.type = "button";
mdb.value = "↓";
mdb.onclick = function ()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
var index = _tr.rowIndex
if(index!=tb.rows.length-1)
{
tb.moveRow(index,index+1);
}else{
alert("已经是最下面了")
}
}
var mub = document.createElement("input");
mub.type = "button";
mub.value = "↑";
mub.onclick = function ()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
var index = _tr.rowIndex
if(index!=0)
{
tb.moveRow(index,index-1);
}else{
alert("已经是最上面了")
}
}
tb.insertBefore(_tr,null);
_tr.insertBefore(td1,null);
td1.insertBefore(text1,null);
_tr.insertBefore(td2,null);
td2.insertBefore(text2,null);
_tr.insertBefore(td3,null);
td3.insertBefore(bTxt,null);
td3.insertBefore(mub,null);
td3.insertBefore(mdb,null);
//alert(_tr.innerHTML);
//alert(tb.innerHTML);
}
function iL()
{
len++;
var _tr = document.createElement("tr");
_tr.onmouseover = function(){ this.style.background="#CDE7FF";};
_tr.onmouseout = function(){ this.style.background="";};
_tr.value = "testlink"+len;
var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var _a = document.createElement("a");
_a.href= "#";
_a.onclick = function (){return false;};
_a.innerHTML = ("linknametest "+len);
var text1 = document.createTextNode("link:");
var bTxt = document.createElement("input");
bTxt.type = "button";
bTxt.value = "删除";
bTxt.onclick = function ()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
//alert(_tr.rowIndex);
tb.deleteRow(_tr.rowIndex);
}
var mdb = document.createElement("input");
mdb.type = "button";
mdb.value = "↓";
mdb.onclick = function ()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
var index = _tr.rowIndex
if(index!=tb.rows.length-1)
{
tb.moveRow(index,index+1);
}else{
alert("已经是最下面了")
}
}
var mub = document.createElement("input");
mub.type = "button";
mub.value = "↑";
mub.onclick = function ()
{
var s = event.srcElement;
var _tr = s.parentNode.parentNode;
var index = _tr.rowIndex
if(index!=0)
{
tb.moveRow(index,index-1);
}else{
alert("已经是最上面了")
}
}
tb.insertBefore(_tr,null);
_tr.insertBefore(td1,null);
td1.insertBefore(text1,null);
_tr.insertBefore(td2,null);
td2.insertBefore(_a,null);
_tr.insertBefore(td3,null);
td3.insertBefore(bTxt,null);
td3.insertBefore(mub,null);
td3.insertBefore(mdb,null);
//alert(_tr.innerHTML);
//alert(tb.innerHTML);
}
//-->
</SCRIPT>
</body></html>
分享到：
相关推荐
综上所述，这些JS函数提供了强大的工具集，可用于动态管理和操作HTML表格，包括行和列的增删、单元格的合并与移动、样式的一致性保持，以及表格布局的智能调整。通过合理运用这些功能，开发者能够创建高度灵活和响应...
本示例主要涉及了六个关键功能：表格的刷新、复选框的全选与全不选、行的添加、拷贝、上下移动以及删除。以下是对这些功能的详细解释： 1. **表格刷新**： 刷新表格通常是为了更新表格中的数据，这可能是因为后台...
1. **HTML表格动态添加行**：在JavaScript或jQuery中，我们可以直接操作DOM元素来实现。例如，创建一个新的`<tr>`元素，为其填充`<td>`，然后将其插入到表格的适当位置。在.NET后台，可以生成HTML字符串并返回给前端...
在IT领域，动态新增行是一种常见的用户界面交互设计，它主要应用于数据输入或者表格编辑的场景，例如在网页表单、电子表格或者数据库管理应用中。这种功能允许用户根据需要自定义输入数据的数量，而不仅仅局限于预设...
至此，我们就实现了从一个Bootstrap Table向另一个表格移动行记录的功能。用户可以通过选择源表中的行，点击“Add to Target”按钮将行添加到目标表，或者选择目标表中的行，点击“Remove from Target”按钮移除。 ...
总结起来，这些JavaScript方法提供了一套完整的工具集，用于动态地管理HTML表格的行列，包括新增、删除、合并、移动、赋值样式以及进行必要的验证和参数获取。这在网页开发中是一个强大的功能集合，尤其适用于创建...
在本文中，我们将探讨如何利用Bootstrap和Vue.js这两个强大的技术栈来实现一个具有动态展示、新增和删除功能的表格。Bootstrap作为流行的前端框架，提供了丰富的UI组件，而Vue.js则是一个轻量级的渐进式JavaScript...
当用户按下鼠标并在表格行上移动时，脚本会捕捉这些事件并更新行的位置。为了实现这一点，开发者可能使用了HTML5的`draggable`属性，或者依赖于像jQuery UI这样的库来处理复杂的拖放逻辑。同时，为了保持数据的同步...
"前端表格增删查改例子bootstrap+layer+jquery"是一个实用的示例项目，它结合了流行的前端技术和组件，以实现表格数据的动态操作。下面将详细介绍这个项目所涉及的知识点。 首先，Bootstrap是Twitter推出的一个开源...
本文将详细讲解如何使用JavaScript实现输入框内上下左右键以及Enter键控制表格（table）中的光标移动，并在光标到达最后一个输入框时新增一行，确保这个功能在多个浏览器中都能正常工作。 首先，我们需要理解...
本主题探讨的是如何将静态表格转变为可编辑的，允许用户进行添加、删除、修改以及行列移动的操作，这对于创建动态数据管理界面非常有用。我们将以"editable_static_form.rar_html 增删改"为例，深入解析实现这一功能...
书中从JavaScript语言基础开始，分别讨论了图像、框架、浏览器窗口、表单、正则表达式、用户事件和cookie，并在上一版的基础上新增了两章，讲述jQuery框架的基础知识。本书不仅介绍了基础知识和使用方法，也深入探讨...
3. 数据操作：提供编辑、新增、删除等操作，通常有行内编辑和弹窗编辑两种模式。 4. 排序和过滤：用户可以对表格数据进行升序、降序排序，同时支持多种过滤条件，方便快速查找所需信息。 5. 分页：对于大数据量，...
3. JavaScript（JS）核心功能：JS是实现动态交互的关键，用于处理用户输入、更新DOM（文档对象模型）以反映数据变化、执行验证逻辑等。在这个系统中，JS可能用于实现增删改查的逻辑，如添加新工人信息，删除选定的...
为了实现动态地向表格添加和删除行，可以结合 JavaScript 函数与按钮事件进行操作。如下示例，通过两个按钮，分别绑定添加和删除行的操作。 ```html ();"> ('test');"> ``` - 添加行函数 `addRow` 会自增行计数器...
JavaScript是一种广泛使用的脚本语言，它被内置在大多数的现代网页浏览器中，用于实现网页的动态交互。JavaScript语言灵活，功能强大，既可以用作描述式语言，也可以用来实现面向对象的编程。 首先，从JavaScript的...
2. 资产新增：用户可以添加新的资产记录，录入相关信息，如资产编号、名称、类型、购置日期、价值、使用状态等。系统会将这些数据保存到数据库中，以便后续查询和管理。 3. 资产修改：对于已存在的资产记录，用户...
表单在移动设备上展示数据时，需要考虑到屏幕尺寸有限，因此框架通常会提供优化的表格布局，支持滚动、分页和列筛选等功能。"新增/编辑"功能则是指框架提供的数据操作能力，允许用户在界面上添加新记录或编辑现有...
7. **表格操作验证**：`sortTable.js`和`check.js`结合使用，可以实现对表格中的数据进行操作时的验证，比如编辑、删除或新增记录。 8. **Tab菜单验证**：`tabmenu.js`可能包含与Tab切换相关的验证，确保在切换到...