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.
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 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>
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/