Displaying and hiding a specific row in the table_问答_开发者

Goal:

When you click the text "info" in the column "comments", a row should be displayed below with text information that is related to the "comments". Need also to click the text "Info" again to hide the text information of comments.

Problem:

I don't know how to display the row when you click one of the comments with the text "info". When clicking one of the link the remaining rows with the text "info" should not be affected. In order words, the part should be independent

Need also some help hiding the text information of comments.

There are some things that you also need to take account to:

The amount of data that will be displayed in the table will be changed from day to day. The data is taken from a xml file.
Would like the sourcode to be written in jQuery.
Only html, css and javascript is allowed in this context.
html code in tr and td will be generated by javscript code.

Displaying and hiding a specific row in the table

Please remember that the text hide and show is only for temporary.

// Fullmetalboy

$(document).ready(init);

function init() 
{
    startPoint();
}



var mittXHRobjekt = null;

function skapaXHRobjekt() {
    try {
        mittXHRobjekt = new XMLHttpRequest();  // Firefox, Opera, ...
    } catch (err1) {
        try {                              // Någon IE version
            mittXHRobjekt = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (err2) {
            try {                           // Någon IE version
                mittXHRobjekt = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (err3) {
                mittXHRobjekt = false;
            }
        }
    }


    if (mittXHRobjekt == null) {
        alert('Error creating request object!');
    }


    return mittXHRobjekt;
}


function startPoint() {
    var xmlAdress = "data.xml";
    mittXHRobjekt = skapaXHRobjekt();
    if (mittXHRobjekt) {
        mittXHRobjekt.onreadystatechange = function () {
            if (mittXHRobjekt.readyState == 4) {
                testt();




            } //if 
        } //slut på anonym funktion som utförs när tillståndet i XHR ändras 
        mittXHRobjekt.open("GET", xmlAdress);
        mittXHRobjekt.send(null);
    }
} //slut på funktionen visaKurs



function testt()
{
    var data = retrieveDataFromXML();

    var data2 = briefAllProject(data);

    AddRow(data2);


}


function retrieveDataFromXML() {

    //Hämtar alla taggar av typen kurs 
    var projektnamn = mittXHRobjekt.responseXML.getElementsByTagName("projektnamn");
    var ko开发者_Python百科mmentar = mittXHRobjekt.responseXML.getElementsByTagName("kommentar");
    var datum = mittXHRobjekt.responseXML.getElementsByTagName("datum");    
    var timmar = mittXHRobjekt.responseXML.getElementsByTagName("timmar");  
    var minuter = mittXHRobjekt.responseXML.getElementsByTagName("minuter");

    var araay = new Array();
    var nummer = 0;

    //Har nu en matris/array av <kurs> noder. Kan loopa genom matrisen 
    for (a = 0; a < projektnamn.length; a++) 
    {

        for (b = 0; b < 5; b++) 
        {

            if(b == 0)
            {
                araay[nummer] = projektnamn[a].firstChild.data;
            }
            else if(b == 1)
            {
                araay[nummer] = kommentar[a].firstChild.data;
            }
            else if(b == 2)
            {
                araay[nummer] = datum[a].firstChild.data; 
            }
            else if(b == 3)
            {
                araay[nummer] = timmar[a].firstChild.data; 
            }                   
            else if(b == 4)
            {
                araay[nummer] = minuter[a].firstChild.data;
            }

            nummer++;
        }

    }

    return araay;
} //slut på fyllElementMedDataFranServern






function AddRow(pArray)
{

    var b=0;
    var tabell = document.getElementById("tblProjekt");
    var tabell2 = document.getElementById("tblProjekt");
    var newRow;

    var c = 1;
    var test = 0;

    for(a=0; a < pArray.length/4; a++)
    {

        newRow = tabell.insertRow(tabell.rows.length);

        for(b=1; b <= 4; b++)
        {
            var newCell;

            if(b == 1)
            {
                newCell = newRow.insertCell(0);
                newCell.innerHTML = pArray[test + 0];
            }
            else if(b == 2)
            {
                newCell = newRow.insertCell(1);
                newCell.innerHTML = pArray[test + 1];
            }
            else if(b == 3)
            {
                newCell = newRow.insertCell(2);
                newCell.innerHTML = pArray[test + 2];
            }       
            else if(b == 4)
            {               
                newCell = newRow.insertCell(3);
                newCell.innerHTML = "Info";
                //newCell.innerHTML = pArray[test + 3];


                newRow = tabell2.insertRow(tabell2.rows.length);
                //newCell = newRow.insertCell(0);

                var newAttrColspan = document.createAttribute("colspan");
                newAttrColspan.nodeValue = 4;

                newRow.className = "firstDataRow";
                //newRow.id = "firstDataRow";

                var newCell = newRow.insertCell(0);
                newCell.setAttributeNode(newAttrColspan);
                newCell.innerHTML = "asdf";

                //$("#firstDataRow").hide();
                //$(".aaa").hide();

            }


        }

        test = 4 + test;
    }

}






$(document).ready(function() 
{


    $('.submit').click(function()
    {

        $(".firstDataRow").hide();

    }); // saveForm


    $('.submitt').click(function()
    {

        $(".firstDataRow").show();

    }); // saveForm


}); // ready 









function briefAllProject(pArray)
{

    var araay = new Array();

    var nummer5 = 0;
    var nummer3 = 3;


    var projectNameArray = new Array();
    var newArray=new Array();

    for (a = 0; a < pArray.length/5; a++) 
    {
        newArray[a] = pArray[nummer5];

        nummer5 = 5 + nummer5;
    }

    projectNameArray = removeDuplicates(newArray);


    nummer5 = 0;
    nummer3 = 0;



    var sanning = true;
    var dontAddValue = true;

    for (var a = 0; a < projectNameArray.length; a++) 
    {

        for (var b = 0; b < pArray.length/5; b++) 
        {

            if(   (projectNameArray[a] == pArray[nummer5]) &&  (pArray[nummer5] != null) && (a < projectNameArray.length)   )
            {

                if(sanning == true)
                {
                    araay[0 + nummer3] = pArray[0 + nummer5]; // namn
                    araay[1 + nummer3] = mergAllTimeOfSpecificProject(pArray , pArray[0 + nummer5]);
                    araay[2 + nummer3] = "Info"; // info
                    araay[3 + nummer3] = pArray[1 + nummer5]; // kommentar                      

                    nummer3 = nummer3 + 4;

                    sanning = false;
                }

            }

            nummer5 = nummer5 + 5;
        }

        nummer5 = 0;
        sanning = true;

    }


    return araay;
}



function mergAllTimeOfSpecificProject(pArray , pProjectName)
{
    var aa = 0;

    var nummer5 = 0;

    for(a = 0; a < pArray.length/5; a++)
    {
        if(pArray[nummer5] == pProjectName)
        {
            aa += parseInt(pArray[3 + nummer5]);
        }

        nummer5 = 5 + nummer5;
    }

    return aa;
}


function removeDuplicates(arr)
{
    //get sorted array as input and returns the same array without duplicates.
    var result=new Array();
    var lastValue="";


    result[0] = arr[0];

    var kth = 0;
    var sanning = true;

    for (var a=0; a < arr.length; a++)
    {

        for(var b=0; b < arr.length; b++)
        {

            if (result[kth] != arr[b])
            {

                for(var aa = 0; aa < result.length; aa++)
                {

                    if(result[aa] == arr[b])
                    {
                        sanning = false;
                    }

                }


                if(sanning == true)
                {
                    result[result.length] = arr[b];
                    kth++;
                }
                else
                {
                    sanning = true;
                }

            }

        }

    }

    return result;
}

        <table border="1" SUMMARY="aaa" id="tblProject">
          <thead>
            <tr>
              <th>Projekt name</th>
              <th>Total time</th>
              <th>Task</th>
              <th>comments</th>
            </tr>
          </thead>
          <tbody>

          </tbody>
        </table>

    <a href="#" class="submit">hide</a>

    <a href="#" class="submitt">show</a>

<?xml version="1.0" encoding="UTF-8" ?>

<projektarbeten>
    <projekt>
        <projektnamn>aaaa</projektnamn>
        <kommentar>kommentar</kommentar>
        <datum>2011-3-3</datum>
        <timmar>6</timmar>
        <minuter>0</minuter>
    </projekt>
    <projekt>
        <projektnamn>bbbb</projektnamn>
        <kommentar>kommentar</kommentar>
        <datum>2011-3-3</datum>
        <timmar>2</timmar>
        <minuter>0</minuter>
    </projekt>
    <projekt>
        <projektnamn>aaaa</projektnamn>
        <kommentar>kommentar</kommentar>
        <datum>2011-3-3</datum>
        <timmar>6</timmar>
        <minuter>0</minuter>
    </projekt>
    <projekt>
        <projektnamn>cccc</projektnamn>
        <kommentar>kommentar</kommentar>
        <datum>2011-3-3</datum>
        <timmar>10</timmar>
        <minuter>0</minuter>
    </projekt>
    <projekt>
        <projektnamn>cccc</projektnamn>
        <kommentar>kommentar</kommentar>
        <datum>2011-3-3</datum>
        <timmar>10</timmar>
        <minuter>0</minuter>
    </projekt>
    <projekt>
        <projektnamn>cccc</projektnamn>
        <kommentar>kommentar</kommentar>
        <datum>2011-3-3</datum>
        <timmar>10</timmar>
        <minuter>0</minuter>
    </projekt>
    <projekt>
        <projektnamn>kth ss</projektnamn>
        <kommentar>kommentar</kommentar>
        <datum>2011-3-3</datum>
        <timmar>14</timmar>
        <minuter>0</minuter>
    </projekt>
    <projekt>
        <projektnamn>kth ss</projektnamn>
        <kommentar>kommentar</kommentar>
        <datum>2011-3-3</datum>
        <timmar>50</timmar>
        <minuter>0</minuter>
    </projekt>              

</projektarbeten>

I'd suggest you to use a table plugin for jquery. I've been using datatables for two years and i find it particulary useful. Look at this example that perfectly suits your case io think: http://datatables.net/release-datatables/examples/api/row_details.html

Look at this fiddle for an example: http://jsfiddle.net/nicolapeluchetti/5QhNx/3/