PDA

Click to See Complete Forum and Search --> : number list

yaron
09-16-2003, 06:05 AM
Hello,
I have a script which I type in a data table .
What I want is to print the row number near each row but to also have a button that switch this option on and off.
is this possible with javascript?
yaron
09-16-2003, 07:07 AM
if the option is off and teh button is clicked then my table will like this
1. data1
2. data2
3. data3
and if the option is on and the button is clicked then my table will like it looks now.
data1
data2
data3
pyro
09-16-2003, 08:05 AM
Try this:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
.num {
width: 15px;
}
.altnum {
display:none;
}
</style>

<script type="text/javascript">
function setNums(action) {
table = document.getElementById("mytable");
td = table.getElementsByTagName("td");
for (i=0; i<td.length; i++) {
if (action == "hide") {
if (td[i].className == "num") {
td[i].className = "altnum";
}
}
else {
if (td[i].className == "altnum") {
td[i].className = "num";
}
}
}
}
</script>

</head>

<body>
<p><a href="javascript:void(0);" onclick="setNums('hide'); return false;">hide</a> | <a href="javascript:void(0);" onclick="setNums('show'); return false;">show</a></p>
<table id="mytable" style="border: 1px solid;">
<tr>
<td class="num">1</td>
<td>One</td>
</tr>
<tr>
<td class="num">2</td>
<td>Two</td>
</tr>
<tr>
<td class="num">3</td>
<td>Three</td>
</tr>
</table>
</body>
</html>