Списки и таблица
привет js изучаю недавно, нашел уроки в сети и пробывал сделать задания по примеру ну невсегда получается.
<HTML> <HEAD>
<SCRIPT>
function fu (obj,m)
{ document.getElementById("itab").bgColor=((obj.elements[5])[m]).text; }
function ColorC(obj,m)
{ document.getElementById("itab1").bgColor=((obj.elements[5])[m]).text;
document.getElementById("itab2").bgColor=((obj.elements[5])[m]).text;
document.getElementById("itab3").bgColor=((obj.elements[5])[m]).text;
document.getElementById("itab4").bgColor=((obj.elements[5])[m]).text;
}
</SCRIPT>
</HEAD> <BODY> <FORM name= form1 > <SELECT id="tab" onСhange=fu (form1,form1.tab.value)> <OPTION selected value=0>red <OPTION value=1>green <OPTION value=2>blue <OPTION value=3>yellow </OPTION></SELECT> <SELECT id="cell" onСhange=ColorC(form1.form1.cell.value) ; <option value=0>red <OPTION value=1>green <OPTION value=2>blue <OPTION value=3>yellow </OPTION> </SELECT> <TABLE id= "itab" border=1 cellSpacing=10 cellPadding=20 bgColor=green align=center> <TR> <TD id= "itab1" bgColor=white>аааа <TD id= "itab2" bgColor=red>bbb <TR> <TD id= "itab3" bgColor=yellow>ииии <TD id= "itab4" bgColor=orange>rrrrr </TD> </TD> </TD> </TD> </TR> </TR> </TABLE> </FORM> </BODY> </HTML> Здесь два списка с помощью которых выбирается что перакраситиЮ таблицу или ячейки. Проверял код с помощью инструментов в IE8.0 ругался на сCell и Tabl - не может получить значение либо Null. Может я что-то не так делаю?:help: |
Оформите код http://javascript.ru/formatting
PS: дурацкие уроки, maxmaxmaximus наверное способен посоветовать более дельные :) |
не вникал, что там должно меняться, для примера меняю фон таблицы и фон первой ячейки этой таблицы
<form>
<select>
<option>red</option>
<option>green</option>
<option>blue</option>
<option>yellow</option>
</select>
<select>
<option>red</option>
<option>green</option>
<option>blue</option>
<option>yellow</option>
</select>
<table style="background: yellow; border: solid 1px">
<tr>
<td style="background: red">ааа
<td style="background: yellow">bbb
</tr>
<tr>
<td style="background: green">ccc
<td style="background: blue">ddd
</tr>
</table>
</form>
<script>
window.onload = function () {
document.forms[0].onchange = function (e) {
e = e || event;
var target = e.target || e.srcElement;
if (target.tagName == 'SELECT') {
if (target == this.children[0]) {
var elem = this.children[2];
} else
if (target == this.children[1]) {
var elem = this.children[2].rows[0].cells[0];
}
elem.style.background = target.value;
}
}
}
</script>
|
wakafaka,
<HTML>
<HEAD>
<SCRIPT>
function fu (color) {
document.getElementById("itab").bgColor=color[color.selectedIndex].text;
}
function ColorC(color) {
document.getElementById("itab1").bgColor=color[color.selectedIndex].text;
document.getElementById("itab2").bgColor=color[color.selectedIndex].text;
document.getElementById("itab3").bgColor=color[color.selectedIndex].text;
document.getElementById("itab4").bgColor=color[color.selectedIndex].text;
}
</SCRIPT>
</HEAD>
<BODY>
<FORM name="form1">
<SELECT id="tab" onChange="fu(this)">
<OPTION selected value=0>red
<OPTION value=1>green
<OPTION value=2>blue
<OPTION value=3>yellow
</OPTION></SELECT>
<SELECT id="cell" onChange="ColorC(this);">
<option value=0>red
<OPTION value=1>green
<OPTION value=2>blue
<OPTION value=3>yellow
</OPTION>
</SELECT>
<TABLE id= "itab" border=1 cellSpacing=10 cellPadding=20 bgColor=green align=center>
<TR>
<TD id= "itab1" bgColor=white>аааа
<TD id= "itab2" bgColor=red>bbb
<TR>
<TD id= "itab3" bgColor=yellow>ииии
<TD id= "itab4" bgColor=orange>rrrrr </TD>
</TD>
</TD>
</TD>
</TR>
</TR>
</TABLE>
</FORM>
</BODY>
</HTML>
|
спасибо , приеду домой по пробую разобраться,не много запуьанным кажется, ну и некоторых свойств не знаю
|
Ваш метод мне пока боее понятен.Всем спасибо!
|
| Часовой пояс GMT +3, время: 20:27. |