Javascript 显示和隐藏表中的特定行
目标:Javascript 显示和隐藏表中的特定行,javascript,jquery,Javascript,Jquery,目标: 单击“评论”列中的文本“信息”时,应在下面显示一行,其中包含与“评论”相关的文本信息。还需要再次单击文本“信息”以隐藏注释的文本信息 问题: 我不知道当您单击其中一条带有文本“info”的注释时如何显示该行。单击其中一个链接时,文本为“info”的其余行不应受到影响。换句话说,该部分应该是独立的 还需要一些帮助来隐藏注释的文本信息 您还需要考虑以下几点: 表中显示的数据量将为 日新月异。数据取自一个xml文件 希望用jQuery编写sourcode 在此上下文中只允许使用html、cs
单击“评论”列中的文本“信息”时,应在下面显示一行,其中包含与“评论”相关的文本信息。还需要再次单击文本“信息”以隐藏注释的文本信息 问题:
我不知道当您单击其中一条带有文本“info”的注释时如何显示该行。单击其中一个链接时,文本为“info”的其余行不应受到影响。换句话说,该部分应该是独立的 还需要一些帮助来隐藏注释的文本信息 您还需要考虑以下几点:
- 表中显示的数据量将为 日新月异。数据取自一个xml文件
- 希望用jQuery编写sourcode
- 在此上下文中只允许使用html、css和javascript
- tr和td中的html代码将由javscript代码生成
$(文档).ready(初始化);
函数init()
{
起始点();
}
var-mittXHRobjekt=null;
函数skapaXHRobjekt(){
试一试{
mittXHRobjekt=newXMLHttpRequest();//Firefox、Opera。。。
}捕获(错误1){
试试{//Någonie版本
mittXHRobjekt=新的ActiveXObject(“Microsoft.XMLHTTP”);
}捕获(错误2){
试试{//Någonie版本
mittXHRobjekt=新的ActiveXObject(“Msxml2.XMLHTTP”);
}捕获(错误3){
mittXHRobjekt=false;
}
}
}
if(mittXHRobjekt==null){
警报('创建请求对象时出错!');
}
返回mittXHRobjekt;
}
函数startPoint(){
var xmladdress=“data.xml”;
mittXHRobjekt=skapaXHRobjekt();
如果(mittXHRobjekt){
mittXHRobjekt.onreadystatechange=函数(){
if(mittXHRobjekt.readyState==4){
testt();
}//如果
}//荡妇påanoman funktion som utförs når tillståndet i XHRändras
mittXHRobjekt.open(“GET”,xmladdress);
mittXHRobjekt.send(空);
}
}//荡妇påfunktionen visaKurs
函数testt()
{
var data=retrieveDataFromXML();
var data2=项目简介(数据);
AddRow(数据2);
}
函数retrieveDataFromXML(){
//Hämtar alla taggar av typen kurs
var projektnamn=mittXHRobjekt.responseXML.getElementsByTagName(“projektnam”);
var kommentar=mittXHRobjekt.responseXML.getElementsByTagName(“kommentar”);
var datum=mittXHRobjekt.responseXML.getElementsByTagName(“数据”);
var timmar=mittXHRobjekt.responseXML.getElementsByTagName(“timmar”);
var minuter=mittXHRobjekt.responseXML.getElementsByTagName(“minuter”);
var aray=新数组();
var nummer=0;
//Har nu en matris/array av noder.Kan loopa genom matrisen
对于(a=0;a 对于(b=1;b我建议您为jquery使用一个表插件。我已经使用了两年,我发现它特别有用。看看这个非常适合您的例子,我想:
以这把小提琴为例:请为您的表格发布HTML,不要发布这么长不必要的代码。我已经发布了一些HTML代码。下次我会记住代码量。
$(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>