| 编程（Programming）是编定程序的中文简称，就是让计算机代码解决某个问题，对某个计算体系规定一定的运算方式，使计算体系按照该计算方式运行，并最终得到相应结果的过程。为了使计算机能够理解（understand）人的意图，人类就必须将需解决的问题的思路、方法和手段通过计算机能够理解的形式告诉计算机，使得计算机能够根据人的指令一步一步去工作，完成某种特定的任务。这种人和计算体系之间交流的过程就是编程。 【实例名称】 JS代码实现动态拖放表格的宽度 【实例描述】 表格的宽度一般在页面设计时被静态指定：本例学习如何在页面运行时，动态改变表格的宽度。 【实例代码】 <html>
<head>
<title>Untitled Document-本站（www.xue51.com）</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript">
var dragenable=false;
var x;
var y;
var w;
var h;
var obj;
function init()
{
x=event.clientX+document.body.scrollLeft;
//获取x坐标
obj=event.srcElement;
//获取鼠标触发的元素
w=event.srcElement.offsetWidth;
//对象的宽度
obj.setCapture();
//接受鼠标消息
if(x>event.srcElement.offsetLeft+w-5 &&
x<event.srcElement.offsetLeft+w) {
//鼠标移动到对象边界时
dragenable=true;obj.style.cursor='e-resize';}
//改变鼠标的样式-左右拖动型
}
function drag()
{
if(event.clientX+document.body.scrollLeft>event.
srcElement.offsetLeft+event.srcElement.offsetWidth-5 &&
event.clientX+document.body.scrollLeft<event.
srcElement.offsetLeft+event.srcElement.offsetWidth)
{event.srcElement.style.cursor='e-resize';}
//改变鼠标的样式-左右拖动型
else
event.srcElement.style.cursor='default';
//改变鼠标的样式-默认型
if(dragenable==true) {
if(event.clientX+document.body.scrollLeft-x+w>0) {
var i=obj.cellIndex;
var j;
for(j=0;j<obj.parentNode.parentNode.rows.length;j++) {
//更改表格的宽度
obj.parentNode.parentNode.rows[j].cells[i].width=
event.clientX+document.body.scrollLeft-x+w;
}
}
else {
var i=obj.cellIndex;
var j;
for(j=0;j<obj.parentNode.parentNode.rows.length;j++) {
obj.parentNode.parentNode.rows[j].cells[i].width=1;
//最小也要保持宽度为1
}
}
}
}
function end()
//结束更改
{
dragenable=false;
obj.releaseCapture();
//释放鼠标的捕获
obj.style.cursor='default';
//更改鼠标的样式为默认
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin=0 topmargin=0>
表格宽度设置为百分比显示
<br>
<table width="60%" border="1" cellpadding="0"
cellspacing="2" onmousedown=init() onmouseup=end()
onmousemove=drag() id=table1 style="table-layout:fixed">
<tr>
<td height="18" align="top"> </td>
<td align="top"> </td>
<td align="top"> </td>
<td align="top"> </td>
</tr>
<tr>
<td height="18" align="top"> </td>
<td align="top"> </td>
<td align="top"> </td>
<td align="top"> </td>
</tr>
<tr>
<td height="18" align="top"> </td>
<td align="top"> </td>
<td align="top"> </td>
<td align="top"> </td>
</tr>
<tr>
<td height="18" align="top"> </td>
<td align="top"> </td>
<td align="top"> </td>
<td align="top"> </td>
</tr>
</table>
</body>
</html>
【运行效果】 
【难点剖析】 本例的重点其实是鼠标坐标的获取。代码中使用_“event．srcElement”获取鼠标操作的对象，然后使用“offsetWidth”获取该对象的宽度。当鼠标移动到表格边界时，再动态改变鼠标的样式。 【源码下载】 如果你不愿复制代码及提高代码准确性，你可以点击：动态拖放表格的宽度 进行本实例源码下载
使用编程语言写的程序，由于每条指令都对应计算机一个特定的基本动作，所以程序占用内存少、执行效率高。
| 
