`
zhaolicric
  • 浏览: 145915 次
  • 性别: Icon_minigender_2
  • 来自: 青岛
社区版块
存档分类
最新评论

JQuery table改变列的宽度

jQueryJavaScriptHTML 
阅读更多

JQuery 使table的tr  变成可变宽窄的.

 

1.首先要引用两个js

2.在ready的时间调用movedTh()方法.这时table的id要一致

3. table 的td 要换成th

4.table 还有两个属性   table-layout:fixed

 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>table改变列宽---实例</title>
<SCRIPT src="jquery-1.4.1.min.js" mce_src="jquery-1.4.1.min.js" type="text/javascript"></SCRIPT>
<SCRIPT src="jtablemovesize.js" type="text/javascript"></SCRIPT>
</head>
<script language="javascript" type="text/javascript">
/*
 * 2、设置每列的列头为可拖动大小
 */
$().ready(function(){
	$("#bodymaintable").movedTh();
})
</script>
<body>
<div>
<table id="bodymaintable" cellPadding=3 STYLE="table-layout:fixed;" mce_STYLE="table-layout:fixed;" border=1>
  <tr>
    <th width="48">编号</th>
    <th width="114">名称</th>
    <th width="106">规格</th>
  </tr>
  <tr>
    <th>123456</th>
    <th>贴片电阻</th>
    <th>1K±5%</th>
  </tr>
  <tr>
    <th>789123</th>
    <th>贴片电容</th>
    <th> 0.1uF/25V </th>
  </tr
</table>
</div>
</body>
</html>
 
分享到：
| js中的数据类型转换
评论
3 楼 sf89902728 2014-04-07  
可以用，赞一个
2 楼 hngmduyi 2013-06-07  
假的 骗子
1 楼 wuzexin 2012-12-25  
假的 骗子
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery实现table拖拽列效果

    用jquery实现table拖拽列功能，可动态改变表格列宽度，并且实现table表格100%的问题，如果列缩小，则自动拉伸最后一列以实现table100%的效果，如果拉伸长度比原长度大，则显示x滚动条。

    jquery滑动改变table列宽度

    使用jQuery的`width()`方法设置列的宽度。可以使用CSS的`transition`属性添加平滑过渡效果，使得列宽改变过程更流畅。 4. **兼容性处理**： 对于不支持此功能的浏览器，如IE8，可以提供备选方案，如静态的列宽...

    jQuery+js 实现Table表格可任意拖动调整列宽度大小 适用于列表页等表头拖动宽度设置

    本文将详细介绍如何使用jQuery和JavaScript技术来实现在网页上的Table表格中，通过拖动表头来任意调整列宽度的功能，这个功能适用于各种列表页面，如数据展示、报表分析等场景。 首先，我们需要引入jQuery库，它是...

    jQuery调整表列宽度

    2. **拖动处理**：添加鼠标移动（mousemove）事件监听器，该监听器在鼠标移动时持续更新列的宽度。计算鼠标相对于按下位置的偏移量，并根据这个偏移量调整列宽。 3. **释放操作**：添加鼠标释放（mouseup）事件监听...

    table 改变列宽 jquery

    table tr 改变列宽 jquery

    jQuery拖动表格列宽度resizableColumns 附件包含demo

    我们将基于提供的"jQuery拖动改变表格列宽度resizableColumns"的demo进行讲解。 首先，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画制作以及Ajax交互等任务。jQuery的核心理念是“Write ...

    jQuery动态改变列宽

    jQuery动态改变列宽，可以实现拖动jQuery动态改变列宽，可以实现拖动

    任意改变table表格td的宽度 支持表格TD拖拽

    标题“任意改变table表格td的宽度 支持表格TD拖拽”和描述中反复提到的“动态td的宽度”，就是指这种功能，即允许用户通过拖动来调整表格单元格的宽度。 实现这一功能通常需要结合JavaScript（或者更高级的库如...

    table表格拖动改变td宽度

    "table表格拖动改变td宽度"这一功能，正是为了提升用户体验，允许用户通过拖动来动态调整表格单元格(`td`)的宽度，使得数据的查看和操作更加灵活便捷。 实现这一功能通常涉及到以下几个关键知识点： 1. **HTML ...

    table自动宽度拉伸

    在"jQuery实现表格宽度自动拖拽效果"的文件中，我们可以找到一个例子，该例子展示了如何通过jQuery实现表格列的拖拽功能，让用户能够自由调整列宽。 以下是一个简单的jQuery插件示例，用于实现表格列宽的拖动调整：...

    table列排序、列拖动、列宽度变化、行交换

    用户可以通过手动拖动列边框来改变宽度，或者采用自动调整列宽的机制，让表格更适应屏幕尺寸或数据内容。 最后，**行交换**功能则允许用户交换表格内的行，这对于数据对比或整理非常有用。例如，在一个待办事项列表...

    CSGO鼠标移动改变图片宽度

    在本文中，我们将深入探讨如何使用Jquery来实现“CSGO鼠标移动改变图片宽度”的功能，同时结合右侧tab栏的切换效果。这是一个交互性较强的网页设计技术，它能提升用户体验，使用户在浏览网页时感受到更生动、动态的...

    jQuery实现多列左右箭头移动解决方案

    在网页开发中，有时我们需要处理表格（table）数据，尤其是当数据量大到一列无法完全显示时。这时，"jQuery实现多列左右箭头移动解决方案"就显得尤为重要。这个解决方案旨在提供一种方法，使用户可以通过点击左右...

    jQuery自适应浏览器宽度响应式表格插件basictable.zip

    《jQuery自适应浏览器宽度响应式表格插件basictable》 在现代网页设计中，响应式布局已经成为一种标准，确保网站在不同设备上都能提供良好的用户体验。jQuery作为一款广泛使用的JavaScript库，为开发者提供了丰富的...

    jquery Table响应式表格插件.zip

    当浏览器窗口大小改变时，插件会动态调整表格的布局，例如将列转换为堆叠模式，或者调整列宽以适应屏幕宽度。此外，它可能还会对表格的滚动、排序和筛选功能进行优化，以确保在小屏幕设备上也能顺畅使用。 三、主要...

    jquerytableshrinker将任何大型数据表缩小为紧凑且响应式的表格

    除了基本的折叠和展开功能，jQuery Table Shrinker还支持自定义事件和回调函数，允许开发者根据需求扩展功能，如在表格状态改变时执行特定的操作。此外，对于那些有特殊布局需求的表格，可以利用其提供的API进行...

    table表头及列固定

    本文将深入探讨如何使用`table`元素，并结合jQuery实现表头及列的固定，以便在滚动时保持关键信息可见，提高用户体验。 首先，让我们了解`table`的基本结构。一个`table`由`&lt;table&gt;`标签开启，`&lt;/table&gt;`标签关闭。...

    bootstrapTable实现列宽可拖动

    "bootstrapTable 实现列宽可拖动"的特性就是为了解决这个问题，让用户可以通过鼠标拖动来动态调整表格列的宽度。 要实现这个功能，首先你需要确保在项目中已经引入了 BootstrapTable 的基础库和相应的 CSS、JS 文件...

    bootstrap-table拖拽表格改变列宽

    在“bootstrap-table拖拽表格改变列宽”这个主题中，我们将深入探讨如何实现用户可以动态调整表格列宽的功能，同时确保兼容主流浏览器，并保持表格的body部分与header部分对齐。 首先，我们需要引入必要的CSS和JS库...

Magicbox
Global site tag (gtag.js) - Google Analytics