`
hcx_2008
  • 浏览: 122170 次
  • 性别: Icon_minigender_1
  • 来自: 西安
社区版块
存档分类
最新评论

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

    博客分类：
  • J2EE
JavaScriptIE脚本XHTML 
阅读更多
2008-03-17 10:07
这段时间写了不少脚本，感觉蛮有意思的，虽然能用脚本把效果实现出来，但是在后台服务器端获取数据的时候还是蛮麻烦的，这里仅提供效果实现的简单代码。

利用js来动态创建表格有两种格式，appendChild()和insertRow、insertCell()。两种方式其实差不多，但第一种有可能在IE上有问题，所以推荐大家使用第二种了，直接说吧。

1、inserRow()和insertCell()函数

insertRow()函数可以带参数，形式如下：

insertRow(index)：index从0开始

这个函数将新行添加到index的那一行前，比如insertRow(0),是将新行添加到第一行之前。默认的insertRow()函数相当于insertRow(-1)，将新行添加到表的最后。一般我们在使用的时候都是：objTable.insertRow(objTable.rows.length).就是为表格objTable在最后新增一行。

insertCell()和insertRow的用法相同，这里就不再说了。

2、deleteRow()和deleteCell()方法

deleteRow()函数可以带参数，形式如下：deleteRow(index)：index从0开始

和上面两个方法差不多的意思，就是删除指定位置的行和单元格。要传入的参数：Index是行在表格中的位置，可以下面的方法取得然后去删除：

var row=document.getElementById("行的Id");
var index=row.rowIndex;//有这个属性，嘿嘿
objTable.deleteRow(index);

在使用过程中我碰到的一个问题跟大家说一下，就是删除表格的行的时候，如果你删除了某一行，那么表格行数是马上就变化的，所以如果你要删除表格的所有行，下面的代码是错误的：

function clearRow(){
   objTable= document.getElementById("myTable");
     
   for( var i=1; i<objTable.rows.length ; i++ )
   {
   tblObj.deleteRow(i);   
      }
}

这段代码要删除原来的表格的表体，有两个问题。首先不能是deleteRow(i)，应该是deleteRow(1)。因为在删除表格行的时候，表格的行数在变化，这就是问题的关键，rows.length总是在变小，删除的行数总是会比预想的要少一半，所以正确的删除表格的行的代码应该这样：

function clearRow(){
   objTable= document.getElementById("myTable");
   var length= objTable.rows.length ; 
   for( var i=1; i<length; i++ )
   {
       objTable.deleteRow(i);   
      }
}

3、动态设置单元格与行的属性

A、采用setAttribute()方法，格式如下：setAttribute(属性，属性值)

说明：这个方法几乎所有的DOM对象都可以使用，第一个参数是属性的名称，比如说：border，第二个就是你要为border设置的值了，比如：1

var objMyTable = document.getElementById("myTable");

objMyTable.setAttribute("border",1);//为表格设置边框为1

其他的比如你要为一个TD设置高度，同样先取得这个TD对象，然后使用setAttribute()方法

var objCell = document.getElementById("myCell");

objCell.setAttribute("height",24);//为单元格设置高度为24

在使用的时候遇到一个设置样式的问题，不能用setAttribute("class","inputbox2");而应该使用setAttribute("className","inputbox2")，呵呵，其他我估计也有同样的问题，有些属性和我们在DW里面的不一致，呵呵，大家自己摸索吧。

B、直接赋值

var objMyTable = document.getElementById("myTable");

objMyTable.border=1;//为表格设置边框为1

这个方法也全部适用，呵呵。

4、创建表格

了解了行<tr>与单元格<td>的增删那就可以创建表格了。

第一步：你需要有一个你去动态变化的表格，我这里讲的是已经存在页面的表格，我们要设置一个id:myTable

var objMyTable = document.getElementById("myTable");

第二步：创建行与列的对象

var index = objMyTable.rows.length-1;
var nextRow = objMyTable.insertRow(index);//要新增的行，我这里是从倒数第二行开始新增的

//单元格箱号
var newCellCartonNo = nextRow.insertCell();
var cartonNoName = "IptCartonNo";
newCellCartonNo.innerHTML = "&nbsp;<input type='text' size='5' name="+cartonNoName+" id="+cartonNoName+" value=''>";
newCellCartonNo.setAttribute("className","tablerdd");

这样就搞定了，可以简单的创建一个行和列了。具体的代码我贴在下面。只是很简单的例子，不过方法就大概是上面的了，呵呵，慢慢摸索吧~

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>蓝光-BlueShine</title>
<script language="JavaScript">
var Count=false,NO=1;
function addRow(){
Count=!Count;
//添加一行
var newTr = testTbl.insertRow(testTbl.rows.length);
//添加两列
var newTd0 = newTr.insertCell();
var newTd1 = newTr.insertCell();
var newTd2 = newTr.insertCell();
//设置列内容和属性
if(Count){newTr.style.background="#FFE1FF";}
else {newTr.style.background="#FFEFD5";}
newTd0.innerHTML = '<input type=checkbox id="box4">';
NO++
newTd1.innerText="第"+ NO+"行";
}
</script>
</head>

<body>
<table width="399" border=0 cellspacing="1" id="testTbl" style="font-size:14px;" >
<tr bgcolor="#FFEFD5">
<td width=6%><input type=checkbox id="box1"></td>
<td >第1行</td>
<td > </td>
</tr>
</table>
<label>
<input type="button" value="插入行" onclick="addRow()" />
</label>
</body>
</html>



5、appendChild()方法

我就直接贴代码了，大家去研究，时间紧，哈哈，见谅~

<html>
<head>
<title>My Test Page</title>
<script type="text/javascript">
<!--
var textNumber = 1;
function addTextBox(form, afterElement) {
// Increment the textbox number
textNumber++;
// Create the label
var label = document.createElement("label");
// Create the textbox
var textField = document.createElement("input");
textField.setAttribute("type","text");
textField.setAttribute("name","txt"+textNumber);
textField.setAttribute("id","txt"+textNumber);
// Add the label's text
label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));
// Put the textbox inside
label.appendChild(textField);
// Add it all to the form
form.insertBefore(label,afterElement);
return false;
}
function removeTextBox(form) {
if (textNumber > 1) { // If there's more than one text box
    // Remove the last one added
    form.removeChild(document.getElementById("txt"+textNumber).parentNode);
    textNumber--;
}
}
//-->
</script>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
<p>
    <input type="button" value="Add Textbox" onclick="addTextBox(this.form,this.parentNode)" />
    <input type="button" value="Remove Textbox" onclick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>

<html>
<head>
<title>My Test Page</title>
<script type="text/javascript">
<!--
var textNumber = 1;
function addTextBox(form, afterElement) {
// Increment the textbox number
textNumber++;
// Create the label
var label = document.createElement("label");
// Create the textbox
var textField = document.createElement("input");
textField.setAttribute("type","text");
textField.setAttribute("name","txt"+textNumber);
textField.setAttribute("id","txt"+textNumber);
// Add the label's text
label.appendChild(document.createTextNode("Text Box #"+textNumber+": "));
// Put the textbox inside
label.appendChild(textField);
// Add it all to the form
form.insertBefore(label,afterElement);
return false;
}
function removeTextBox(form) {
if (textNumber > 1) { // If there's more than one text box
    // Remove the last one added
    form.removeChild(document.getElementById("txt"+textNumber).parentNode);
    textNumber--;
}
}
//-->
</script>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<label>Text Box #1: <input type="text" name="txt1" id="txt1" /></label>
<p>
    <input type="button" value="Add Textbox" onclick="addTextBox(this.form,this.parentNode)" />
    <input type="button" value="Remove Textbox" onclick="removeTextBox(this.form)" />
</p>
<p><input type="Submit" value="Submit" /></p>
</form>
</body>
</html>
分享到：
| Maven使用手册
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    本压缩包中的"javascript 动态创建表格：新增、删除行和单元格.zip"内容着重介绍了如何使用JavaScript来动态地构建和修改HTML表格。 首先，我们要理解表格在HTML中的基本结构，它由`&lt;table&gt;`元素包含，内部包含`...

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

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

    纯javascript增加删除表格行

    2. **新增行**：要向表格添加新行，首先需要创建一个`&lt;tr&gt;`元素，然后为该行添加单元格（`&lt;td&gt;`）。这可以通过`document.createElement()`方法实现，最后使用`appendChild()`将新行添加到表格的`&lt;tbody&gt;`元素中。...

    JQuery实现动态表格点击按钮表格增加一行

    在这个例子中，DOM操作用于动态地向表格中插入新的行（`insertRow`）和单元格（`insertCell`）。 2. 表格操作：表格是HTML中表示表格数据的结构，由`&lt;table&gt;`、`&lt;tr&gt;`（表格行）、`&lt;td&gt;`（表格数据单元格）或`&lt;th&gt;`...

    js表格操作，DOM实现数据动态增删查改

    - 利用`document.createElement()`动态创建`&lt;tr&gt;`和`&lt;td&gt;`元素，并通过`innerHTML`属性设置单元格内容。 - 将新创建的行元素插入到`&lt;tbody&gt;`中，可以使用`appendChild`或`insertBefore`方法。 2. **数据绑定** -...

    jQuery合并单元格

    一个表格由`&lt;table&gt;`元素定义，其中包含`&lt;tr&gt;`（行）元素和`&lt;td&gt;`（单元格）或`&lt;th&gt;`（表头单元格）元素。要合并单元格，我们通常关注的是`colspan`和`rowspan`属性。`colspan`指定单元格跨越的列数，而`rowspan`...

    EXT动态新增一行

    在Column Layout中，动态新增一行意味着在已有列的基础上增加一个新的行单元格，这些单元格会按照列的配置自动填充。 实现动态新增一行的核心步骤如下： 1. **创建基础结构**：首先，你需要定义一个EXT容器，设置...

    js动态添加行和删除行

    在JavaScript中，动态添加行和删除行是网页交互中常见的需求，特别是在表格或者列表展示数据时。这通常涉及到DOM操作，包括元素的创建、插入和移除。以下是一些关于这个主题的重要知识点： 1. DOM操作： - `...

    js动态绘制表格，实现动态绘制，添加 和删除

    ### 二、动态创建表格 #### 2.1 创建表格 可以使用`document.createElement`方法创建表格元素，并将其添加到页面中。示例代码如下： ```javascript // 创建一个表格 var table = document.createElement('table');...

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

    综上所述，这些JS函数提供了强大的工具集，可用于动态管理和操作HTML表格，包括行和列的增删、单元格的合并与移动、样式的一致性保持，以及表格布局的智能调整。通过合理运用这些功能，开发者能够创建高度灵活和响应...

    javascript经典特效---用按钮增加表格.rar

    首先，我们需要获取到表格元素，通常使用`document.getElementById()`方法，然后创建新的行元素`&lt;tr&gt;`和单元格元素`&lt;td&gt;`。 5. **DOM操作**：使用`createElement()`方法创建新元素，`innerHTML`属性设置单元格的...

    Layui表格行添加编辑删除操作和保存数据代码

    删除操作可以使用`table.remove()`方法，通过传入表格ID和行数据的主键来移除特定行。例如： ```javascript // 删除按钮点击事件 $('#deleteBtn').on('click', function(){ var dataId = $(this).attr('data-id');...

    bootstrap table单元格新增行并编辑

    这个框架使得在网页上创建可编辑的表格变得简单，允许用户直接在表格单元格内进行新增和编辑操作。以下是一个关于如何实现 Bootstrap Table 单元格新增行并编辑的详细解释： 首先，确保在你的 HTML 文件中引入了...

    js 动态表格增 删 查 改

    使用JavaScript，我们可以动态地生成和更新表格行 (`&lt;tr&gt;`)、单元格 (`&lt;td&gt;`) 或表头 (`&lt;th&gt;`), 以及与之相关的样式和事件。例如，我们可以通过 `document.createElement()` 创建新元素，再通过 `innerHTML` 或 `...

    js表格刷新、全选、全不选、添加、拷贝、上下移动、删除行功能实现

    本示例主要涉及了六个关键功能：表格的刷新、复选框的全选与全不选、行的添加、拷贝、上下移动以及删除。以下是对这些功能的详细解释： 1. **表格刷新**： 刷新表格通常是为了更新表格中的数据，这可能是因为后台...

    jquery案例，为表格动态添加行

    一个简单的表格由`&lt;table&gt;`元素开始，内部包含`&lt;tr&gt;`（表格行）元素，每一行里又包含`&lt;td&gt;`（表格数据单元格）或`&lt;th&gt;`（表头单元格）。例如： ```html 数据1 数据2 ``` 要使用jQuery动态添加行，我们可以...

    table的动态新增和删除,非常好用

    然而，静态的HTML表格往往无法满足用户交互的需求，比如动态新增和删除行。本文将深入探讨如何实现HTML表格的动态新增与删除功能，以提升用户体验。 一、HTML基础 在HTML中，表格由`&lt;table&gt;`元素定义，每一行由`...

    js实现添加删除一行。每一行下面可以再添加一行。序号自动改变

    在JavaScript编程中，实现动态添加和删除表格行是一项常见的需求，尤其在构建数据表或配置界面时。这个功能包括在表格中添加新行、删除现有行，并确保在操作过程中序号自动生成和更新。以下是对这个"js实现添加删除...

    js操作table元素实现表格行列新增、删除技巧总结

    对于单元格和行的移动，`moveUp`和`moveDown`函数分别实现了单元格或行的上移和下移操作。这两个函数都有可选参数，可以指定移动的目标位置以及需要移动的元素。`moveCell`函数则用于交换两行的位置，需要提供表格...

    自动增加删除表格行代码（纯JS）

    本文将详细介绍如何使用纯JavaScript实现表格行的自动增加与删除功能，以及如何为表格中的特定单元格添加当前日期。该功能不仅提高了用户交互体验，还增强了页面的灵活性。 #### 一、功能概述 本示例通过三个按钮...

Magicbox
Global site tag (gtag.js) - Google Analytics