Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Post an Article
Welcome To Ask or Share your Answers For Others

Categories

javascript - Table with onclick

0 votes
64 views
in Technique[技术] by (71.8m points)

javascript - Table with onclick

i am trying to do a onclick function for my table but it's not working i have no clue why Weapons and Defense was supposed to work like buttons to change the table content but it doesn't work :/ and the content of both Weapons and Defense are shown together Can u guys give me a hand? thanks

here is my full code: https://jsfiddle.net/yorig/braj7sLf/9/

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&qu

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

Looks to me like you are trying to call a function that doesn't exist.

I assume this is what you are after? https://jsfiddle.net/2Lasqpnx/

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>
';
        }
    }
    
    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>
<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';
    }

}

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界，一个免费开放的程序员编程交流平台！开放，进步，分享！让技术改变生活，让极客改变未来！ Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

Just Browsing Browsing

1.4m articles

1.4m replys

5 comments

57.0k users

Most popular tags

Snow Theme by Q2A Market
Powered by Question2Answer
...