今天学习了js的动态生成表格功能，感觉挺好玩的，写js的时候切勿烦躁
<!-- 动态生成表格 ,删除 修改-->
<html>
<head>
<meta content="text/html;charset=utf-8">
<script type="text/javascript">
var ary=new Array();
ary.push( new stud("1","aaa","12","B"));
ary.push( new stud("2","aaa","12","B"));
ary.push( new stud("3","aaa","12","B"));
ary.push( new stud("4","aaa","12","B"));
// alert(ary[0].no+"\t"+ary[0].name);
var g_trobj;
function creatTable(){
s="<table border='2px'>";
//表头
s+="<tr>"+
"<td width='100px'> </td>"+
"<td width='100px'>NO</td>"+
"<td width='100px'>NAME</td>"+
"<td width='100px'>AGE</td>"+
"<td width='100px'>SEX</td>"+
"<td width='100px'>FUNCTION</td>"+
"</tr>";
//表的内容
for(var i=0;i<ary.length;i++){
var u=ary[i];
s+="<tr>";
s+="<td><input type='checkbox' name='T'></td>";
s+="<td>"+u.no+"</td>"+
"<td>"+u.name+"</td>"+
"<td>"+u.age+"</td>"+
"<td>"+u.sex+"</td>"+
"<td><input type='button' value='edit' onclick='tredit(this)'> "+
"<input type='button' value='delete' onclick='del(this)'></td>";
s+="</tr>";
}
//画tail
s+="<tr>"+
"<td colspan='6'><input type='button' value='selAll' onclick='al()'> "+
"<input type='button' value='unselAll' onclick='unselA()'> "+
"<input type='button' value='selA' onclick='delsel()'></td>"+
"</tr>";
s+="</table>";
var obj=document.getElementById("d1");
obj.innerHTML=s;
}
var buobj=window.event.srcElement;
var tdobj=buobj.parentElement;
var trobj=td.parentElement;
function del(e){
for(var i=0;i<trobj.length;i++){
if(trobj[i]==buobj){
alert(trobj.cells[1]);
}
}
}
function delsel(){
var checkobj=document.getElementsByName("T");
for(var i=0;i<checkobj.length;i++){
if(checkobj[i].checked==true){// 选中
var e=checkobj[i];
var tdobj=e.parentElement;
var trobj=tdobj.parentElement; //找到选中的所在tr行
alert(trobj.cells[1].innerText);
}
}
}
function al(){
var checkobj=document.getElementsByName("T");
for( var i=0;i<checkobj.length;i++){
checkobj[i].checked=true;
}
}
function unselA(){
var checkobj=document.getElementsByName("T");
for(var i=0;i<checkobj.length;i++){
checkobj[i].checked=false;
}
}
function tredit(obj){
var tdobj=obj.parentElement;
var trobj=tdobj.parentElement;
g_trobj=trobj;
var dobj1=document.getElementById("d1");
alert(trobj.cells[1].innerText);
dobj1.style.display="none";
var dobj2=document.getElementById("d2");
myNo.value=g_trobj.cells[1].innerText;
myName.value=g_trobj.cells[2].innerText;
myAge.value=g_trobj.cells[3].innerText;
mySex.value= g_trobj.cells[4].innerText;
dobj2.style.display="block";
}
function updateRow(){
if(confirm("确定更新吗 ")!=true){return;}
g_trobj.cells[1].innerText=myNo.value;
g_trobj.cells[2].innerText=myName.value;
g_trobj.cells[3].innerText=myAge.value;
g_trobj.cells[4].innerText=mySex.value;
var dobj1=document.getElementById("d1");
dobj1.style.display="block";
var dobj2=document.getElementById("d2");
dobj2.style.display="none";
}
function back(){
var dobj1=document.getElementById("d1");
dobj1.style.display="block";
var dobj2=document.getElementById("d2");
dobj2.style.display="none";
}
function stud(no,name,age,sex){
this.no=no;
this.name=name;
this.age=age;
this.sex=sex;
}
</script>
</head>
<body onload="creatTable()">
<div id="d1">
</div>
<div id="d2" style="display: none">
no :<input type="text" id="myNo"><br/>
name:<input type="text" id="myName"><br>
age :<input type="text" id="myAge"><br>
sex :<input type="text" id="mySex"><br>
<button type="button" value="更新" onclick="updateRow(this)">更新</button>
<button type="button" value="返回" onclick="back()">返回</button>
</div>
</body>
</html>
分享到：
相关推荐
这是一个简单的js动态生成表格。。里面有三种生成表格的方法‘’‘’‘’‘’
这是一个动态生成表格的 HTML 页面，使用了 JavaScript 动态生成表格内容。这个表格显示了一组学生的成绩信息，包括姓名、科目和得分，并提供了删除操作。 在页面中，先声明了一个 table 元素，并设置了 id 为 ...
本示例"js动态生成表格行列特效.zip"提供了实现这一功能的实例代码，包括HTML5、JavaScript和CSS三部分，允许开发者创建出具有视觉吸引力且功能丰富的表格。 首先，HTML5是现代网页开发的标准，它引入了许多新特性...
在JavaScript中，动态生成table是一种常见的网页交互功能，它允许我们根据需求在页面上实时创建、添加或删除表格行（tr...同时，配合现代前端框架（如React、Vue或Angular），动态生成表格的能力将变得更加高效和灵活。
在本文中，我们将深入探讨如何使用ExtJS框架在前端动态生成表格，并结合后端数据进行展示。ExtJS是一个强大的JavaScript库，专用于构建富客户端Web应用程序，尤其在创建交互式用户界面方面表现突出。动态生成表格是...
在本文中，我们将探讨如何使用JavaScript（JS）动态生成表格，并将表格中的数据提交到后端服务器。动态生成表格是Web开发中常见的需求，特别是在需要用户输入数据并提交给服务器进行处理的场景中。掌握这一技能对于...
在JavaScript编程中，动态生成表格是一项常见的任务，尤其在网页交互和数据展示中。本教程将深入探讨如何使用JavaScript来创建具有颜色效果和取色功能的动态表格。 首先，我们需要理解HTML表格的基本结构，它由`...
综上所述，JS操作Word生成表格涉及到的技术包括ActiveXObject、Office.js、XML解析以及文件操作。理解这些知识点，能够帮助开发者构建强大的文档处理工具，提升工作效率。在实际开发中，需要注意兼容性问题，因为...
本文介绍的使用JavaScript动态生成表格并为每个单元格添加单击事件的方法是Web开发中一项基础而重要的技能。通过这种方式，我们可以根据实时数据创建表格，并允许用户与表格中的数据进行交互。这不仅使页面变得更加...
通过JS来写动态的表格（有多少组数据，就自动创建多少行表格） 为学习和演示，采用固定的数据，不涉及调用后台数据 代码实现： HTML内容： 姓名 科目 成绩 操作 <tbody></tbody> CSS内容： table ...
2. **动态生成表格**：在DownFrame.html中，编写JavaScript代码，根据需要动态创建`<table>`元素，包括`<tr>`（行）、`<td>`（列）。如果是使用前端框架，只需在模板中定义好表格结构，并在数据变化时自动更新。 3....
在JavaScript的世界里，生成表格是一项常见的任务，尤其是在网页开发中。`jQuery`作为一个广泛使用的JavaScript库，提供了许多方便的功能，而`Table.js`就是这样一个专为生成动态表格设计的插件。这个插件使得开发者...
在网页中，JavaScript可以用来创建各种交互效果，包括动态生成表格。本篇文章将详细探讨如何使用JavaScript来实现动态生成表格的功能。 首先，我们需要理解动态生成表格的基本流程。在用户界面上，通常会有一个或多...
通过javaScript动态生成表格，其中也使用了div和css，对样式进行动态设置。
通过 JavaScript 动态生成表格可以更加灵活地管理和更新数据。本文将深入分析一个具体的示例，该示例展示了如何使用 JavaScript 来动态生成一个表格，并根据用户的选择进行实时更新。 #### 核心代码解析 首先，...
在JavaScript（简称js）开发中，经常需要处理各种数据，并将其展示在用户界面上，例如生成表格。在本场景中，我们关注的是如何利用js从本地的JSON数据文档中读取信息，然后根据数据结构动态生成列数不固定的表格。这...
在前端开发中，动态生成表单是一个常见的需求，特别是在数据录入、编辑或验证场景下。本教程将聚焦于如何利用jQuery和layui库来实现这样的功能。jQuery是一个强大的JavaScript库，它简化了DOM操作，事件处理，动画...
在IT行业中，动态生成表格是一项常见的需求，尤其是在数据展示、报表生成或用户交互场景下。本文将基于"动态生成表格工具类"这一主题，详细探讨如何利用Java编程语言来实现这样的功能。 首先，理解动态生成表格的...
在JavaScript编程中，动态添加表格数据行是一种常见的需求，特别是在构建交互式的Web应用程序时。这个功能允许用户在不刷新整个页面的情况下添加新的记录，提高了用户体验。在这个例子中，我们将探讨如何利用...