如何用js實現(xiàn)一個可收縮擴展列的表格？

1、外部全局變量記錄伸展或收縮；

10年積累的成都網(wǎng)站制作、做網(wǎng)站、外貿(mào)營銷網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有東城免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

2、點擊按鈕增加點擊事件----判斷全局變量；

3、如果是顯示，js在本行插入一行并賦值：（找到td的父tr，在tr后追加html新的tr，并填充內(nèi)容）。

4、隱藏，找到對應(yīng)新加的那行，hide或直刪除即可。

js和css怎么實現(xiàn)收縮和展開？

給你舉個例子：

script language="javascript"

function show_div(){

var obj_div=document.getElementById("starlist");

obj_div.style.display=(obj_div.style.display=='none')?'block':'none';

}

function hide_div(){

var obj_div=document.getElementById("starlist");

obj_div.style.display=(obj_div.style.display=='none')?'block':'none';

}

/script

a href="javascript:show_div()" 顯示/展開/a

div id="starlist"

內(nèi)容br/

內(nèi)容br/

內(nèi)容br/

內(nèi)容br/

/div

這樣就可以實現(xiàn)

追問

用jQuery實現(xiàn)，該怎么實現(xiàn)？就是不能彈出的那種，就要一個點擊了之后就在下方顯示的那種，謝謝！

回答

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gbk" /

titleStripingTable/title

script type="text/javascript" src=""/script

script type="text/javascript"

!--

$(document).ready(function(){ });

function changeDisplay(){

var helloDivObj = $("#helloDiv");

var buttonObj = $("#btnDisplay");

var val = buttonObj.attr("value");

if(val=="隱藏"){

helloDivObj.hide();

buttonObj.attr("value","顯示");

}else{

helloDivObj.show();

buttonObj.attr("value","隱藏");

}

}

--

/script

/head

body

input id="btnDisplay" type="button" value="隱藏" onclick="changeDisplay()"/

div id="helloDiv"

Hello,everyonep/p

Hello,everytwop/p

Hello,everythreep/p

/div

/bdoy

/html

JS展開-收縮

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""

html xmlns=""

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /

title步步驚心/title

style

span#hd {

cursor:hand;

}

/style

script language="JavaScript"

!--

onload = function() {

var p1 = document.getElementsByTagName('p')[0];

p1.style.display = 'none';

var span = document.getElementsByTagName('span')[0];

span.onclick = function() {

if (span.innerText == '+')

{

span.innerText = '-';

p1.style.display = 'block';

}

else {

span.innerText = '+';

p1.style.display = 'none';

}

}

}

//--

/script

/head

body

div class="jq mb"h2電視劇《步步驚心》劇情介紹/h2

ulspan id="hd"+/spanp由吳奇隆,劉詩詩,鄭嘉穎,袁弘,林更新領(lǐng)銜主演br

故事講述繁華都市的一名普通白領(lǐng)張曉，因一腳踏空而穿越了時空隧道，帶著對清史的洞悉進入風云詭變的宮廷。她知道自己不該卷入九王奪嫡的爭斗中，可心不由己，因為這里有她所愛的，

也有愛著她的作為一個朝九晚五的普通白領(lǐng)，除了模樣長得挺招人喜愛，現(xiàn)年二十多歲的張曉和周圍其他忙忙碌碌的都市人基本沒什么區(qū)別。張曉談過幾次無疾而終的戀愛，談不上深刻卻也對

她有點影響。做著一份不喜愛也不討厭的工作，為了薪水再多一些位置再高一些，她也能整天樂呵呵地投入到與戰(zhàn)爭一樣殘酷的職場斗爭中去。她按部就班地計劃著自己的未來的人生房子，旅

游，戀愛。在張曉的前半生里，無論她做的還是她想的，幾乎都與普通人一樣，為了更好的生活奮斗著，樂此不疲。但張曉的內(nèi)心總有著一種牽動，她自己也說不出個名堂來，只覺得冥冥之中

，似乎還存在著另一種生活那一天，張曉與男友黃棣在路上吵架，不料，在爭吵中，張曉撞到了連著電線的廣告板上，而這一撞擊，也把她的靈魂撞進了清朝的宮廷中。就像鋪天蓋地的穿越小

說里寫的那樣，張曉的靈魂跨過時間的隧道，在一個叫馬爾泰.若曦的十三歲清朝女孩的體內(nèi)，重生了時年，康熙第四十三年。天下太平，但一場震動歷史的九龍奪嫡正在暗潮涌動。權(quán)利的廝

殺，愛情的灼燒，在被無限放大的歷史舞臺上，張曉，不，是馬爾泰若曦的命運無可避免的與眾位親王阿哥們交織在一起故事講述繁華都市的一名普通白領(lǐng)張曉，因一腳踏空而穿越了時空隧道

，帶著對清史的洞悉進入風云詭變的宮廷。她知道自己不該卷入九王奪嫡的爭斗中，可心不由己，因為這里有她所愛的，也有愛著她的作為一個朝九晚五的普通白領(lǐng)，除了模樣長得挺招人喜愛

，現(xiàn)年二十多歲的張曉和周圍其他忙忙碌碌的都市人基本沒什么區(qū)別。張曉談過幾次無疾而終的戀愛，談不上深刻卻也對她有點影響。做著一份不喜愛也不討厭的工作，為了薪水再多一些位置

再高一些，她也能整天樂呵呵地投入到與戰(zhàn)爭一樣殘酷的職場斗爭中去。她按部就班地計劃著自己的未來的人生房子，旅游，戀愛。在張曉的前半生里，無論她做的還是她想的，幾乎都與普通

人一樣，為了更好的生活奮斗著，樂此不疲。但張曉的內(nèi)心總有著一種牽動，她自己也說不出個名堂來，只覺得冥冥之中，似乎還存在著另一種生活那一天，張曉與男友黃棣在路上吵架，不料

，在爭吵中，張曉撞到了連著電線的廣告板上，而這一撞擊，也把她的靈魂撞進了清朝的宮廷中。就像鋪天蓋地的穿越小說里寫的那樣，張曉的靈魂跨過時間的隧道，在一個叫馬爾泰.若曦的

十三歲清朝女孩的體內(nèi)，重生了時年，康熙第四十三年/p

pfont color="red"內(nèi)容2，不需要隱藏br /p/ul

/div

!--/Footer--

/body

/html

我是寫的+和-，你可以替換成2個圖片。

如何壓縮javascript和css文件

一、壓縮html和javascript：

我們用站長工具的JavaScript-HTML格式化工具，我們打開頁面，我今天要壓縮的文件js文件：common.js ，把js代碼復(fù)制到到JavaScript/HTML格式化工具里面如下圖所示：

點擊下面的“普通壓縮”和“加密壓縮”按鈕，經(jīng)過我的精心測試，使用“加密壓縮”，對文件壓縮率是最好的，所以點擊“加密壓縮”，壓縮后如圖：

javascript代碼壓縮后，我們就把這些代碼在復(fù)制到common.js文件里面，在吧這個文件上傳到空間原來的位置，進行訪問是否存在一些錯誤，如果沒有什么問題說明壓縮成功；

我的common.js 文件壓縮前和壓縮后的對比：

壓縮前：

壓縮后：

文件壓縮前和壓縮后確實有明確的減少，說明壓縮確實減少文件的大小，

我們來測試文件壓縮前和壓縮后所有能的時間做對比(我是用火狐插件測試傳輸速度)：

壓縮前所用時間：

壓縮后所用時間：

壓縮前所用時間是：125ms，壓縮后所用時間：78ms ，文件壓縮后給我們節(jié)省大量的時間，如果每個js都進行壓縮，我們房子訪問速度會更快的。

(注：html文件和javascript壓縮原來一樣的，當時壓縮html要用到“普通壓縮”按鈕壓縮)

二、壓縮css文件：

我們打開站長工具的Css壓縮/格式化工具頁面，我要壓縮的文件是五色旗保健品商城的css主文件style.css，首先我們打開站長工具的Css壓縮/格式化工具頁面 ，把style.css 代碼放到Css壓縮/格式化工具里面，如下圖所示：

點擊“壓縮代碼”按鈕后，css代碼壓縮成功，如下圖所示：

后邊就是壓縮后的css代碼，你要不右邊的代碼復(fù)制到源文件style.css里面在上傳到服務(wù)器空間里面，在訪問一下網(wǎng)，看看網(wǎng)頁樣式有沒有改變，如果有點變化就需要簡單的調(diào)試一下，如果沒有變樣，說明你的css壓縮成功了；

下面我們來看看styl.css文件壓縮前和壓縮后的大小和放在訪問速度的大小：

文件大小對比：

壓縮前：

壓縮后：

壓縮前30kb，壓縮后23kb，明顯的文件大小減小了

壓縮前所用時間：

css壓縮前的時間.jpg (7.36 KB, 下載次數(shù): 0)

下載附件

css壓縮前的時間.jpg

2013-11-2 00:35 上傳

壓縮后所用時間：

壓縮前所用時間是：188ms，壓縮后所用時間：93ms ，css壓縮后明顯的節(jié)省了95ms；

總結(jié)：一個大的網(wǎng)站可能會有很多的javascript和css，如果沒有都進行壓縮的話，一定會減少很多文件大小的，其實減少文件大少并不是很重要，最重要的是，文件容量減少了，能夠快速的提高網(wǎng)站訪問的速度，給用戶帶來好的體驗，我們盡量的把文件壓縮到最小，這樣才有利于用戶快速的打開網(wǎng)站，至此我的五色旗保健品商城優(yōu)化后，我的每天的訪問量也增加了很多。

JS控制實現(xiàn) 點擊展開 再點擊收縮

function showOtherFundSource(propertyName)

{

var label="${portletInstanceLabel}";

var fundSources = document.getElementsByName(label+propertyName);

var fundSource = fundSources[0];

var fundSourceValue = fundSource.options[fundSource.selectedIndex].value;

if (fundSourceValue == 'OTHERS')

{

document.getElementById("otherFundSourceDiv").style.display = "block";

}

else

{

document.getElementById("otherFundSourceDiv").style.display = "none";

}

}

用DIV控制，點擊事件，改display的屬性，很簡單的！

JS控制單個DIV在頁面加載時收縮

樓主看看是不是你要的效果。寫的比較粗糙。你借鑒下思路就好了。這種效果如果用jquery來做就非常的簡單。建議樓主想用JS做效果的話可以去學jquery

html

head

titletest/title

style

body{

text-align:center;

}

#area{

border:1px solid black;

width:500px;

height:15px;

position:relative;

overflow:hidden;

paddding:0;

}

#title{

background-color:cyan;

position:absolute;

left:3px;

display:block;

height:10px;

width:100%;

margin:0;

padding:0;

}

/style

script

var timeId;

function show(){

clearInterval(timeId);

var node = document.getElementById("area");

var tempHeight = node.offsetHeight;

if(document.getElementById("eflag").innerText == "+"){

document.getElementById("eflag").innerText = "-"

document.getElementById("msg").innerHTML = "font color='blue'點擊收縮/font"

timeId = setInterval(function(){

tempHeight += 1;

node.style.height = tempHeight;

if(tempHeight 150){

clearInterval(timeId);

}

},30);

}else{

document.getElementById("eflag").innerText = "+"

document.getElementById("msg").innerHTML = "font color='red'點擊展開/font"

timeId = setInterval(function(){

tempHeight -= 1;

node.style.height = tempHeight;

if(tempHeight = 15){

clearInterval(timeId);

}

},30);

}

}

/script

/head

body

div id="area" onClick="show()"

span id="title"span id="eflag"+/span??????span id="msg" style="color:red"點擊展開/span/span

div id="content"

測試測試測試測試測試測試測試測試測試測試br

測試測試測試測試測試測試測試測試測試測試br

測試測試測試測試測試測試測試測試測試測試br

測試測試測試測試測試測試測試測試測試測試br

測試測試測試測試測試測試測試測試測試測試br

測試測試測試測試測試測試測試測試測試測試br

測試測試測試測試測試測試測試測試測試測試br

/div

/div

/body

/html