本文档主要介绍了如何使用JavaScript实现表格中的序号动态排序功能,特别是针对HTML代码中的一个具体示例。标题“HTML代码在txt里面”表明该内容可能是在文本文件中展示HTML结构,并结合了JavaScript脚本来管理表格元素的动态更新。 首先,文档使用了HTML的基本结构,包括`<html>`, `<head>`, 和 `<body>`标签,其中定义了一个页面标题(`<title>tab.html</title>`)和元数据(`<meta>`标签),用于提供网页的关键字、描述和字符编码信息。HTML部分展示了如何创建一个简单的表格(`<table>`),以及每个表格单元格(`<td>`)用于输入动态序号。 JavaScript函数`jspxUtil(obj, xh, zdz)`是核心部分,它接收三个参数:目标元素`obj`(可能是某个表格单元格的输入框),当前行索引`xh`,以及最终的最大序号`zdz`。这个函数的主要任务是根据用户在输入框中输入的新值动态调整表中的序号,保持递增顺序。 函数首先获取输入框的原始值`xhTemp`,并初始化变量`testSize`和`classNum`。然后,它检查输入值是否大于当前行数,如果超过最大序号,则将输入设置为最大值。接下来,函数遍历到指定行之前的所有行,复制它们并应用不同的CSS类(颜色背景),以便于区分不同的行。 当输入值大于现有行数时,函数会动态插入新的输入框,并监听其`onchange`事件,当输入值改变时再次调用`jspxUtil`函数。这使得用户可以连续输入新序号,而无需手动更新每个单元格。 总结起来,这个示例展示了如何使用JavaScript在HTML中创建交互式的表格,通过动态修改序号来保持排序。这对于需要实时更新和维护数据列表的网页应用程序非常实用,比如在线表格编辑器或者动态数据展示。掌握这样的技术,开发者能够创建更加灵活和用户友好的数据管理界面。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>tab.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
/**
* 使用JS排序 这里需要注意的
* obj 当前操作的排序文本框
* xh 当前操作的xh 从0
**/
function jspxUtil(obj, xh,zdz) {
var xhTemp = obj.value;
//文本长度
var testSize = "size=2";
var classNum = 1 ;
//这里判断小于当前的值
var trTemp = "";
if (xhTemp > xh + 1) {
//如果这里为大于等于5 就赋值成5
obj.value = zdz;
xhTemp = obj.value;
}
//取得第一阶段值 如果 1 2 3 4 5 将 2改变成3
for (var i = 0; i < xh; i++) {
var trHtml = $("#tr" + i).html();
//加入样式
var colorBg=getClassTr(classNum);
classNum++;
trTemp += "<tr id=\"tr" + i + "\" "+colorBg+">" + trHtml + "</tr>";
}
//取得第二阶段值 如果 1 2 3 4 5 将 2改变成4 取得 3个4 的值
var xhText = xh;
for (var i = xh + 1; i < xhTemp; i++) {
$("#td" + i).html("<input type=\"text\" id=\"text" + xhText + "\" value=\"" + (xhText + 1) + "\" onchange=\"jspxUtil(this," + xhText + ")\" "+testSize+">");
$("#td" + i).attr("id", "td" + xhText);
//加入样式
var colorBg=getClassTr(classNum);
classNum++;
var trHtml = $("#tr" + i).html();
trTemp += "<tr id=\"tr" + xhText + "\" "+colorBg+">" + trHtml + "</tr>";
xhText++;
}
剩余7页未读,继续阅读
- 粉丝: 5
- 资源: 13
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- WebLogic集群配置与管理实战指南
- AIX5.3上安装Weblogic 9.2详细步骤
- 面向对象编程模拟试题详解与解析
- Flex+FMS2.0中文教程:开发流媒体应用的实践指南
- PID调节深入解析:从入门到精通
- 数字水印技术:保护版权的新防线
- 8位数码管显示24小时制数字电子钟程序设计
- Mhdd免费版详细使用教程:硬盘检测与坏道屏蔽
- 操作系统期末复习指南:进程、线程与系统调用详解
- Cognos8性能优化指南:软件参数与报表设计调优
- Cognos8开发入门:从Transformer到ReportStudio
- Cisco 6509交换机配置全面指南
- C#入门:XML基础教程与实例解析
- Matlab振动分析详解:从单自由度到6自由度模型
- Eclipse JDT中的ASTParser详解与核心类介绍
- Java程序员必备资源网站大全