JavaScript Tutorial/HTML Tags/td

Материал из Web эксперт
Перейти к: навигация, поиск

Change Table cell background color (IE)

<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
<!--
function chgColor()
{
    var thistag, parentTag;
    thistag = window.event.srcElement.tagName;
    if (thistag == "TD")
    {
        document.all(window.event.srcElement.sourceIndex).bgColor = "lemonchiffon"
    }
}
function chgBack()
{
    var thistag, parentTag;
    thistag = window.event.srcElement.tagName;
    if (thistag == "TD")
    {
        document.all(window.event.srcElement.sourceIndex).bgColor = ""
    }
}
//  -->
</script>
</head>
<body onMouseover="chgColor()" onMouseout="chgBack()">
<table border="1" width="28%">
<tr>
<td width="25%">&nbsp;</td>
<td width="25%">&nbsp;</td>
<td width="25%">&nbsp;</td>
<td width="25%">&nbsp;</td>
</tr>
<tr>
<td width="25%">&nbsp;</td>
<td width="25%">&nbsp;</td>
<td width="25%">&nbsp;</td>
<td width="25%">&nbsp;</td>
</tr>
<tr>
<td width="25%">&nbsp;</td>
<td width="25%">&nbsp;</td>
<td width="25%">&nbsp;</td>
<td width="25%">&nbsp;</td>
</tr>
</table>
</body>
</html>


Set and clear table cell content

<html>
<head>
<style type="text/css">
td.menu {font-family:Arial;
        font-weight:bold;
        background-color:blue;
        cursor:hand}
a{
    text-decoration:none;
    color:black;
}
</style>
<script language="javascript" type = "text/javascript">
<!--
function selectlink(currentDell,linkdesc){
    currentDell.style.background="yellow";
    if (document.getElementById)
      document.getElementById("selectdesc").innerHTML=linkdesc;
    else
      selectdesc.innerHTML=html;
}
function leavelink(currentDell){
    currentDell.style.background="blue";
    if (document.getElementById)
      document.getElementById("selectdesc").innerHTML="&nbsp;";
    else
      selectdesc.innerHTML="&nbsp;";
}
//-->
</script>
</head>
<body>
<table width=200>
<tr>
    <td class="menu" bordercolor="black"
        id="choice1"
        onmouseover="selectlink(this,"AAA")"
        onmouseout="leavelink(this)"">
           <a href="http://www.wbex.ru">AAA</a>
    </td>
</tr>
<tr>
    <td class="menu" bordercolor="black"
        id="choice2"
        onmouseover="selectlink(this,"BBB")"
        onmouseout="leavelink(this)">
           <a href="http://www.wbex.ru">BBB</a>
    </td>
</tr>
<tr>
    <td class="menu" bordercolor="black"
        id="choice3"
        onmouseover="selectlink(this,"CCC")"
        onmouseout="leavelink(this)">
           <a href="http://www.wbex.org/">CCC</a>
    </td>
</tr>
    <td class="menu" bordercolor="black"
        id="choice4"
        onmouseover="selectlink(this,"DDD")"
        onmouseout="leavelink(this)">
           <a href="http://www.wbex.ru">DDD</a>
    </td>
</tr>
<tr>
    <td bordercolor="black" bgcolor="white" height="18">
      <font id="selectdesc" size="2"></font>
    </td>
</tr>
</table>
</body>
</html>


Table cell onmouseout action event

<html>
<head>
<style type="text/css">
td.menu {font-family:Arial;
        font-weight:bold;
        background-color:blue;
        cursor:hand
}
a{
    text-decoration:none;
    color:black;
}
</style>
<script language="javascript" type = "text/javascript">
<!--
function selectlink(currentDell,linkdesc){
    currentDell.style.background="yellow";
    if (document.getElementById)
      document.getElementById("selectdesc").innerHTML=linkdesc;
    else
      selectdesc.innerHTML=html;
}
function leavelink(currentDell){
    currentDell.style.background="blue";
    if (document.getElementById)
      document.getElementById("selectdesc").innerHTML="&nbsp;";
    else
      selectdesc.innerHTML="&nbsp;";
}
//-->
</script>
</head>
<body>
<table width=200>
<tr>
    <td class="menu" bordercolor="black"
        id="choice1"
        onmouseover="selectlink(this,"AAA")"
        onmouseout="leavelink(this)"">
           <a href="http://www.wbex.ru">AAA</a>
    </td>
</tr>
<tr>
    <td class="menu" bordercolor="black"
        id="choice2"
        onmouseover="selectlink(this,"BBB")"
        onmouseout="leavelink(this)">
           <a href="http://www.wbex.ru">BBB</a>
    </td>
</tr>
<tr>
    <td class="menu" bordercolor="black"
        id="choice3"
        onmouseover="selectlink(this,"CCC")"
        onmouseout="leavelink(this)">
           <a href="http://www.wbex.org/">CCC</a>
    </td>
</tr>
    <td class="menu" bordercolor="black"
        id="choice4"
        onmouseover="selectlink(this,"DDD")"
        onmouseout="leavelink(this)">
           <a href="http://www.wbex.ru">DDD</a>
    </td>
</tr>
<tr>
    <td bordercolor="black" bgcolor="white" height="18">
      <font id="selectdesc" size="2"></font>
    </td>
</tr>
</table>
</body>
</html>


Table cell onmouseover action event

<html>
<head>
<style type="text/css">
td.menu {font-family:Arial;
        font-weight:bold;
        background-color:blue;
        cursor:hand}
a{
    text-decoration:none;
    color:black;
}
</style>
<script language="javascript" type = "text/javascript">
<!--
function selectlink(currentDell,linkdesc){
    currentDell.style.background="yellow";
    if (document.getElementById)
      document.getElementById("selectdesc").innerHTML=linkdesc;
    else
      selectdesc.innerHTML=html;
}
function leavelink(currentDell){
    currentDell.style.background="blue";
    if (document.getElementById)
      document.getElementById("selectdesc").innerHTML="&nbsp;";
    else
      selectdesc.innerHTML="&nbsp;";
}
//-->
</script>
</head>
<body>
<table width=200>
<tr>
    <td class="menu" bordercolor="black"
        id="choice1"
        onmouseover="selectlink(this,"AAA")"
        onmouseout="leavelink(this)"">
           <a href="http://www.wbex.ru">AAA</a>
    </td>
</tr>
<tr>
    <td class="menu" bordercolor="black"
        id="choice2"
        onmouseover="selectlink(this,"BBB")"
        onmouseout="leavelink(this)">
           <a href="http://www.wbex.ru">BBB</a>
    </td>
</tr>
<tr>
    <td class="menu" bordercolor="black"
        id="choice3"
        onmouseover="selectlink(this,"CCC")"
        onmouseout="leavelink(this)">
           <a href="http://www.wbex.org/">CCC</a>
    </td>
</tr>
    <td class="menu" bordercolor="black"
        id="choice4"
        onmouseover="selectlink(this,"DDD")"
        onmouseout="leavelink(this)">
           <a href="http://www.wbex.ru">DDD</a>
    </td>
</tr>
<tr>
    <td bordercolor="black" bgcolor="white" height="18">
      <font id="selectdesc" size="2"></font>
    </td>
</tr>
</table>
</body>
</html>