jschweickart
06-11-2004, 09:46 PM
I use a javascript utility to give my html tables nice features, such as column-header click-sorting, row-selection capability, etc. I, recently, noticed that when sorting, any checkbox checked attributes revert back to the values the page loaded with after I resorted the table. For example, if a checkbox in the table was unchecked when the page loaded, and then I checked it and resorted, my check would dissappear. The same effect happens if it loaded checked and I uncheck it. It appears "rechecked" after sorting. I have reduced this to a small test case that I have included. I have narrowed it down to the moveRow() method. I really don't want to capture all my checkbox values before sorting and reset them afterwards. Does anyone know of a good work-around for this?
Thanks,
Joe Schweickart
Small example of problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
check any checkbox and then click on column header. moveRow() will cause the check to "dissappear"
<table id="table1" border="1">
<tr>
<th onclick="moveTheRowsAround();">
header 1
</th>
<th onclick="moveTheRowsAround();">
header 2
</th>
</tr>
<tr>
<td>
cell(0,1)
</td>
<td>
<input type=checkbox name="checkbox2">
</td>
</tr>
<tr>
<td>
cell(1,1)
</td>
<td>
<input type=checkbox name="checkbox2">
</td>
</tr>
<tr>
<td>
cell(2,1)
</td>
<td>
<input type=checkbox name="checkbox3">
</td>
</tr>
</table>
<script language="javascript">
function moveTheRowsAround()
{
document.getElementById('table1').moveRow(1,3);
}
</script>
</body>
</html>
Thanks,
Joe Schweickart
Small example of problem:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
check any checkbox and then click on column header. moveRow() will cause the check to "dissappear"
<table id="table1" border="1">
<tr>
<th onclick="moveTheRowsAround();">
header 1
</th>
<th onclick="moveTheRowsAround();">
header 2
</th>
</tr>
<tr>
<td>
cell(0,1)
</td>
<td>
<input type=checkbox name="checkbox2">
</td>
</tr>
<tr>
<td>
cell(1,1)
</td>
<td>
<input type=checkbox name="checkbox2">
</td>
</tr>
<tr>
<td>
cell(2,1)
</td>
<td>
<input type=checkbox name="checkbox3">
</td>
</tr>
</table>
<script language="javascript">
function moveTheRowsAround()
{
document.getElementById('table1').moveRow(1,3);
}
</script>
</body>
</html>