JAVASCRIPT+DHTML实现表格拖动（固定写法）

msg_java2011

墨衍会员 · AI 创作全网分发码龄15年

关注

原创最新推荐文章于 2026-11-09 11:31:29 发布 635 阅读 AI 写同款· GEO 优化 ›

利用js+css+html实现固定table的列头不动本文分享了利用js+css+html实现固定table的列头不动的实例代码。小编认为具有很好的参考价值，感兴趣的朋友可以看下立即下载

http://blog.youkuaiyun.com/hunkdong/archive/2005/08/11/451169.aspx

自已做的,本来想在网上找前辈们做的,可是总找不到这种例子,要么找出来的太复杂,

要么就没法用,索性自己写了一个.看看还可以用!贡献出来,估计和我一样的菜鸟用的着!

代码如下:

<html>

<style>

body{

font-size:9pt;

}

table,th,td{

font-size:9pt;

}

.lsitTalbe{

table-layout:fixed;

width:30%;

border-collapse:collapse;

border-color:#507010;

color:#003300;

}

.pageda{

font-family:Webdings;

font-size:12pt;

color:#CCCCCC;

cursor:default;

}

.pageua{

font-family:Webdings;

font-size:12pt;

}

.even{

background:#e8f8d0;

}

.odd{

background:#f8fcf0;

}

.header{

background:a0dc40;

color:003300;

}

</style>

<head>

<TITLE>JAVASCRIPT+DHTML实现表格拖动DEMO</TITLE>

</head>

<body>

<br>

JAVASCRIPT+DHTML实现表格拖动按住 <b>列1</b> 即可拖动

<tr>

</tr>

</tr>

</tr>

</table>

</body>

</html>

var srcRowIndex;

var targetRowIndex;

var bDragMode ;

var objDragItem ;

var el;

function window.onload(){

initAdditionalElements();

}

function initAdditionalElements(){

objDragItem = document.createElement("DIV");

with(objDragItem.style){

backgroundColor = "buttonshadow";

cursor = "default";

position = "absolute";

filter = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=50)";

zIndex = 3001;

display ="none";

}

window.document.body.insertAdjacentElement("afterBegin", objDragItem);

}

function mousedown(){

el = window.event.srcElement;

if(el==null||el.tagName!="TD") return false;

if(el.cellIndex!=0 || el.parentNode.rowIndex<2) return false;

srcRowIndex = el.parentElement;

bDragMode = true ;

if (objDragItem!=null){

with(objDragItem){

innerHTML = el.parentElement.innerHTML;

style.height = el.parentElement.offsetHeight;

style.width = el.parentElement.offsetWidth;

}

el.setCapture();

}

function mouseup(){

if(el==null || el.cellIndex!=0 || el.parentNode.rowIndex<2) return false;

targetRowIndex = el.parentElement;

srcRowIndex.swapNode(targetRowIndex);

bDragMode = false ;

objDragItem.style.display ="none";

}

function mousemove(){

el = window.event.srcElement;

window.event.cancelBubble = false;

cliX = window.event.clientX;

cliY = window.event.clientY;

if(bDragMode && objDragItem!=null){

with(objDragItem){

style.display ="";

style.posLeft = cliX +1;

style.posTop = cliY - offsetHeight/2;

}

</script>

直接Copy下来就可以用,欢迎大家一起讨论: dongpin9685@163.com

收录于

JavaScript

标签

#javascript #class #function #input #generator

5、模型预测控制与分布式MPC控制结构解析本文深入解析了模型预测控制（MPC）中的双模式预测控制及其稳定性理论，并探讨了分布式MPC的不同控制结构。内容涵盖MPC的基本公式化、性能指标、优化问题以及相关算法步骤，同时比较了集中式MPC、单层分布式MPC和分层分布式MPC的优缺点和适用场景。最后通过流程图和表格形式总结了双模式MPC的算法步骤和控制结构选择思路，并提供了操作建议，以帮助在实际工业系统中更好地应用MPC技术。阅读详情

JAVASCRIPT+DHTML实现表格拖动（固定写法）

相关推荐