Javascript 带onclick的表_Javascript_Html_Css

Javascript 带onclick的表

javascript html css

Javascript 带onclick的表,javascript,html,css,Javascript,Html,Css,我正在尝试为我的表执行onclick函数，但它不起作用，我不知道为什么武器和防御应该像按钮一样工作以更改表格内容，但它不起作用：/ 武器和防御的内容一起显示你们能帮我一把吗？谢谢这是我的全部代码： html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <lin

我正在尝试为我的表执行onclick函数，但它不起作用，我不知道为什么武器和防御应该像按钮一样工作以更改表格内容，但它不起作用：/ 武器和防御的内容一起显示你们能帮我一把吗？谢谢

这是我的全部代码：

html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        
        
        <link rel="stylesheet" href="/assets/css/mixbasic.css" type="text/css">
        
    </head>
    
    <body>      
        <div id="body">
            <div id="top_box">
                <span class="links_box">
                    <a onclick="Weapons">Weapons</a> |
                    <a onclick="Defense">Defense</a> 
                    
                </span>
            </div>
        
            
            <div id="info_box"></div>
            
            <div id="defense">
            <table id="mix_list_table" cellspacing="1" cellpadding="0">

                <colgroup>
                    <col>
                    <col>
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                </colgroup>

                <tr class="table_header">
                    <td style="vertical-align: middle;">Name</td>
                    <td style="vertical-align: middle;">Effect</td>
                    <td><img src="images/sheltoms/lucidy.gif" alt="Lucidy"></td>
                    <td><img src="images/sheltoms/sereneo.gif" alt="Sereneo"></td>
                    <td><img src="images/sheltoms/fadeo.gif" alt="Fadeo"></td>
                    <td><img src="images/sheltoms/sparky.gif" alt="Sparky"></td>
                    <td><img src="images/sheltoms/raident.gif" alt="Raident"></td>
                    <td><img src="images/sheltoms/transparo.gif" alt="Transparo"></td>
                    <td><img src="images/sheltoms/murky.gif" alt="Murky"></td>
                    <td><img src="images/sheltoms/devine.gif" alt="Devine"></td>
                    <td><img src="images/sheltoms/celesto.gif" alt="Celesto"></td>
                    <td><img src="images/sheltoms/mirage.gif" alt="Mirage"></td>
                    <td><img src="images/sheltoms/inferna.gif" alt="Inferna"></td>
                    <td><img src="images/sheltoms/enigma.gif" alt="Enigma"></td>
                    <td><img src="images/sheltoms/bellum.gif" alt="Bellum"></td>
                    <td><img src="images/sheltoms/oredo.gif" alt="Oredo"></td>
                    <td><img src="images/sheltoms/sapphire.gif" alt="Sapphire"></td>
                    <td><img src="images/sheltoms/sol.gif" alt="Sol"></td>
                </tr>
                <tr id="mix1" class="row0" onmouseover="this.className='row_hl';" onmouseout="this.className='row0';" onclick="infoBox(1);">
                    <td style="text-align: left;">Transparo Critical Mix</td>
                    <td style="text-align: left;">MinAP(+3) MaxAP(+4) Crit(+1)</td>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td></td>
                    <td>3</td>
                    <td>5</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr id="mix2" class="row1" onmouseover="this.className='row_hl';" onmouseout="this.className='row1';" onclick="infoBox(2);">
                    <td style="text-align: left;">Murky Dexterity Mix</td>
                    <td style="text-align: left;">MaxAP(+6) AR(+45) HP(+10)</td>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>1</td>
                    <td></td>
                    <td>3</td>
                    <td>4</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr class="table_header">
                    <td style="vertical-align: middle;">Name</td>
                    <td style="vertical-align: middle;">Effect</td>
                    <td><img src="images/sheltoms/lucidy.gif" alt="Lucidy"></td>
                    <td><img src="images/sheltoms/sereneo.gif" alt="Sereneo"></td>
                    <td><img src="images/sheltoms/fadeo.gif" alt="Fadeo"></td>
                    <td><img src="images/sheltoms/sparky.gif" alt="Sparky"></td>
                    <td><img src="images/sheltoms/raident.gif" alt="Raident"></td>
                    <td><img src="images/sheltoms/transparo.gif" alt="Transparo"></td>
                    <td><img src="images/sheltoms/murky.gif" alt="Murky"></td>
                    <td><img src="images/sheltoms/devine.gif" alt="Devine"></td>
                    <td><img src="images/sheltoms/celesto.gif" alt="Celesto"></td>
                    <td><img src="images/sheltoms/mirage.gif" alt="Mirage"></td>
                    <td><img src="images/sheltoms/inferna.gif" alt="Inferna"></td>
                    <td><img src="images/sheltoms/enigma.gif" alt="Enigma"></td>
                    <td><img src="images/sheltoms/bellum.gif" alt="Bellum"></td>
                    <td><img src="images/sheltoms/oredo.gif" alt="Oredo"></td>
                    <td><img src="images/sheltoms/sapphire.gif" alt="Sapphire"></td>
                    <td><img src="images/sheltoms/sol.gif" alt="Sol"></td>
                </tr>

            </table>
        </div>
        </div>
        
        <div id="weapons">
            <table id="mix_list_table" cellspacing="1" cellpadding="0">

                <colgroup>
                    <col>
                    <col>
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                    <col width="22">
                </colgroup>

                <tr class="table_header">
                    <td style="vertical-align: middle;">Name</td>
                    <td style="vertical-align: middle;">Effect</td>
                    <td><img src="images/sheltoms/lucidy.gif" alt="Lucidy"></td>
                    <td><img src="images/sheltoms/sereneo.gif" alt="Sereneo"></td>
                    <td><img src="images/sheltoms/fadeo.gif" alt="Fadeo"></td>
                    <td><img src="images/sheltoms/sparky.gif" alt="Sparky"></td>
                    <td><img src="images/sheltoms/raident.gif" alt="Raident"></td>
                    <td><img src="images/sheltoms/transparo.gif" alt="Transparo"></td>
                    <td><img src="images/sheltoms/murky.gif" alt="Murky"></td>
                    <td><img src="images/sheltoms/devine.gif" alt="Devine"></td>
                    <td><img src="images/sheltoms/celesto.gif" alt="Celesto"></td>
                    <td><img src="images/sheltoms/mirage.gif" alt="Mirage"></td>
                    <td><img src="images/sheltoms/inferna.gif" alt="Inferna"></td>
                    <td><img src="images/sheltoms/enigma.gif" alt="Enigma"></td>
                    <td><img src="images/sheltoms/bellum.gif" alt="Bellum"></td>
                    <td><img src="images/sheltoms/oredo.gif" alt="Oredo"></td>
                    <td><img src="images/sheltoms/sapphire.gif" alt="Sapphire"></td>
                    <td><img src="images/sheltoms/sol.gif" alt="Sol"></td>
                </tr>
                <tr id="mix1" class="row0" onmouseover="this.className='row_hl';" onmouseout="this.className='row0';" onclick="infoBox(1);">
                    <td style="text-align: left;">Transparo Critical Mix</td>
                    <td style="text-align: left;">MinAP(+3) MaxAP(+4) Crit(+1)</td>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td></td>
                    <td>3</td>
                    <td>5</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr id="mix2" class="row1" onmouseover="this.className='row_hl';" onmouseout="this.className='row1';" onclick="infoBox(2);">
                    <td style="text-align: left;">Murky Dexterity Mix</td>
                    <td style="text-align: left;">MaxAP(+6) AR(+45) HP(+10)</td>
                    <td></td>
                    <td></td>
                    <td>1</td>
                    <td>1</td>
                    <td></td>
                    <td>3</td>
                    <td>4</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td>1</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                
                <tr class="table_header">
                    <td style="vertical-align: middle;">Name</td>
                    <td style="vertical-align: middle;">Effect</td>
                    <td><img src="images/sheltoms/lucidy.gif" alt="Lucidy"></td>
                    <td><img src="images/sheltoms/sereneo.gif" alt="Sereneo"></td>
                    <td><img src="images/sheltoms/fadeo.gif" alt="Fadeo"></td>
                    <td><img src="images/sheltoms/sparky.gif" alt="Sparky"></td>
                    <td><img src="images/sheltoms/raident.gif" alt="Raident"></td>
                    <td><img src="images/sheltoms/transparo.gif" alt="Transparo"></td>
                    <td><img src="images/sheltoms/murky.gif" alt="Murky"></td>
                    <td><img src="images/sheltoms/devine.gif" alt="Devine"></td>
                    <td><img src="images/sheltoms/celesto.gif" alt="Celesto"></td>
                    <td><img src="images/sheltoms/mirage.gif" alt="Mirage"></td>
                    <td><img src="images/sheltoms/inferna.gif" alt="Inferna"></td>
                    <td><img src="images/sheltoms/enigma.gif" alt="Enigma"></td>
                    <td><img src="images/sheltoms/bellum.gif" alt="Bellum"></td>
                    <td><img src="images/sheltoms/oredo.gif" alt="Oredo"></td>
                    <td><img src="images/sheltoms/sapphire.gif" alt="Sapphire"></td>
                    <td><img src="images/sheltoms/sol.gif" alt="Sol"></td>
                </tr>

            </table>
        </div>
        </div>




    </body>
</html>

在我看来，您正在尝试调用一个不存在的函数

我想这就是你想要的

功能信息框（id）
{
var节点=document.getElementById（'mix'+id）；
var allNodes=node.getElementsByTagName（'td'）；
var sheltoms=新数组(
“露西蒂”，
“塞雷尼奥”，
“法迪奥”，
“火花”，
“雷登”，
“Transparo”，
“阴暗”，
“德文”，
“Celesto”，
“海市蜃楼”，
“地狱”，
“谜”，
“贝勒姆”，
“奥利多”，
“蓝宝石”，
“信保通”）；
var text=“”；
对于（变量i=0；i 0）
{
text=text+allNodes[s]。innerHTML
+“x
\n”；
}
}
var infoBoxArea=document.getElementById（'info_-box'）；
var name=allNodes[0]。innerHTML；
var effect=allNodes[1]。innerHTML；
infoBoxArea.innerHTML='CloseMix信息\n'
+'名称：
'
+名称+'

效果：
'
+效果+'

搁置区：
'
+文本+“”；
infoBoxArea.style.display='block'；
}
document.getElementById（“武器”）.style.display='block'；
document.getElementById（“defense”）.style.display='none'；
功能显示类别
{
如果（s.innerHTML==“武器”）
{
document.getElementById（“武器”）.style.display='block'；
document.getElementById（“defense”）.style.display='none'；
}
否则如果（s.innerHTML=='defence'）
{
document.getElementById（“武器”）.style.display='none'；
document.getElementById（“defense”）.style.display='block'；
}
}

感谢您的回复，我想要的是当我单击加载表中的武器时，以及当我单击防御交换到表中时。我收到这个错误消息：未捕获引用错误：未定义武器“”未捕获引用错误：未定义防御“试试看：你有没有检查控制台的错误？有一个。你做了什么来尝试解决这个错误？调试javascript的第一步总是检查错误控制台。所有这些代码都是演示问题所必需的吗？太多的代码使隔离问题变得很困难。今后请考虑

var node = document.getElementById('mix'+id);
    var allNodes = node.getElementsByTagName('td');
    var sheltoms = new Array(
            "Lucidy",
            "Sereneo", 
            "Fadeo", 
            "Sparky", 
            "Raident", 
            "Transparo", 
            "Murky", 
            "Devine", 
            "Celesto", 
            "Mirage", 
            "Inferna", 
            "Enigma", 
            "Bellum", 
            "Oredo",
            "Sapphire",
            "Sol");
    
    var text = "";
    for (var i=0; i<16; i++)
    {
        var s = 2 + i;
            
        if(allNodes[s] != null && allNodes[s].innerHTML && allNodes[s].innerHTML.length > 0)
        {
            text = text + allNodes[s].innerHTML 
                + ' x <img src="images/sheltoms/' 
                + sheltoms[i].toLowerCase() + '.gif" class="box_sheltom_img" alt="' + sheltoms[i] + '"><br>\n';
        }
    }
    
    var infoBox = document.getElementById('info_box');
    
    var name = allNodes[0].innerHTML;
    var effect = allNodes[1].innerHTML;
    
    infoBox.innerHTML = '<div class="box_header"><span class="box_close" onclick="document.getElementById(\'info_box\').style.display=\'none\';">Close</span>Mix Info</div>\n<div class="box_content">'
        + '<b>Name:</b><br>' 
        + name + '<br><br><b>Effect:</b><br>' 
        + effect + '<br><br><b>Sheltoms:</b><br>' 
        + text + '</div>';
    infoBox.style.display = 'block';
    
    
    

}
document.getElementById("weapons").style.display = 'block';
document.getElementById("defense").style.display = 'none';

        
function showCategory(s)
{
    if( s.innerHTML == 'Weapons' )
    {
        document.getElementById("weapons").style.display = 'block';
        document.getElementById("defense").style.display = 'none';

    }
    else if( s.innerHTML == 'Defense' )
    {
        document.getElementById("weapons").style.display = 'none';
        document.getElementById("defense").style.display = 'block';
    }

}

#body
{
    /* width: 920px; */
    border: 1px solid #3B2517;
    margin: auto;
    text-align: left; /* IE */
    padding: 5px;
    
    background: #554231 url(/images/background.jpg) repeat-x scroll 0px -0px;
}

#top_box
{
    text-align: center;
    margin-bottom: 20px;
    margin-top: 5px;
}

.links_box
{
    background-color: #3B2517;
    color: #D0B77A;
    font-weight: bold;
    padding: 0.3em 0.6em 0.3em 0.6em;
    height: 1.2em;
    border: 1px solid #3B2517;
    margin-top: 10px;
}
.selected_link
{
    border-bottom: 2px solid #D0B77A;
}

.links_box a:link,
.links_box a:visited,
.links_box a:active
{
    color: #D0B77A;
    font-weight: bold;
    text-decoration: none; 
}

.links_box a:hover
{
    color: #FFF8D9;
}


h1
{
    margin-top: 0.5em;
    margin-bottom: 0.8em;
    font-size: 2.2em;
    font-weight: normal;
}

hr
{
    border: 0px; /* Firefox und Opera */
    border-top: solid 1px #000000;
    border-bottom: solid 1px #E5DAC9; /* IE */
}

table
{
    border-width: 0; 
    border-color: #000000; 
     
    font-size: 1em;
}

td, th
{
    padding: 0.2em 0.4em 0.2em 0.4em;
    vertical-align: top;
    line-height: 1.2em;
}

a:link
{
    text-decoration: none; 
    color: #34271C;
    font-weight: bold;
}
a:visited
{
    text-decoration: none; 
    color: #34271C;
    font-weight: bold;
}
a:hover
{
    text-decoration: underline; 
    color: #633822;
    font-weight: bold;
}
a:active
{
    text-decoration: none; 
    color: #34271C;
    font-weight: bold;
}

.row0
{
    background-color: #F4EBDE;
}

.row1
{
    background-color: #E5DAC9;
}

.row_hl
{
    background-color: #C2AD87;
    color: #000000;
}

#mix_list_table
{
    width: 100%;
    text-align: center;
    border: 1px solid #3B2517;
    font-size: 0.9em;
    background-color: #3B2517;
    table-layout: fixed;
}

#mix_list_table td
{
    line-height: 1.5em;
    cursor: pointer;
}

.table_header
{
    font-weight: bold;
    background-color: #3B2517;
    color: #D0B77A;
}

.table_header td
{
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 0px;
    padding-right: 0px;
    vertical-align: middle;
    cursor: default !important;
}

#info_box
{
    display: none;
    width: 450px;
    background-color: #E5DAC9;
    position: fixed;
    left: 50%;
    top: 25%;
    margin-left: -225px;
    border: 1px solid #000000;
    padding: 1px;
    line-height: 1.5em;
}

.box_header
{
    font-weight: bold;
    background-color: #3B2517;
    color: #D0B77A;
    padding: 2px 5px 2px 5px;
}

.box_content
{
    padding: 5px;
}

.box_sheltom_img
{
    position: relative;
    top: 6px;
    margin: 2px 0px 2px 0px;
}

.box_close
{
    float: right;
    cursor: pointer;
}

function infoBox(id)
{
var node = document.getElementById('mix'+id);
    var allNodes = node.getElementsByTagName('td');
    var sheltoms = new Array(
            "Lucidy",
            "Sereneo", 
            "Fadeo", 
            "Sparky", 
            "Raident", 
            "Transparo", 
            "Murky", 
            "Devine", 
            "Celesto", 
            "Mirage", 
            "Inferna", 
            "Enigma", 
            "Bellum", 
            "Oredo",
            "Sapphire",
            "Sol");
    
    var text = "";
    for (var i=0; i<16; i++)
    {
        var s = 2 + i;
            
        if(allNodes[s] != null && allNodes[s].innerHTML && allNodes[s].innerHTML.length > 0)
        {
            text = text + allNodes[s].innerHTML 
                + ' x <img src="images/sheltoms/' 
                + sheltoms[i].toLowerCase() + '.gif" class="box_sheltom_img" alt="' + sheltoms[i] + '"><br>\n';
        }
    }
    
    var infoBoxArea = document.getElementById('info_box');
    
    var name = allNodes[0].innerHTML;
    var effect = allNodes[1].innerHTML;
    
    infoBoxArea.innerHTML = '<div class="box_header"><span class="box_close" onclick="document.getElementById(\'info_box\').style.display=\'none\';">Close</span>Mix Info</div>\n<div class="box_content">'
        + '<b>Name:</b><br>' 
        + name + '<br><br><b>Effect:</b><br>' 
        + effect + '<br><br><b>Sheltoms:</b><br>' 
        + text + '</div>';
    infoBoxArea.style.display = 'block';
    
    
    

}
document.getElementById("weapons").style.display = 'block';
document.getElementById("defense").style.display = 'none';

        
function showCategory(s)
{
    if( s.innerHTML == 'Weapons' )
    {
        document.getElementById("weapons").style.display = 'block';
        document.getElementById("defense").style.display = 'none';

    }
    else if( s.innerHTML == 'Defense' )
    {
        document.getElementById("weapons").style.display = 'none';
        document.getElementById("defense").style.display = 'block';
    }

}