如何在JavaScript中創建表格？

Question

我的問題是我有一天在創建一個簡單的網站，我需要內容按照按鈕按下。

我設法在CSS3中這樣做，但該解決方案無法用於IE。因此，我想問問在js中是否有簡單的解決方案？我根本不認識js，但是我聽說我需要的東西在js中比在css中容易得多。

詳細說明：

http://i42.tinypic.com/6yl4ia.png

我所需要的表中的圖片根據按鈕（其是標籤是精確的）移動。

可見區域是一個div。

下面是相關的代碼（沒有動畫，因爲我是不滿意的話）：

body { 
background-color: #fff; 
color: #fff; 
padding:0px; 
} 


#bodywrapperfixed { 
width: 1248px; 
margin: 0px auto; 
position: relative; 
overflow: hidden; 
height: 730px; 
} 


#bodywrapper { 
display:block; 
background-color: #fff; 
width: 1248px; 
color: #59595B; 
padding-top:50px; 
font-family: 'Roboto', sans-serif; 
position: absolute; 
top:0px; 
left:0px; 
z-index:1; 
font-size: 60px; 
height:730px; 
} 

#bodywrapper img { 
width:400px; 
padding:15px 0px 20px 0px; 
} 

#texten { 
font-family: 'Roboto', sans-serif; 
font-size: 35px; 
padding:5px; 
} 

#textpl { 
font-family: 'Roboto', sans-serif; 
font-size: 25px; 
padding:5px; 
} 



table#linki { 
width: 110px; 
border: none; 
margin-top:15px; 
} 





label { 
    display: block; 
    height: 54px; 
    width: 54px; 
    color:#fff; 
    font-family: 'Roboto', sans-serif; 
    font-weight: 300; 
    font-size: 35px; 
    background-color: #117D10; 
    text-align: center; 
    padding:23px; 

} 

label:hover { 
    background-color: #004F00; 
    cursor: pointer; 
} 

input#pl { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 

input#en { 
    position: absolute; 
    top: -9999px; 
    left: -9999px; 
} 

及相關HTML：

<div id="bodywrapperfixed"> 
<div id="bodywrapperfloat"> 
<table id="ramka"> 
    <tr> 
      <td>random text</td> 
      <td><div id="bodywrapper"> 
<center> 
<div id="texten"><div style="font-weight:300; display:inline-block;">Introducing the all-in-one entertainment system.</div><div style="font-weight:500; display:inline-block;">&nbsp;For everyone.</div></div> 


<div id="textpl"><div style="font-weight:300; display:inline-block;">Przedstawiamy zintegrowany system rozrywki.</div><div style="font-weight:500; display:inline-block;">&nbsp;&nbsp;Dla wszystkich.</div></div> 


<img src="imgs/xboxone.png"> 


<div id="texten"><div style="font-weight:300; display:inline-block;">Choose your version of the story:</div></div> 


<div id="textpl"><div style="font-weight:300; display:inline-block;">Wybierz swoją wersją opowieści:</div></div> 




<table id="linki"> 
<tr> 
<td><label for="en">en</label><input id="en" type="checkbox"></td> 
<td><label for="pl">pl</label><input id="pl" type="checkbox"></td> 
</tr></table> 
</center> 
</div></td> 
      <td>random text</td> 
    </tr> 
</table> 
</div> 
</div> 

這裏是什麼樣子：

http://ingame.lh.pl/thinkone/

請幫幫我。

Answer 1

CSS3轉換在IE9及其以下版本中不起作用，因爲它們只是don't support it。如果您需要進行轉換等，則可用的衆多選項之一是jQuery。

jQuery是一個JavaScript庫，它簡化了您對JavaScript的使用，並使DOM操作（如變換和動畫）變得更簡單。他們在他們的網站上有很多很棒的演示，可以幫助你開始。我建議看看他們自己的JavaScript 101這將幫助您開始使用JavaScript本身的基礎知識（無需jQuery），然後引導您使用jQuery更輕鬆地完成工作。您可能想要看看他們的events tutorial（附加點擊元素等），css styling tutorial（CSS'Getting，Setting and Manipulations'）。您可能想看看他們的events tutorial（附加點擊元素等），css styling tutorial（CSS'Getting，Setting and Manipulations'）。和effects tutorial（對元素附加效果）。

我希望這有助於您開始使用JavaScript和jQuery。請注意，還有很多其他的圖書館，但是這是您能夠在任何地方看到最多的圖書館。

Answer 2

希望這helps..The代碼包含表和按鈕，你在圖片 http://jsfiddle.net/ramanbedi/vDdJL/ 這裏描繪的js代碼：

$(function(){ 
    $(".left-button").on('click',function(e){ 
     e.preventDefault(); 
     $(".table").animate({left:'-=10'},500); 
    }) 
    $(".right-button").on('click',function(e){ 
     e.preventDefault(); 
     $(".table").animate({left:'+=10'},500); 
    }) 
}) 

我已經使用jQuery庫和理由在評論中提到。