How to make a javascript affect all values in a table
I am trying to make a "td" disappear whenever the date occured before that date today (in the past). But what is happening is that only the first column is affected while the others aren't.
<script type="text/javascript">
//<![CDATA[
function vanish() {
downloadUrl("bckendcommmap.php", function(data) {
var xml = data.responseXML;
var markers50 = xml.documentElement.getElementsByTagName("marker50");
// Split timestamp into [ Y, M, D, h, m, s ]
for (var i = 0; i < markers50.length; i++) {
var newdate = markers50[0].getAttribute("date");
var trainid = markers50[0].getAttribute("trainingid");
var t = newdate.split(/[- :]/);
// Apply each element to the Date function
var d = new Date(t[0], t[1]-1, t[2]);
alert(d);
var rightNow = new Date();
var trainingDate = new Date(d);
if (rightNow < d ) {
document.getElementById("assess").innerHTML = ""; /* make it disappear */
}
else if (rightNow > d ) {
document.getElementById("edit").innerHTML = "";
}
// -> Wed Jun 09 2010 13:12:01 GMT+0100 (GMT Daylight Time)
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
Here are parts of the table and the td:
<body onload="vanish();">
<table id="gradient-style" width="290" border="0" cellspacing="0" cellpadding="0" >
<thead>
<tr>
<td align="center"><strong> Training Name</strong></td>
<td align="center"><strong> Description</strong></td>
<td align="center"><strong> Location</strong></td>
<td align="center"><strong> Date</strong></td>
<td align="center"><strong> Time Start</strong></td>
<td align="center"><strong> Time End</strong></td>
<td align="center"><strong> Capacity</strong></td>
<td align="center" colspan="2"><strong>Actions</strong></td>
</tr>
</thead>
<?php
while($rows=mysql_fetch_array($get)){
?>
<tbody>
<tr>
<td><?php echo $rows['title']; ?></td>
<td><?php echo $rows['description']; ?></td>
<td><?php echo $rows['location']; ?></td>开发者_如何学编程;
<td><?php echo $rows['date']; ?></td>
<td><?php echo $rows['start']; ?></td>
<td><?php echo $rows['end']; ?></td>
<td><?php echo $rows['capacity']; ?></td>
**<td align="center"><div id="edit"><a href="TrainingUpdate.php?id=<?php echo $rows['trainingid']; ?>">Edit</a></div></td><td align="center"><div id="assess"><a href="Training_Assessment.php?id=<?php echo $rows['trainingid']; ?>">Assess Training</a></div></td>**
</tr>
</tbody>
<?php
}
?>
</table>
</body>
This line is the td that I'm trying to vanish with respect to the date:
<td align="center"><div id="edit"><a href="TrainingUpdate.php?id=<?php echo $rows['trainingid']; ?>">Edit</a></div></td><td align="center"><div id="assess"><a href="Training_Assessment.php?id=<?php echo $rows['trainingid']; ?>">Assess Training</a></div></td>
You are only hiding the div, if you want to hide td Try this:
**<td id="edit" align="center"><div><a href="TrainingUpdate.php?id=<?php echo $rows['trainingid']; ?>">Edit</a></div></td><td id="assess" align="center"><div><a href="Training_Assessment.php?id=<?php echo $rows['trainingid']; ?>">Assess Training</a></div></td>**
And the html code is inside a while loop so you will have multiple div's with same id! You need to give them unique ids:
$i = 0;
while($rows=mysql_fetch_array($get)){
/* Code... */
<?php
$i = $i + 1;
}
?>
And
<div id="assess<?php echo $i ?>>
And in your javascript:
/* Code... */
if (rightNow < d ) {
var i = 0;
while(document.getElementById("assess" + i) != null) {
document.getElementById("assess").innerHTML = ""; /* make it disappear */
i++;
}
/* Code.../
It's a bit hard to tell what the resulting full HTML in the page looks like, but do you realize that you can only have one object in a web page with a given ID. So, you can't have multiple objects with id="assess". If that is what you're doing, then getElementById will likely only return the first one - though the exact behavior is undefined because it's not valid HTML.
Second, why not just use CSS to hide things rather than clearing the innerHTML. For example, you could use a class="assess" instead of the id="assess". And, then create a CSS rule like this:
.triggerHide .assess {display: none;}
Then, when you want to hide that all assess classes in the table, you simple add the class "triggerHide" to the table. Boom, all the objects with the class assess in the table will all hide.
加载中,请稍侯......
精彩评论