<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>动态表格</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
function addOneRow(){
//判断是否传入足够参数
if(arguments.length <= 1 ){
return "error";
}
try{
//获取table句柄
var tb=document.getElementById(arguments[0]);
//添加一行
var newTr = tb.insertRow();
for(var i=1 ;i < arguments.length;i++){
//添加一列
var newTd = newTr.insertCell();
newTd.innerHTML = arguments[i];
}
}catch (e) {
return e.toString();
}
return "true";
}
function deleteOneRow(){
//判断是否传入足够参数
if(arguments.length == 0){
return "error";
}
var thisTag = arguments[0];
try{
//获取句柄
var obj = getThisObj(thisTag);
//寻找最靠近的table
while (obj.nodeName.toUpperCase() != 'TABLE'){
obj =obj.parentElement;
}
//删除一行
var newTr = obj.deleteRow(getTrRowOfTable(thisTag));
}catch (e) {
return e.toString();
}
return "true";
}
function getTableMaxRow(){
//判断是否传入足够参数
if(arguments.length == 0 ){
return "error";
}
try{
//获取句柄
var obj = getThisObj(arguments[0]);
//寻找最靠近的table
while (obj.nodeName.toUpperCase() != 'TABLE'){
obj =obj.parentElement;
}
return obj.rows.length;
}catch (e) {
return e.toString();
}
}
function getTrRowOfTable(){
//判断是否传入足够参数
if(arguments.length == 0 ){
return "error";
}
try{
//获取传入标签的句柄
var obj = getThisObj(arguments[0]);
//寻找最靠近的TR
while (obj.nodeName.toUpperCase() != 'TR'){
obj =obj.parentElement;
}
//返回TR的行号
return obj.rowIndex;
}catch (e) {
//返回异常信息
return e.toString();
}
}
//获取指定标签的句柄
function getThisObj(){
var obj;
//若定义了id
if(arguments[0].id != ""){
obj=document.getElementById(arguments[0].id);
return obj;
}
//若定义了name
if(arguments[0].name != ""){
//通过name取句柄得到的是个数组，所以必须保证该name页面唯一
obj=document.getElementsByName(arguments[0].name)[0];
return obj;
}
}
function showInfo(){
//显示本行号
alert("当前行号为："+ getTrRowOfTable(arguments[0]));
//显示总行数
alert("总行数为："+ getTableMaxRow(arguments[0]));
}
var rowId=1;
function addRow(){
var tagStr="<input type=text value=ccc name="+rowId+" onclick='addRow();showInfo(this)' onchange='deleteOneRow(this);'>";
addOneRow("tb",tagStr);
rowId++;
}
</script>
</HEAD>
<BODY onload="addRow();">
<table id="tb"></table>
</BODY>
</HTML>
分享到：
相关推荐
在这个“FusionCharts动态图表实现代码”压缩包中，你可能会找到一系列用于快速入门和实践的简洁示例。 FusionCharts支持多种图表类型，包括柱状图、饼图、线图、面积图、散点图、仪表盘等，这些图表都具有高度的...
动态表格 java动态表格实现方法 很有用得 我找了很长时间的
JS动态表格 JS动态表格JS动态表格体育意图一天uty一体uytuytutyu体育一体uytutyu体育
本教程将重点讲解如何使用AngularJS来实现动态表格的功能。 AngularJS的核心概念之一是数据绑定，它允许开发者在视图（View）和模型（Model）之间建立直接的联系。在这个场景下，我们可以通过数组来存储表格的数据...
2、下面表格对应的月份跟类型是动态的，从后台数据库获取，当查询条件只展示7个月的数据时，下面图表以及表格相应只展示7个月的数据。3、表格头实现斜线/斜杠。4、监听左侧菜单栏是否展开，解决菜单展开关闭时图表...
本教程将详细讲解如何使用jQuery库来实现表格的动态分页，同时结合Java后端进行数据的动态查询和分页处理。 首先，让我们了解动态分页的基本原理。动态分页是指在用户滚动或点击分页按钮时，仅加载当前显示的数据，...
在本项目中，"vue+elementUI实现动态表格合并单元格.zip" 提供了一个使用 Vue.js 框架和 Element UI 组件库构建的动态表格应用。Vue.js 是一款轻量级的前端JavaScript框架，它提供了响应式的数据绑定和组件化功能，...
在本实例中，我们主要探讨如何使用Java Web技术与ECharts库来实现动态图表的展示。ECharts是一款基于JavaScript的数据可视化库，广泛应用于Web前端的数据图表制作，它提供了丰富的图表类型，灵活的交互功能，以及...
应公司业务要求,需要在world文档中生成表格,最开始同事使用的freemarker操作xml标签可以实现world中插入表格, 但是每次修改模板需要改xml文件,几万行中去找对应的标签然后修改,容易找错位置并且电脑非常卡,相当麻烦;...
在本资源中，“网页模板——vue实现动态表格数据查询筛选代码.zip”是一个包含Vue.js实现的动态表格数据查询和筛选功能的代码示例。Vue.js是目前非常流行的前端JavaScript框架，它简化了网页开发，尤其是处理用户...
首先，动态表格通常通过JavaScript或者相关的前端框架如jQuery、Vue.js、React等实现。JavaScript可以获取、修改DOM元素，因此我们可以利用它动态地创建、删除或更新表格的行、列。例如，当从服务器获取数据后，可以...
在本项目中，我们主要关注的是使用jQuery来实现动态表格的功能。jQuery是一个广泛使用的JavaScript库，它简化了HTML文档遍历、事件处理、动画以及Ajax交互等任务，从而让JavaScript编程变得更加简单。在这个"自己...
标题“自动增加行的动态表格”指的是在网页中实现一种交互式表格，它能够自动添加新的行数据，这种功能在数据录入、管理或展示时非常有用。动态表格通常结合前端JavaScript库或者自定义脚本来实现，允许用户无须刷新...
本教程将详细介绍如何使用CSS和JavaScript来实现一个类似表格的动态滚动效果，通过`ul`和`li`标签来模拟表格结构。 ### CSS基础布局 首先，我们需要创建一个容器来包裹我们的“表格”。这可以通过`<div>`标签实现...
数据展示时候，经常从后台传入大小不等的矩阵。这里给出了根据不同矩阵大小，通过jquery的html()和append(）方法动态生成html表格的实例。
Bootstrap动态表格模板是一种高效、美观且易于实现的前端开发工具，尤其适用于构建具有实时数据交互功能的网页应用。Bootstrap作为一款流行的开源前端框架，提供了一系列预定义的样式、组件和JavaScript插件，使得...
10. **测试与调试**：在实现动态添加表格行的功能后，进行充分的测试至关重要。检查布局是否正确，数据是否正确显示，以及用户交互是否正常。 以上就是关于“Android动态添加表格行”的主要知识点。通过理解并掌握...
本人前端小白，因为项目需求，需要动态编辑表格，但是layui的编辑表格只适合 【有数据】修改功能用，并不适合【无数据】新增的功能使用，所以本人研究了几日，才写出了这么一个 无数据绑定，当然也可以自行绑定数据...
在Android开发中，创建动态表格效果是常见的需求，特别是在展示数据或者进行用户交互时。本教程将探讨如何利用Android的自定义View或者现有的布局控件，如LinearLayout、TableLayout、GridLayout等，来实现一个可...
### 在C/C#环境下动态图表的实现方法讨论 #### 概述 在现代软件开发过程中，数据可视化变得越来越重要，特别是在需要对大量数据进行实时监控和分析的应用场景中。为了更好地展示数据变化趋势，动态图表成为了不可...