【JS】☆★之详解动态操作表格
1、web开发的项目中我们做条件查询，数据添加，附件上传等功能时候需要给予用户更多的动态选择，这样就不能将<input />框的个数写死，所以动态操作表格式一个不错的选择！
<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jQuery/jquery-1.6.2.js"></script>
<script type="text/javascript">
function AddSignRow(){
/*var str2=document.getElementById("trid").innerHTML;//这是通过js获取的一个tr中的所有元素
alert(str2);*/
var trObj="<tr >"+$("#trid").html()+"</tr>";//拼成一个tr
var str=$("#tableid").find("tr").length;//获取table中tr总行数
if(str==11){//假如tr长度为11，也就是说，去掉第一个tr，还有10个tr的时候，停止增长，意思是最多只能新增10个tr
return;
}
$("#trid").after(trObj);//在这个<tr段落>之后插入一个HTML标记代码,这是jquery外部插入，内部插入$("#tableid").append(trObj);
}
function deleteRow(obj){
var str=$("#tableid").find("tr")[1];//获取table表中的所有tr，然后取第2个，因为是0,1,2,3
var tr=obj.parentNode.parentNode; //获取obj代表是<a> 上一个父节点是<td> 再上就是<tr>
if(str==tr){ //加入获取的obj的再上父节点是第二个tr 不允许删除
return;
}
var tbody=tr.parentNode; //获取tr的父节点
tbody.removeChild(tr); //tr的父节点(tbody)移除tr
}
</script>
</head>
<body>
<div class="body_context" align="center">
<div class="table_context">
<table width="80%" border="1" cellspacing="0" cellpadding="0" id="tableid">
<thead>
<tr>
<th>姓名</th><th>照片</th><th>职业</th><th>操作</th>
</tr>
</thead>
<tr id="trid">
<td><input type="text" name="" value="" style="border:0px;"/></td>
<td><input type="file" name="" value="" style="border:0px;"/></td>
<td><input type="text" name="" value="" style="border:0px;"/></td>
<td><a href="#" onclick="deleteRow(this)" style="text-decoration:none;">移除</a></td>
</tr>
</table>
</div>
<div style="border-bottom: 1px solid #088000;margin-bottom: 10px;margin-top:10px;width:80%;" ></div>
<div style="padding-left:0px;padding-top:5px;"><a onclick="AddSignRow()" href="javascript:void(0)" >创建</a></div>
</div>
</body>
</html>
相关推荐
在JavaScript中，动态操作表格是一项常见的任务，尤其在构建数据驱动的Web应用时。下面将详细探讨这个主题，包括如何添加、删除、选择表格以及兼容性问题。 首先，让我们从添加表格开始。在HTML中，表格由`<table>`...
在JavaScript编程中，动态操作表格是一项常见的需求，特别是在构建数据驱动的Web应用时。这个主题主要涵盖如何使用JavaScript来创建、修改以及删除HTML表格（`<table>`元素）中的行（`<tr>`）、列（`<td>`或`<th>`）...
JavaScript动态操作表格，添加，删除行、列及单元格! 值得下载看看!资源免费,大家分享!! 更多免费资源 http://ynsky.download.csdn.net/
用于动态操作表格~~~~~~~~~~~~~~~~~~~~~~·
js动态操作表格</title>[removed]function init(){_table=document.getElementById(“table”);_table.border=”1px”;_table.width=”800px”;for(var i=1;i<6;i++){var row=document.createElement(“tr...
在JavaScript（JS）中动态生成表格是一项常见的任务，特别是在网页交互和数据展示中。这篇文章将深入探讨如何利用JS实现这一功能，以及相关的源码和工具。 首先，我们要明白HTML表格的基本结构，它由`<table>`、`...
"js动态表格--行操作"这个主题主要涵盖了如何使用JavaScript来创建、修改和管理表格的行。下面我们将详细探讨这些知识点。 首先，我们需要理解HTML表格的基本结构，包括`<table>`,`<tr>`,`<th>`和`<td>`等元素。`...
在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...
在IT行业中，JavaScript（简称JS）通常用于网页前端交互，但通过特定的库和API，我们也能使用JS来操作Microsoft Word文档，包括在Word中创建和编辑表格。本篇文章将详细探讨如何使用JS来实现这一功能，以及相关的...
本话题主要探讨如何利用原生JavaScript和DOM来实现数据表格中的动态增删查改功能，这对于前端开发来说是一项基本且重要的技能。 1. **创建数据表格** - 使用`<table>`元素创建表格结构，包括`<thead>`定义表头，`...
在JavaScript（简称JS）中，表格操作是网页动态交互中常见的功能，主要用于处理HTML中的`<table>`元素。本教程将深入探讨如何使用JS实现表格的增、删、改操作，帮助你创建更加灵活和交互性强的数据展示界面。 首先...
在HTML中，`<table>`元素用于创建表格，而动态操作表格行通常涉及到DOM（Document Object Model）的操作。JavaScript提供了对DOM的访问和修改能力，让我们能够动态地添加、删除或修改表格元素。 1. **添加表格行**...
在探讨“javascript表格操作”的知识点时，我们主要聚焦于如何利用JavaScript来动态地操作HTML中的表格元素，包括但不限于创建、删除行或单元格，以及进行数据的排序和汇总。以下是对这一主题的深入解析。 ### 动态...
在JavaScript（JS）编程中，动态管理HTML元素是常见的需求，特别是对于表格（Table）这样的数据展示组件。本文将深入探讨如何使用JavaScript动态地增加和删除表格行。 首先，我们来了解一下HTML表格的基本结构。一...
### JavaScript 下动态创建表格的三种方式 在网页开发过程中，经常需要通过JavaScript来动态地创建或更新HTML元素，其中就包括表格（`<table>`）。本文将详细介绍在JavaScript中动态创建表格的三种常见方法，并对每...
3. **DOM操作**：在获取到JSON数据并解析为JavaScript对象后，我们需要操作DOM（Document Object Model）来生成表格。HTML的`<table>`元素是创建表格的基础，`<tr>`表示行，`<th>`表示表头，`<td>`表示单元格。我们...
js操作表格 实例 js操作表格 实例 js操作表格 实例