Динамична таблица

Добре заварили! Опитвам се да намеря скрипт, с който при клик върху дедено img се променя размера на таблицата, в която е разположено.

[линк]

и по-точно този пример с Table Object:

[линк]

Не е точно същото, но би трябвало да ти подскаже как да си го направиш.


[линк]

Ха благодаря ти dimodi, сполай и със здраве.

Разгледах различни възможности и за сега се спрях на вариант, променящ размерите на дадена клетка. Един от основните проблеми е невъзможноста, да го накарам да работи добре, в Opera (в никоя версия от 5, до 8), както и във Netscape 4.78. За момента в по-горе посочените браузери, срещам трудности, но ако някой има опит (в който и да е браузер, и която и да е версия, нека да сподели). Ако някой знае подходящо решение, нека сподели.

Ето и пример:

<html>
<head>
<title>Proba</title>
<script language="Javascript">
function bigi() {
if (navigator.userAgent.indexOf("Opera") != -1) { //Opera
//var cell = document.getElementById('aCell').style;
var cell = document.all.aCell;
cell.width = "200";
}

else if (document.all) {
var cell = document.all.aCell;
cell.width = "200";
}

else if (document.getElementById) {
var cell = document.getElementById('aCell');
cell.width = "200";
}

else if (document.layers) { //checks for Netscape 4
var cell = document.all.aCell;
cell.width = "200";
}

}

function mini() {
if (navigator.userAgent.indexOf("Opera") != -1) { //Opera
var cell = document.getElementById('aCell').style;
cell.width = "20";
}

else if (document.all) {
var cell = document.all.aCell;
cell.width = "20";
}

else if (document.getElementById) {
var cell = document.getElementById('aCell');
cell.width = "20";
}

else if (document.layers) { //checks for Netscape 4
var cell = document.all.aCell;
cell.width = "20";
}

}
</script>
</head>
<body bgcolor="#FFFFFF">
<table border="1" width="100%" height="100%">
<tr>
<td width="200" id="aCell" bgcolor="#E9F6E6"></td>
<td align="center">
<p><a href="#" onClick="mini()"> Mini </a><br />
Proverka<br />
Proverka<br />
Proverka<br />
Proverka<br />
Proverka<br />
Proverka<br />
</p>
<p><a href="#" onClick="bigi()"> Bigi </a><br />
Proverka<br />
Proverka<br />
Proverka<br />
Proverka<br />
Proverka<br />
Proverka<br />
</p>
</td>
<td width="200" bgcolor="#E9F6E6"></td>
</tr>
</table>
</body>
</html>

Скрипта го използвах за други работи и работише под всякакви browser-и но сега като промених тук-там незнам... трябва да си го провериш ти, тъй като нямам инсталирани цялата колекция от browser-и за да го проверя. Надявам се да ти свърши работа.

<html>
<head>
<title></title>
</head>
<body>
<script language="javascript" type="text/javascript">
function big()
{
if(document.layers)document.layers["tbltd"].cellSpacing="15";
else if(navigator.appVersion.indexOf("MSIE 4")>-1)document.all["tbltd"].cellSpacing="15";
else document.getElementById("tbltd").cellSpacing="15";
}
function small()
{
if(document.layers)document.layers["tbltd"].cellPadding="15";
else if(navigator.appVersion.indexOf("MSIE 4")>-1)document.all["tbltd"].cellPadding="15";
else document.getElementById("tbltd").cellPadding="15";
}
function big2()
{
if(document.layers)document.layers["tbltd"].cellSpacing="1";
else if(navigator.appVersion.indexOf("MSIE 4")>-1)document.all["tbltd"].cellSpacing="1";
else document.getElementById("tbltd").cellSpacing="1";
}
function small2()
{
if(document.layers)document.layers["tbltd"].cellPadding="1";
else if(navigator.appVersion.indexOf("MSIE 4")>-1)document.all["tbltd"].cellPadding="1";
else document.getElementById("tbltd").cellPadding="1";
}
</script>
<table id="tbltd" border="1">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
<form>
<input type="button" onclick="big()" value="Change Cellpadding +">
<input type="button" onclick="small()" value="Change Cellspacing +">
<input type="button" onclick="big2()" value="Change Cellpadding - ">
<input type="button" onclick="small2()" value="Change Cellspacing - ">
</form>
</body>
</html>

Благодаря ти за скрипта. Навярно по-този начин ще се опитам да разреша проблема, но го пазя, като последна възможност, защото незнам дали всеки browser показва по различен начин cellpadding-а. Казвам cellpadding, защото в някои версии cellspacing-а не сработва. Ето и тестът в следните Browsers и версии.

Opera

работи в 7.54, 7.23
не работи в 5.02, 6.06

-------------------------------------

FireFox

работи в: version 1.0 Preview Release, Mozilla/5.0 (Windows; U; Windows NT 5.1; rv:1.7.3) Gecko/20040913 Firefox/0.10
-------------------------------------


Mozila
работи в: Mozilla 1.7.7, Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.7) Gecko/20050414
-------------------------------------


Netscape:

не работи в : Netscape Communicator 4.78

cellpadding-а работи, но cellspacing-а не: Netscape 6, Mozilla/5.0 (Windows; U; Windows NT 5.0; en-GB; m18) Gecko/20010131 Netscape6/6.01

по същия начин и в: Netscape 6.2, Mozilla/5.0 (Windows; U; Windows NT 5.1; en-GB; rv:0.9.4) Gecko/20011019 Netscape6/6.2


работи в: Netscape 8.0 beta, 0.9.6 - based on Firefox 1.0 Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.5) Gecko/20050308 Firefox/0.9.6


--------------------------------
забележка: тестът е правен на XP Home Edition, въпреки, че изписва Windows NT





Konqueror KDE 3.1.4 (Slackware 9.1)

работи само cellpadding-а
--------------------------------

работи в : Opera 8.0 (Slackware 9.1)

---------------------------------
работи в : Netscape 7.1 (Slackware 9.1)



Опитах се да намеря, по-просто решение, с което да накарам Операта, поне в по-новите версии да заработи. В по-новите версии Операта поддържа getElementById, но има проблем със задаването на width за дадената клетка.

забележка: при <td id="aCell" width="100"> не може дори да вземе размера ма клетката. За да взема стоиноста трябва в td да задам width, чрез style, което само усложнява нещата.


В момента се опитвам, чрез insertCell и deleteCell, но тук се сблъсквам с друг проблем. При премахване на дадена клетка, клетките (след изтритата) вземат размерите на предишната клетка и накрая остава празно пространство, най-добре вижте примера под Опера:

<html>
<head>
<title>Proba</title>
<script language="Javascript">
function bigi() {


if (navigator.userAgent.indexOf("Opera") != -1) {
var x=document.getElementById('table_opr').rows[0]
var y=x.insertCell(1)
y.innerHTML="NEW CELL"
}

else if (document.all) {
var cell = document.all.aCell;
cell.width = "200";
}

else if (document.getElementById) {
var cell = document.getElementById('aCell');
cell.width = "200";
}

else if (document.layers) { //checks for Netscape 4
var cell = document.all.aCell;
cell.width = "200";
}

}

function mini() {
if (navigator.userAgent.indexOf("Opera") != -1) {
var x=document.getElementById('table_opr').rows[0]
x.deleteCell(1)

}

else if (document.all) {
var cell = document.all.aCell;
cell.width = "1";
}

else if (document.getElementById) {
var cell = document.getElementById('aCell');
cell.width = "1";
}

else if (document.layers) { //checks for Netscape 4
var cell = document.all.aCell;
cell.width = "1";
}

}
</script>
</head>
<body bgcolor="#FFFFFF">
<table border="1" width="100%" height="100%" id="table_opr">
<tr>
<td width="19" bgcolor="#E9F6E6"></td>
<td width="191" id="aCell" bgcolor="#E9F6E6"></td>
<td align="center">
<p><a href="#" onClick="mini()"> Mini </a><br />
Proverka<br />
Proverka<br />
Proverka<br />
Proverka<br />
Proverka<br />
Proverka<br />
</p>
<p><a href="#" onClick="bigi()"> Bigi </a><br />
Proverka<br />
Proverka<br />
Proverka<br />
Proverka<br />
Proverka<br />
Proverka<br />
</p>
</td>
<td width="200" bgcolor="#E9F6E6"></td>
</tr>
</table>
</body>
</html>

В Операта не работи, както очаквах, някой знае ли, как мога да го натъкмя, за да проработи или пък има по рационални решения.

Не казвай само че заради тази таблица си правил всичко това??? А и да те питам нещо! За какво точно ти трябва да си се разширява таблицата??? Защо не промениш размера на картинката вътре??? Много по-лесно и бързо!!!

Windows NT 5.1 = windows XP
Windows NT 5.0 = windows 2000