Question

目标：
当您单击“注释”列中的文本“信息”时，下面应显示一行，其中包含与“注释”相关的文本信息。还需要再次单击“信息”文本以隐藏评论的文本信息。

问题：
当您单击其中一个带有“info”文本的注释时，我不知道如何显示该行。单击其中一个链接时，不应影响文本“info”的剩余行。换言之，该部分应该是独立的

还需要一些帮助隐藏评论的文本信息。

您还需要考虑以下事项：

将在表格中显示的数据量每天都在变化。数据来自xml文件。
希望使用jQuery编写sourcode。
在此上下文中仅允许使用html，css和javascript。
tr和td中的html代码将由javscript代码生成。

enter image description here

请记住，文本隐藏和显示只是暂时的。

// 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 kommentar = 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>

Answer 1

我建议你为jquery使用表插件。我已经使用datatables两年了，我发现它特别有用。看看这个完全适合你的情况的例子我认为： http://datatables.net/release-datatables/examples/api/row_details.html

看一下这个小提琴的例子：http://jsfiddle.net/nicolapeluchetti/5QhNx/3/

显示和隐藏表中的特定行

1 个答案: