Java проблем за показване на колони

E

erik_1001

Registered
Здравейте. Предварително благодаря на хората, които биха ми се отзовали на зова за помощ.
По принцип не разбирам почти никак на Javascript, но днес ми се наложи едва-едва да пристъпя в дебрите му.
Мисията ми е следната - имам таблица от да речем 4 колони, както и 4 бутона. В нормално положение на страницата се показват 4те колони, а при натискане на бутон1 изчезва колона1 до повторното му натискане. Така например си излизат колона1, колона2, колона3, колона4 - натискаме бутон1 и бутон3 и на екрана остават само колона2 и колона4. Ако пак натиснем бутон1 на екрана ще се показват колона1, колона2 и колона4. Надявам се се разбира какво искам да постигна.
След известно тършуване открих начин чрез джаваскрипт всяка колона си има отделно id и бутоните чрез него изключват съответната колона. Ето това открих и работи:

<script type="text/javascript">
//<![CDATA[
function showTd(class) {

if(document.getElementById(id).style.visibility=="visible") {
document.getElementById(id).style.visibility="hidden";
}
else {
document.getElementById(id).style.visibility="visible";
}
}
//]]>
</script>


<body>
<div id="butts">
<button onclick="showTd('one')">option 1</button>
<button onclick="showTd('two')">option 2</button>
<button onclick="showTd('three')">option 3</button>
<button onclick="showTd('four')">option 4</button>
</div>

<div id="tbl"><table><tr>
<td id="one">left</td>
<td id="two">center left</td>
<td id="three">center right</td>
<td id="four">right</td>
</tr></table></div>
</body>

Всичко е прекрасно и работи, до момента в който на мен ще ми трябва да изчезне цялата колона, а не само една клетка (както е в случая щом използваме id).
Заради това смятам всяка клетка принадлежаща към колона1 да бъде class="one". Това обаче означава че трябва да се промени и джаваскрипта. Аз направих следното, което не проработи:

<script type="text/javascript">
//<![CDATA[
function showTd(class) {

if(document.getElementsByClassName(class).style.visibility=="visible") {
document.getElementsByClassName(class).style.visibility="hidden";
}
else {
document.getElementsByClassName(class).style.visibility="visible";
}
}
//]]>
</script>

<body>
<div id="butts">
<button onclick="showTd('one')">option 1</button>
<button onclick="showTd('two')">option 2</button>
<button onclick="showTd('three')">option 3</button>
<button onclick="showTd('four')">option 4</button>
</div>

<div id="tbl"><table><tr>
<td class="one">left</td>
<td class="two">center left</td>
<td class="three">center right</td>
<td class="four">right</td>
</tr></table></div>
</body>

Някакви алтернативи или поне изясняване къде точно бъркам? (умишлено съм изтървал част от скрипта на CSS и HTML)
Отново благодаря предварително на всеки отзовал се.
 
Вярвам че това ще ти свърши работа :

ДЕМО ВЕРСИЯ






Код: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
     <head>
          <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
          <title>КОЛОНИ</title>
          <style>
               *{
                    margin:0px;
                    padding:0px;
               }
               #konteiner{
                    width:1024px;
                    min-height:768px;
                    height:auto;
                    border:2px green solid;
                    margin:5px;
               }
               #k1{
                    width:242px;
                    min-height:10px;
                    height:auto;
                    border:2px green solid;
                    margin:5px;
                    float:left;
               }
               .k1{
                    
               }
               #k2{
                    width:242px;
                    min-height:10px;
                    height:auto;
                    height:auto;
                    border:2px green solid;
                    margin:5px;
                    float:left;
               }
               #k3{
                    width:242px;
                    min-height:10px;
                    height:auto;
                    height:auto;
                    border:2px green solid;
                    margin:5px;
                    float:left;
               }
               #k4{
                    width:242px;
                    min-height:10px;
                    height:auto;
                    height:auto;
                    border:2px green solid;
                    margin:5px;
                    float:left;
               }
               #forma{
                    width:1024px;
                    min-height:50px;
                    height:auto;
                    border:2px green solid;
                    margin:3px;
               }
               #b1{
                    width:242px;
                    min-height:10px;
                    height:auto;
                    height:auto;
                    border:2px green solid;
                    margin:5px;
                    float:left;
               }
               #b2{
                    width:242px;
                    min-height:10px;
                    height:auto;
                    height:auto;
                    border:2px green solid;
                    margin:5px;
                    float:left;
               }
               #b3{
                    width:242px;
                    min-height:10px;
                    height:auto;
                    height:auto;
                    border:2px green solid;
                    margin:5px;
                    float:left;
               }
               #b4{
                    width:242px;
                    min-height:10px;
                    height:auto;
                    height:auto;
                    border:2px green solid;
                    margin:5px;
                    float:left;
               }
          </style>
          <script type="text/javascript" src="jquery-1.4.4.js"></script>
          <script type="text/javascript">
               function pokazvane1(){
                    $(".k1").toggle(6000); //Тука може да смениш 6000 със "slow" , "fast"
               }
               function pokazvane2(){
                    $(".k2").toggle(6000); //Тука може да смениш 6000 със "slow" , "fast"
               }
               function pokazvane3(){
                    $(".k3").toggle(6000); //Тука може да смениш 6000 със "slow" , "fast"
               }
               function pokazvane4(){
                    $(".k4").toggle(6000); //Тука може да смениш 6000 със "slow" , "fast"
               }
          </script>
     </head>
     <body>
          <center>
               <div id="konteiner">
                    <div id="k1">
                         <h2>Колона лява</h2>
                         <p class="k1">Текст 1</p>
                         <p class="k1">Текст 2</p>
                         <p class="k1">Текст 3</p>
                         <p class="k1">Текст 4</p>
                         <p class="k1">Текст 5</p>
                         <p class="k1">Текст 6</p>
                         <p class="k1">Текст 1</p>
                         <p class="k1">Текст 2</p>
                         <p class="k1">Текст 3</p>
                         <p class="k1">Текст 4</p>
                         <p class="k1">Текст 5</p>
                         <p class="k1">Текст 6</p>
                         <p class="k1">Текст 1</p>
                         <p class="k1">Текст 2</p>
                         <p class="k1">Текст 3</p>
                         <p class="k1">Текст 4</p>
                         <p class="k1">Текст 5</p>
                         <p class="k1">Текст 6</p>
                         <p class="k1">Текст 1</p>
                         <p class="k1">Текст 2</p>
                         <p class="k1">Текст 3</p>
                         <p class="k1">Текст 4</p>
                         <p class="k1">Текст 5</p>
                         <p class="k1">Текст 6</p>
                    </div>

                    <div id="k2">
                         <h2>Колона център ляво</h2>
                         <p class="k2">Текст 1</p>
                         <p class="k2">Текст 2</p>
                         <p class="k2">Текст 3</p>
                         <p class="k2">Текст 4</p>
                         <p class="k2">Текст 5</p>
                         <p class="k2">Текст 6</p>
                         <p class="k2">Текст 1</p>
                         <p class="k2">Текст 2</p>
                         <p class="k2">Текст 3</p>
                         <p class="k2">Текст 4</p>
                         <p class="k2">Текст 5</p>
                         <p class="k2">Текст 6</p>
                         <p class="k2">Текст 1</p>
                         <p class="k2">Текст 2</p>
                         <p class="k2">Текст 3</p>
                         <p class="k2">Текст 4</p>
                         <p class="k2">Текст 5</p>
                         <p class="k2">Текст 6</p>
                         <p class="k2">Текст 1</p>
                         <p class="k2">Текст 2</p>
                         <p class="k2">Текст 3</p>
                         <p class="k2">Текст 4</p>
                         <p class="k2">Текст 5</p>
                         <p class="k2">Текст 6</p>
                    </div>

                    <div id="k3">
                         <h2>Колона център дясно</h2>
                         <p class="k3">Текст 1</p>
                         <p class="k3">Текст 2</p>
                         <p class="k3">Текст 3</p>
                         <p class="k3">Текст 4</p>
                         <p class="k3">Текст 5</p>
                         <p class="k3">Текст 6</p>
                         <p class="k3">Текст 1</p>
                         <p class="k3">Текст 2</p>
                         <p class="k3">Текст 3</p>
                         <p class="k3">Текст 4</p>
                         <p class="k3">Текст 5</p>
                         <p class="k3">Текст 6</p>
                         <p class="k3">Текст 1</p>
                         <p class="k3">Текст 2</p>
                         <p class="k3">Текст 3</p>
                         <p class="k3">Текст 4</p>
                         <p class="k3">Текст 5</p>
                         <p class="k3">Текст 6</p>
                         <p class="k3">Текст 1</p>
                         <p class="k3">Текст 2</p>
                         <p class="k3">Текст 3</p>
                         <p class="k3">Текст 4</p>
                         <p class="k3">Текст 5</p>
                         <p class="k3">Текст 6</p>
                    </div>

                    <div id="k4">
                         <h2>Колона дясна</h2>
                         <p class="k4">Текст 1</p>
                         <p class="k4">Текст 2</p>
                         <p class="k4">Текст 3</p>
                         <p class="k4">Текст 4</p>
                         <p class="k4">Текст 5</p>
                         <p class="k4">Текст 6</p>
                         <p class="k4">Текст 1</p>
                         <p class="k4">Текст 2</p>
                         <p class="k4">Текст 3</p>
                         <p class="k4">Текст 4</p>
                         <p class="k4">Текст 5</p>
                         <p class="k4">Текст 6</p>
                         <p class="k4">Текст 1</p>
                         <p class="k4">Текст 2</p>
                         <p class="k4">Текст 3</p>
                         <p class="k4">Текст 4</p>
                         <p class="k4">Текст 5</p>
                         <p class="k4">Текст 6</p>
                         <p class="k4">Текст 1</p>
                         <p class="k4">Текст 2</p>
                         <p class="k4">Текст 3</p>
                         <p class="k4">Текст 4</p>
                         <p class="k4">Текст 5</p>
                         <p class="k4">Текст 6</p>
                    </div>
               </div>
               <div id="forma">
                    <form name="butoni" method="POST" enctype="multipart/form-data">
                         <div id="b1">
                              <input id="bb1" type="button" value="БУТОН 1" name="sub" onclick="pokazvane1()"/>
                         </div>

                         <div id="b2">
                              <input id="bb1" type="button" value="БУТОН 2" name="sub" onclick="pokazvane2()"/>
                         </div>

                         <div id="b3">
                              <input id="bb1" type="button" value="БУТОН 3" name="sub" onclick="pokazvane3()"/>
                         </div>

                         <div id="b4">
                              <input id="bb1" type="button" value="БУТОН 4" name="sub" onclick="pokazvane4()"/>
                         </div>
                    </form>
               </div>
          </center>
     </body>
</html>
 
Благодаря за отговорите. Изглежда много добре,, но за жалост не ми върши работа. Причината е че аз искам изцяло да се скрива колоната, включително заглавния ред, именно заради това поставям бутони, иначе можеше в твоя случай директно да се клика върху заглавния ред и да излиза всичкото. Не схващам къде точно бъркам тук:
<script type="text/javascript">
function showTd(class) {
if (document.getElementsByClassName('class').style.visibility=="visible"))
{document.getElementsByClassName('class').style.visibility="hidden";}
else { document.getElementsByClassName('class').style.visibility="visible"; }
}</script>

<div id="butts">
<button onclick="showTd(one)">option 1</button>
<button onclick="showTd(two)">option 2</button>
<button onclick="showTd(three)">option 3</button>
<button onclick="showTd(four)">option 4</button>
</div>
<table><tr>
<td class="one">left</td>
<td class="two">center left</td>
<td class="three">center right</td>
<td class="four">right</td>
</tr>
Ако никой не отговори, точката отива в светл1бг - сигурен съм че би свършило работа на някого.

ПП
Сега се сетих че мога да използвам това което бях намерил чрез ID-то, но имам проблем, че не ще да ми разчете:
<colgroup id="one" span="1"></colgroup>
<colgroup id="two" span="1"></colgroup>
<colgroup id="three" span="1"></colgroup>
<colgroup id="four" span="1"></colgroup>
Какво не му е наред пък сега?!?!
 
Благодаря на всички включили се, аз все пак намерих това което ми трябваше:
http://www.fiendish.demon.co.uk/html/javascript/hidetablecols.html
Сега обаче се чудя само едно.
Възможно ли е да имам клетка която обхваща три колони например с име например cell1 и отдолу трите отделни колони да съдържат клетки cell11, cell12, cell13, като целта ми е когато реша да изчезне cell1 да изчезнат и cell11, cell12 и cell13.
Предполагам би било възможно да се използва getElementsByName(cell1+"\всякаква друга стойност\") или нещо от рода. Пробвах в кавичките да сложа *-чка, но определено не помага. Някакви идеи?
 
Трябва да си влезнал или регистриран, за да отговориш тук.

Back
Горе