`
朱嘉华
  • 浏览: 238382 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

动态给表格增加/删除一行

 
阅读更多
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>动态给表格增加/删除一行</title>
</head>
<script language=javascript>
allCount=1
function addline()
{
newRow=listtable.insertRow(listtable.rows.length);
newRow.ln=allCount;
newRow.id=allCount;
c1=newRow.insertCell(0);
c1.bgColor="#FFFFFF";
c1.innerHTML="<input size=10 name=sClass"+allCount+">";
c2=newRow.insertCell(1);
c2.bgColor="#FFFFFF";
c2.innerHTML="<input size=10 name=sMaterial"+allCount+">";
c3=newRow.insertCell(2);
c3.bgColor="#FFFFFF";
c3.innerHTML="<input size=10 name=sSpec"+allCount+">";
c4=newRow.insertCell(3);
c4.bgColor="#FFFFFF";
c4.innerHTML="<input size=10 name=sPrice"+allCount+">";
c5=newRow.insertCell(4);
c5.bgColor="#FFFFFF";
c5.innerHTML="<input size=10 name=sAmount"+allCount+">";
c6=newRow.insertCell(5);
c6.bgColor="#FFFFFF";
c6.innerHTML="<input size=10 name=sFactory"+allCount+">";
c7=newRow.insertCell(6);
c7.bgColor="#FFFFFF";
c7.innerHTML="<input size=10 name=sDeliveryPlace"+allCount+">";
c8=newRow.insertCell(7);
c8.bgColor="#FFFFFF";
c8.innerHTML="<input size=10 name=sNotes"+allCount+">";
c9=newRow.insertCell(8);
c9.bgColor="#FFFFFF";
c9.align="CENTER";
c9.innerHTML="<input type=checkbox value=t checked name=cPub"+allCount+">";
c10=newRow.insertCell(9);
c10.bgColor="#FFFFFF";
c10.align="CENTER";
c10.id="line"+allCount;
c10.innerHTML="<input type=button value=删除 onclick=delline(line"+allCount+")>";
c11=newRow.insertCell(10);
c11.bgColor="#FFFFFF";
c11.align="CENTER";
c11.innerHTML="<input type=button value=插入 onclick=insertline(line"+allCount+")>";
allCount++
}
function insertline(lineid)
{
for(i=0;i<listtable.rows.length;i++)
{
if(listtable.rows[i].cells[9].id==lineid.id)
{
newRow=listtable.insertRow(i);
newRow.ln=allCount;
newRow.id=allCount;
c1=newRow.insertCell(0);
c1.bgColor="#FFFFFF";
c1.innerHTML="<input size=10 name=sClass"+allCount+">";
c2=newRow.insertCell(1);
c2.bgColor="#FFFFFF";
c2.innerHTML="<input size=10 name=sMaterial"+allCount+">";
c3=newRow.insertCell(2);
c3.bgColor="#FFFFFF";
c3.innerHTML="<input size=10 name=sSpec"+allCount+">";
c4=newRow.insertCell(3);
c4.bgColor="#FFFFFF";
c4.innerHTML="<input size=10 name=sPrice"+allCount+">";
c5=newRow.insertCell(4);
c5.bgColor="#FFFFFF";
c5.innerHTML="<input size=10 name=sAmount"+allCount+">";
c6=newRow.insertCell(5);
c6.bgColor="#FFFFFF";
c6.innerHTML="<input size=10 name=sFactory"+allCount+">";
c7=newRow.insertCell(6);
c7.bgColor="#FFFFFF";
c7.innerHTML="<input size=10 name=sDeliveryPlace"+allCount+">";
c8=newRow.insertCell(7);
c8.bgColor="#FFFFFF";
c8.innerHTML="<input size=10 name=sNotes"+allCount+">";
c9=newRow.insertCell(8);
c9.bgColor="#FFFFFF";
c9.align="CENTER";
c9.innerHTML="<input type=checkbox value=t checked name=cPub"+allCount+">";
c10=newRow.insertCell(9);
c10.bgColor="#FFFFFF";
c10.align="CENTER";
c10.id="line"+allCount;
c10.innerHTML="<input type=button value=删除 onclick=delline(line"+allCount+")>";
c11=newRow.insertCell(10);
c11.bgColor="#FFFFFF";
c11.align="CENTER";
c11.innerHTML="<input type=button value=插入 onclick=insertline(line"+allCount+")>";
allCount++
return;
}
}
}
function delline(lineid)
{
for(i=0;i<listtable.rows.length;i++)
{
for(j=0;j<listtable.rows[i].cells.length;j++)
{
if(listtable.rows[i].cells[j].id==lineid.id)
{
listtable.deleteRow(i);
return;
}
}
}
}
</script>

<body>
<table width=700 height="20" border="0" align="center" cellpadding=0 cellspacing=0 id=listtable>
<tr align=center height=20>
<td bgcolor=#FFFFFF><b>品名</b></td>
<td bgcolor=#FFFFFF><b>材质</b></td>
<td bgcolor=#FFFFFF><b>规格</b></td>
<td bgcolor=#FFFFFF><b>价格</b></td>
<td bgcolor=#FFFFFF><b>数量</b></td>
<td bgcolor=#FFFFFF><b>产地</b></td>
<td bgcolor=#FFFFFF><b>交货地</b></td>
<td bgcolor=#FFFFFF><b>备注</b></td>
<td bgcolor=#FFFFFF><b>发布</b></td>
<td bgcolor=#FFFFFF><b>-</b></td>
<td bgcolor=#FFFFFF><b>-</b></td>
</tr>
</table>
<table width="700" height="25" border="0" align="center" cellpadding="0" cellspacing="0">
<tr><td align="center"><input type=button value=增加一行 onclick=addline()></td>
</tr>
</table>
</body>
</html>

0
顶
0
踩
分享到：
| 漂亮的提示信息（带箭头）
评论
发表评论

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

相关推荐

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

    在使用JQuery来实现动态表格增加行的场景中，主要涉及到的技术点包括： 1. DOM操作：文档对象模型（DOM）允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中，DOM操作用于动态地向表格中插入新的...

    Jquery实现表格动态增加一行，删除一行.html

    Jquery实现表格动态增加一行，删除一行(最简洁的代码实现)

    JS动态增加删除表格行

    本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先，我们来了解一下HTML表格的基本结构。一个表格由`&lt;table&gt;`元素包含，其中包含`&lt;tr&gt;`（表格行）元素，每行内可以有多个`&lt;td&gt;`（表格数据单元格）或`...

    js动态增加表格行

    js增加动态表格，点击增加就增加一行，点击删除就删除一行，每行前面有勾选框，可以勾选，删除多行

    表格行记录动态增加和删除

    当你需要添加一行时，可以通过JavaScript动态创建`&lt;tr&gt;`元素，并将其插入到表格的适当位置。例如，可以使用`document.createElement('tr')`创建新的行元素，然后利用`innerHTML`或`appendChild`方法添加内容和将其...

    表格动态插入行

    这将在表格的末尾添加一行，包含"数据1"和"数据2"。 为了使用户能够交互式地添加行，我们可能需要将此功能与按钮事件关联起来。例如，我们可以添加一个按钮，并在其点击事件中调用`addRow`： ```html (['新数据1',...

    javascript动态操作表格

    // 创建一行 var row = document.createElement('tr'); // 在行中创建一个单元格 var cell = document.createElement('td'); cell.innerHTML = '新内容'; // 将单元格添加到行中 row.appendChild(cell); // 将行...

    树形表格菜单 动态添加节点/动态删除节点/动态移动节点

    3.动态添加节点/动态删除节点/动态移动节点 4.动态dom对象创建表格树 5.完美支持json格式数据,支持xml(需转换) 6.支持ajax加载节点 7.事件驱动 8.可以动态根据列内容排序 9.简化函数参数,利用{} object输入参数,风格...

    jquery 动态增加删除表格. 实例

    表格通常由`&lt;table&gt;`元素定义，每一行由`&lt;tr&gt;`元素表示，而每一列则由`&lt;td&gt;`元素表示。例如： ```html 列1&lt;/th&gt; 列2&lt;/th&gt; 列3&lt;/th&gt; &lt;/tr&gt; &lt;/thead&gt; 数据1&lt;/td&gt; 数据2&lt;/td&gt; 数据3&lt;/td&gt; &lt;/tr&gt; &lt;/...

    jquery实现表格行与列的动态增加和删除，附获取表格内容（字符串、json）格式

    在项目中很多时候遇到这样的问题,需要动态的增加、删除表格的行与列，在学习jQuery的过程中，自己试着在网上找寻教程，发现...目前实现动态增加 删除最后一行与最后一列，获取表格内填写的input数据(最简洁的代码实现)

    利用jquery给指定的table动态添加一行、删除一行的方法

    2. **删除一行** 删除行的操作可以通过选中对应的行，通常是通过复选框来实现。`delTr`函数接收一个参数，即复选框的名称（ckb）。它首先找到所有被选中的复选框，然后删除它们的父`tr`元素。这通常涉及到遍历所有...

    自动增加行的动态表格

    标题“自动增加行的动态表格”指的是在网页中实现一种交互式表格，它能够自动添加新的行数据，这种功能在数据录入、管理或展示时非常有用。动态表格通常结合前端JavaScript库或者自定义脚本来实现，允许用户无须刷新...

    原生js可编辑表格实现动态添加表格行数和删除表格行数

    通常，我们会先确认用户是否真的想删除一行，然后进行操作： ```javascript function deleteRow(index) { if (confirm('确定要删除此行吗？')) { var table = document.getElementById('editableTable'); ...

    jquery动态控制表格的行

    在本主题中，我们将深入探讨如何使用jQuery动态控制表格的行，包括增加行、选中行和删除行。这在构建数据驱动的Web应用时尤其重要，因为用户通常需要与表格进行交互，例如查看、编辑或删除数据。 首先，让我们讨论...

    JS example：点击按钮table增加一行，删除一行

    这篇博客“JS example：点击按钮table增加一行，删除一行”提供了具体的示例，帮助开发者掌握这一技能。 首先，让我们理解基本概念。HTML表格由`&lt;table&gt;`元素定义，`&lt;tr&gt;`元素表示表格行，`&lt;td&gt;`元素表示单元格，而...

    Ajax动态表格，可适时添加行、删除行、复制行

    本话题将深入探讨如何实现一个动态表格，用户可以适时添加、删除和复制表格中的行。 首先，我们需要理解Ajax的工作原理。它通过JavaScript发送异步HTTP请求到服务器，获取或提交数据，然后使用JavaScript处理这些...

    JS对表格的动态增加删除行 （多个demo）

    这篇博客"JS对表格的动态增加删除行 (多个demo)"提供了实用的方法来帮助开发者实现这些功能。以下是对这个主题的详细说明： 1. **HTML表格基础**： HTML表格由`&lt;table&gt;`元素定义，行`&lt;tr&gt;`，列`&lt;td&gt;`（或`&lt;th&gt;`...

    jquery实现的可增加，删除行，可多行上下移动表格

    标题 "jquery实现的可增加，删除行，可多行上下移动表格" 描述了一种使用JavaScript库jQuery创建的交互式表格功能。这个功能允许用户在表格中动态添加、删除行，以及上下移动表格中的行，提供了更灵活的数据操作体验...

    layui点击数据表格添加或删除一行的例子

    数据表格 t2 = { elem: '#test2', data: tableData2, page: false, width: $(parent.window).width()-50, cols: [[ {type:'checkbox',field:'id'}, {field:'cstMoldNo', title: '客户模号',edit:'text'}, {...

    jQuery 动态添加、删除表格行特效

    本资源主要探讨的是如何使用jQuery实现动态添加和删除表格行的特效，这对于构建交互性强的网页表格非常有用。以下将详细讲解相关知识点。 首先，jQuery提供了方便的DOM操作方法，如`append()`和`remove()`，可以...

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