javascript表格随机排序代码

更新时间：2008年09月09日 12:53:06 作者：

非常不错的思路，用js实现表格的随机排序，建议大家看代码，学习编程思路

<!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=gb2312" /> <title>表格随机排序练习 by 阿会楠</title> <style type="text/css"> #main{ width:700px; } #main div{ width:200px; margin-left:10px; margin-top:20px; float:left; } div table{ width:100%; } </style> <script type="text/javascript" charset="GB2312"> function arrRand(obj){ var a = new Array(); for(var i = 0;i < obj;i++){ a[i] = i + 1; } a.sort(function(){return 0.5 - Math.random()}); return a; } function randTable(){ var c = arrRand(len); for(var k = 0;k < len;k ++){ divs[c[k] - 1].innerHTML = b[k]; } } var b = new Array(); var divs = new Object; var len;; window.onload = function(){ divs = document.getElementById("main").getElementsByTagName("div"); len = divs.length; for(var j = 0;j < len;j++){ b[j] = divs[j].innerHTML; } randTable(); } </script> </head> <body> <div id="main"> <div> <table border="1"> <tr><td>A</td></tr> </table> </div> <div> <table border="1"> <tr><td>B</td></tr> </table> </div> <div> <table border="1"> <tr><td>C</td></tr> </table> </div> <div> <table border="1"> <tr><td>D</td></tr> </table> </div> <div> <table border="1"> <tr><td>E</td></tr> </table> </div> <div> <table border="1"> <tr><td>F</td></tr> </table> </div> </div> <input type="button" onclick="randTable()" value="随机排序" > <a href="https://www.jb51.net" target="_blank">脚本之家</a> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

微信小程序onShareTimeline()实现分享朋友圈
这篇文章主要给大家介绍了关于微信小程序onShareTimeline()实现分享朋友圈的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-01-01
IE view-source 无法查看看源码 JavaScript看网页源码
查看网页源代码的方法其实有好几种，最常用的我们就是在浏览器中直接选择“查看网页源代码”就可以了，但是在有些时候这种方法却不能见效，以下再介绍几种简单的方法供大家参考！
2009-07-07
网上应用的一个不错common.js脚本
网上应用的一个不错common.js脚本...
2007-08-08
JavaScript实现的图片3D展示空间(3DRoom)
一般的平面效果，通过改变水平和垂直坐标就能实现，再加上深度，就能在视觉上的产生3D（三维）的效果。
2010-10-10
一个检测表单数据的JavaScript实例
这篇文章主要介绍了一个检测表单数据的JavaScript实例，很简单，很实用，比较适合初学者
2014-10-10
el-form实现表单和图片手动上传和校验功能
在写项目时,难免遇到需要上传表单,图片等文件,且表单内容需进行验证及必填项提示,图片需要和信息一起传递且图片载入后需可预览,这篇文章给大家介绍el-form实现表单和图片手动上传和校验功能,感兴趣的朋友一起看看吧
2024-01-01
js 字符串反转(倒序)的几种方式总结
这篇文章主要介绍了js 字符串反转(倒序)的几种方式总结，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-10-10
微信小程序公用参数与公用方法用法示例
这篇文章主要介绍了微信小程序公用参数与公用方法用法,结合实例形式分析了微信小程序中公用参数与公用方法的简单定义与使用相关操作技巧,需要的朋友可以参考下
2019-01-01
HTML在线编辑器的基本概念与相关资料
HTML在线编辑器的基本概念与相关资料...
2007-03-03
开发 Internet Explorer 右键功能表(ContextMenu)
本篇介绍如何开发 Internet Explorer 右键功能表(ContextMenu)，以 0rz.tw 缩短网址列为范例
2013-07-07