jQuery CSS实现的桌子表格行列转置功能示例

本文实例讲述了jQuery CSS实现的桌子表格行列转置功能。分享给大家供大家参考，具体如下：

先来看看运行效果：

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' head titlewww.jb51.net jQuery行列转置/title脚本类型=' text/JAVAScript ' src=' http : jquery-1。7 .2 .量滴js /脚本样式类型=' text/CSS '表格{边框： 1px实心# CCCfont-size : 14px}表格th {背景：橙色；color : # fffpadding : 10px }表td { padding: 10px }表。垂直{-网页套件-书写模式-:垂直-lr；-moz-writing-mode :垂直-lr；-ms-writing-mode : TB-lr；书写模式：垂直-lr；} table .垂直th，table。垂直TD {宽度： 100 pxheight: 14px}桌子。垂直div {宽度： 100 px-网页套件-书写模式-:水平-TB；-moz-writing-mode:水平结核病；-ms-writing-mode : lr-TB；书写模式：水平结核病；}/样式脚本类型='text/javascript' var标志=false//注：多次点击后，内面文字会包裹多层div，尚无好的解决方法函数测试(){ if(！标志){ $(“表”)。addClass(')垂直')。查找(' th，td ').内部换行(' div ')；//$(“表”).addClass(')垂直');//数字会变垂直，不能用} else { $("table ").removeClass(“”垂直');} flag=！旗帜；}/脚本/床头桌tr th列第一次列2日列3日列第四届数据1-1/td td数据1-2/td td数据1-3/td td数据1-4/td /tr数据2-1/td td数据2-2/td td数据2-3/td td数据2-4/td /tr数据3-1/td td数据3-2/td td数据3-3/td td数据3-4/td /tr /table输入类型=' button ' onclick=' test()' value='行列转置//正文/html更多关于框架相关内容感兴趣的读者可查看本站专题： 《jQuery表格(table)操作技巧汇总》 、 《jQuery操作json数据技巧汇总》 、 《jQuery form操作技巧汇总》 、 《jQuery常用插件及用法总结》 、 《jQuery扩展技巧总结》 及《jquery选择器用法总结》

希望本文所述对大家框架程序设计有所帮助。