`
y328771518
  • 浏览: 10726 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

jQuery实现表格td宽度等于th宽度

 
阅读更多
<table style="width:100%; " id="tblHeader" class="table table-striped">
    <thead>
	  <tr style="background:#E7E7E7;color:#101010;">
		<th style="width:135px;" class="center" >行政区域(省级)</th>
		<th style="width:135px;" class="center">行政区域(市级)</th>
		<th style="width:150px;" class="center">所属运营商</th>
		<th style="width:135px;" class="center">统计月份</th>
		<th style="width:135px;" class="center">桩类型</th>
		<th style="width:135px;" class="center">桩功率等级</th>
		<th style="width:135px;" class="center">服务对象</th>
		<th style="width:135px;" class="center">充电桩数量(个)</th>
	  </tr>
	</thead>
</table>
<div id="biaoge1" style="height:295px; overflow-y:auto;">
     <tr>
        <td></td><td></td><td></td><td></td><td></td><td></td><td></td>
     </tr>
</div>

 

         var tdHeader = $("#tblHeader").find("tr").eq(0).find("th");//获取表头对象
	 var tds = $('#biaoge1').find("tr").eq(0).find("td");//获取表格对象
	    		
	$(tds.eq(0)).width(tdHeader.eq(0).width());//设置表格宽度为表头宽度
	$(tds.eq(1)).width(tdHeader.eq(1).width());
	$(tds.eq(2)).width(tdHeader.eq(2).width());
	$(tds.eq(3)).width(tdHeader.eq(3).width());
	$(tds.eq(4)).width(tdHeader.eq(4).width());
        $(tds.eq(5)).width(tdHeader.eq(5).width());
	$(tds.eq(6)).width(tdHeader.eq(6).width()); 
	$(tds.eq(7)).width("122");//最后一格手动设置宽度

 

分享到:
评论

相关推荐

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

    在本文中,我们将深入探讨jQuery库的一个实用特性——如何实现表格列宽度的拖动调整,即resizableColumns功能。这个特性允许用户通过简单的鼠标操作来动态改变表格列宽,提高用户体验。我们将基于提供的"jQuery拖动...

    jQuery实现表格宽度自动拖拽效果.zip

    在本资源中,我们主要关注的是使用jQuery实现表格宽度自动拖拽效果,这是一项常见的前端交互功能,使得用户可以根据需要自定义表格列宽。在HTML5的背景下,这个功能能够提升网页的用户体验,使得数据展示更为灵活和...

    jquery拖动的table表格的宽度隐藏表格中的内容

    在这个特定的问题中,我们关注的是如何使用jQuery来实现一个可拖动调整宽度的table表格,并在宽度调整到一定程度时隐藏其中的内容。 首先,我们需要理解HTML中的`&lt;table&gt;`元素,它是用来展示结构化数据的,通常由行...

    jquery 实现表格列宽调整

    比如,`$('table')` 可以选中所有表格,而 `$('th')` 或 `$('td')` 可以分别选中表头单元格和普通单元格。我们可以通过 `.on()` 方法绑定事件,如鼠标拖动事件,来实现列宽调整。 2. **鼠标事件**:在实现拖动调整...

    jQuery调整表列宽度

    每个`&lt;th&gt;`或`&lt;td&gt;`都有自己的宽度属性,可以用来设定初始列宽。 要实现拖动调整列宽的功能,我们需要做到以下几点: 1. **添加交互**:为表格的列头(`&lt;th&gt;`)添加鼠标悬浮(hover)和按下(mousedown)事件监听...

    jquery给表格加滚动条

    本示例将详细讲解如何利用jQuery库为普通的HTML表格添加滚动条,以实现数据的高效浏览。 一、jQuery简介 jQuery是一个快速、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。jQuery的设计...

    表格宽度拖动

    下面我们将深入探讨如何利用jQuery实现表格宽度拖动功能。 首先,你需要在HTML中创建一个基本的表格结构。表格通常由`&lt;table&gt;`、`&lt;thead&gt;`、`&lt;tbody&gt;`、`&lt;tr&gt;`和`&lt;th&gt;`(表头单元格)等元素组成。例如: ```html ...

    javaweb表格宽度

    - `flexible-width`: 使用`display: table-cell`和`flex-grow`属性,可以让表格单元格根据内容自适应宽度,实现灵活布局。 2. **Bootstrap框架** 如果项目中使用了Bootstrap,可以通过其栅格系统来调整表格宽度。...

    网页表格冻结示例,jquery实现

    网页表格在展示大量数据时是不可或缺的工具...总的来说,使用jQuery实现网页表格冻结是一种常见的技术实践,它提升了用户在查看大量数据时的阅读体验。通过熟练掌握这个技巧,你可以为你的网页应用增添更多实用的功能。

    jquery实现表格隔行换色效果

    本文将详细介绍使用jQuery库来实现表格隔行换色效果的方法。 ### jQuery简介 jQuery是一个快速、小巧、功能丰富的JavaScript库,它封装了JavaScript常用的功能代码,提供了一种简洁的JavaScript操作方式。通过...

    JQuery table改变列的宽度

    一个表格由`&lt;table&gt;`元素开始,包含若干行`&lt;tr&gt;`(table row),每一行又包含若干个单元格`&lt;td&gt;`(table data cell)或表头单元格`&lt;th&gt;`(table header cell)。在jQuery中,我们可以利用选择器精确地定位到我们需要...

    基于jQuery可以伸缩的表格

    "基于jQuery可以伸缩的表格"就是针对这一需求提出的一种解决方案,它利用jQuery库的强大功能,实现了表格列宽的动态调整,从而让用户在查看或操作数据时更加方便。 jQuery是一个轻量级、高性能的JavaScript库,它的...

    table 表格宽度拖动demo

    "table 表格宽度拖动demo"就是一个专门针对这一需求的示例,它展示了如何实现用户可以通过拖动来调整表格列宽的功能。 首先,我们需要理解HTML中的`&lt;table&gt;`元素,它是创建表格的基础。`&lt;table&gt;`包含`&lt;thead&gt;`...

    table自动宽度拉伸

    通过百分比宽度实现基本的自适应,再利用jQuery插件提供手动调整列宽的功能,可以极大地提升用户的交互体验,尤其在数据密集型的网页应用中。同时,这样的设计也符合现代网页开发的响应式设计理念,确保了在不同设备...

    jquery给表格加滚动条.zip

    这个“jquery给表格加滚动条.zip”压缩包文件可能包含了一个使用jQuery库来实现表格滚动条的示例。jQuery是一个流行的JavaScript库,它简化了DOM操作、事件处理和动画效果等任务。在CSS、JavaScript和HTML5的配合下...

    jquery不同设备表格调整.rar

    这个资源“jquery不同设备表格调整.rar”提供了这样的实现,适用于希望优化表格在不同设备上显示效果的开发者。学习和理解其中的代码,将有助于提升你在响应式网页设计和jQuery应用方面的技能。

    JQuery可编辑表格小结.docx

    例如,`TABLE`类设置了表格的边框、宽度和边框合并,`TD`类设置了单元格的边框,并给单元格添加了鼠标指针效果,`TH`类设置了表头的宽度,而`TBODY TH`类设置了表头背景颜色为蓝色。 在`table.js`中,我们看到...

    超强jquery表格样式.zip

    "超强jquery表格样式.zip"这个压缩包文件显然提供了丰富的jQuery表格样式资源,旨在帮助开发者创建出美观且功能强大的数据展示组件。接下来,我们将详细探讨这些技术及其在创建表格样式中的应用。 首先,HTML5是...

    gvChar图表插件 用jQuery实现电子图表(兼容各浏览器)

    这个插件充分利用了jQuery的易用性和广泛的浏览器兼容性,使得开发者无需深入学习复杂的图表库,也能快速实现数据可视化。 在实际应用中,`gvChar`插件的操作流程通常包括以下步骤: 1. **引入资源**:首先,你...

    jquery 双色表格实现代码

    通过`&lt;tr&gt;`定义表格行,`&lt;th&gt;`定义表头单元格,而`&lt;td&gt;`定义标准的单元格。通过对这些元素的CSS样式设置,可以改变表格的外观,如边框、文本对齐和宽度。 综上所述,通过结合jQuery的选择器、事件处理和CSS操作,...

Global site tag (gtag.js) - Google Analytics