java web可以拖动表格单元格大小的html,鼠标拖动改变表格大小(四)

效果图:拖动带颜色的框,可以上下左右拖动表格宽度

特点:拖动容易,上下左右框都可拖动

代码:

Html代码

<table cellspacing=0 id=mytable cellpadding=0 border=0 style="position:absolute;left:50;top:50;width:100;height:100;">
<tr>
<td colspan=3 height=2 bgcolor=blue></td>
</tr>
<tr>
<td bgcolor=blue width=2></td>
<td>
<table width=100% height=100%>
<tr>
<td>
</td>
</tr>
</table>
</td>
<td bgcolor=blue width=2 style="cursor:w-resize"  id="wresize"></td>
</tr>
<tr>
<td colspan=2 bgcolor=blue height=2 id="nresize"  style="cursor:n-resize"></td>
<td bgcolor=blue height=2 style="cursor:nw-resize"  id="nwresize"></td>
</tr>
</tr>
</table>
<script language=javascript>
resizing=false;
resizeto=null;
buttonevent=null;

function resizestart()
{
   buttonevent=event.srcElement;
   if((buttonevent.id=="nwresize")||(buttonevent.id=="wresize")|| (buttonevent.id=="nresize"))
   {
    if(buttonevent.id=="nwresize")resizeto="nw";
    if(buttonevent.id=="nresize")resizeto="n";
    if(buttonevent.id=="wresize")resizeto="w";
    resizing=true;
    dragx=event.x-mytable.offsetWidth;
    dragy=event.y-mytable.offsetHeight;
    buttonevent.setCapture();
   }
}

function resize()
{
   if(resizing)
     {
     if((resizeto=="w")||(resizeto=="nw")) mytable.style.pixelWidth=event.clientX-dragx;
     if((resizeto=="n")||(resizeto=="nw")) mytable.style.pixelHeight=event.clientY-dragy;
     }
}

function resizeend()
{
   resizing=false;
   buttonevent.releaseCapture();
}

document.onmousedown=resizestart;
document.onmousemove=resize;
document.onmouseup=resizeend;
</script>

时间: 2024-09-17 04:17:01

java web可以拖动表格单元格大小的html,鼠标拖动改变表格大小(四)的相关文章

word文档中绘制表格单元格内容居中的问题介绍

  方法/步骤 绘制表格很简单,"插入"--"表格". 文档中绘制表格单元格内容居中的问题介绍-word表格单元格不居中"> 在制作表格的时候,应该会遇到要居中吧. 这个很简单,点击一下"居中"的按钮即可. 而这个想把它居中在单元格中间不能按上面的方法.简单的可以回车,也可以调整单元格拉动,但有时会拉错,弄得更复杂. 我们可以选中需要居中的内容,右击"单元格对齐方式" 点击中间那个 ,就能居中了. 也可以把&q

WPS表格单元格数据组合如何拆分

  WPS表格单元格数据的组合拆分及格式转换的教程: 实例一:用公式或函数组合数据获取出生地址 1.用"&"号组合数据. 2.用函数(CONCATENATE)组合数据. 实例二:拆分考试号,获取学校.班级.学号信息. 城南.城北两校联合组织五六年级语文竞赛,学生成绩统计如下: 要将各校各班的成绩分类汇总,当然要先将各校各班的学生分开 一.数据分析. 学生的考试号由学校代码(cn,cb)班级代码(51,52,61,62)学生代码(01-48)三部分组成.现在要做的是将其拆分开来,

word2010如何调整表格单元格边距?

  word2010如何调整表格单元格边距? 1.在要调整边距的单元格中点击鼠标. 2.点击表格后,word2010菜单中会出现"布局 "选项卡.此时点击"布局 "选项卡. 3.要注意的是,点击表格之前,word2010菜单栏中是没有"布局"选项卡的. 4.点击布局选项卡中的"单元格边距". 5.在打开的界面即可设置单元格边距的各种选项. 6.设置好后,点击"确定"按钮即可.

WPS多余表格单元格如何删除

  1.打开WPS文档,点击工具栏的"插入",插入表格 2.选中需要删除的单元格,然后点击工具栏的"删除" 3.选择"右侧单元格左移"然后点击确认即可. 4.这个时候多余的表格单元格就消失啦,或者我们可以将鼠标移到表格的行列之间也可以看到"-"和"+"号点击相应的"+""-"号也可以对行列数进行增减.

JavaScript动态改变表格单元格内容的方法

 这篇文章主要介绍了JavaScript动态改变表格单元格内容的方法,涉及javascript操作html中table表格的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JavaScript动态改变表格单元格内容的方法.分享给大家供大家参考.具体如下: JavaScript动态改变表格单元格的内容,下面的代码通过修改单元格的innerHTML来修改单元格内容 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

JS实现控制表格单元格垂直对齐的方法

 这篇文章主要介绍了JS实现控制表格单元格垂直对齐的方法,涉及javascript操作表单元素样式的技巧,具有一定参考借鉴价值,需要的朋友可以参考下     本文实例讲述了JS实现控制表格单元格垂直对齐的方法.分享给大家供大家参考.具体如下: 下面的代码控制指定的单元格靠底部垂直对齐 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 <!DOCTYPE html> <html>

对象-急!在线等!谢谢!java将excel特定的单元格写入另一个excel,已经读出来了,不会写入

问题描述 急!在线等!谢谢!java将excel特定的单元格写入另一个excel,已经读出来了,不会写入 package com.excel.action; import java.io.File; import java.io.FileInputStream; import java.io.InputStream; import jxl.Cell; import jxl.CellType; import jxl.LabelCell; import jxl.Sheet; import jxl.W

jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】_jquery

本文实例讲述了jQuery实现点击表格单元格就可以编辑内容的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!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/

jQuery实现HTML表格单元格的合并功能_jquery

本文实例讲述了jQuery实现HTML表格单元格合并的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 合并前: 合并后: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.

表格单元格交错着色实现思路及代码_javascript技巧

[Title][原]表格单元格交错着色 [Abstract]以空间换时间,循环确定所着颜色. [Environment]jQuery [Author]wintys (wintys@gmail.com) http://wintys.cnblogs.com [Content]: 1.效果  2.问题描述 对如下表格中的单元格进行交错着色.表格中HTML标签.内容已定. 复制代码 代码如下: <div id="tablecontainer" align="center&quo