顯示和隱藏表格中的特定行

Question

目標：
當您單擊「評論」列中的文本「信息」時，應在下面顯示與「評論」相關的文本信息。還需要再次點擊文本「信息」以隱藏評論的文本信息。

問題：
我不知道如何顯示行，當你點擊其中一個評論與文本「信息」。點擊其中一個鏈接時，其餘行中的文本「信息」不應受到影響。換句話說，該部分應該是獨立的

需要一些幫助隱藏評論的文字信息。

有一些東西，你還需要考慮到：

• 將顯示在表中的數據量將 從白天改爲一天。數據來自xml文件。
• 想要在jQuery中編寫酸碼。
• 在此上下文中只允許html，css和javascript。
• tr和td中的html代碼將由javscript代碼生成。

請記住，文字隱藏和顯示只是暫時。

// 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兩年，我發現它特別有用。看下面這個例子完全適合您的情況IO認爲： http://datatables.net/release-datatables/examples/api/row_details.html

看這個搗鼓一個例子：http://jsfiddle.net/nicolapeluchetti/5QhNx/3/