veejar
07-28-2006, 08:23 AM
Task - clone existent table without first head row.
Problem: column widths are not equal.
<html>
<body>
<div id='div1'>
<table cellpadding='5' cellspacing='0' border='1' id='table1'>
<tr>
<td>#</td>
<td>Cell content</td>
</tr>
<tr>
<td>1</td>
<td>text text text text text</td>
</tr>
</table>
</div>
<script type='text/javascript'><!--
function test() {
table1 = document.getElementById( 'table1' );
table2 = table1.cloneNode( true );
div = document.getElementById( 'div1' );
div.appendChild( table2 );
arr = [];
row0_cells = table1.rows[0].cells;
for ( i=0; i < row0_cells.length; i++ ) {
arr.push( row0_cells[i].clientWidth );
}
table2.deleteRow( 0 );
for ( i=0; i < arr.length; i++ ) {
cell = table2.rows[0].cells[i];
cell.style.width = arr[i]+'px';
}
}
--></script>
<br><br>
<a href='#' onClick='test()'>Test</a>
</body>
</html>
Problem: column widths are not equal.
<html>
<body>
<div id='div1'>
<table cellpadding='5' cellspacing='0' border='1' id='table1'>
<tr>
<td>#</td>
<td>Cell content</td>
</tr>
<tr>
<td>1</td>
<td>text text text text text</td>
</tr>
</table>
</div>
<script type='text/javascript'><!--
function test() {
table1 = document.getElementById( 'table1' );
table2 = table1.cloneNode( true );
div = document.getElementById( 'div1' );
div.appendChild( table2 );
arr = [];
row0_cells = table1.rows[0].cells;
for ( i=0; i < row0_cells.length; i++ ) {
arr.push( row0_cells[i].clientWidth );
}
table2.deleteRow( 0 );
for ( i=0; i < arr.length; i++ ) {
cell = table2.rows[0].cells[i];
cell.style.width = arr[i]+'px';
}
}
--></script>
<br><br>
<a href='#' onClick='test()'>Test</a>
</body>
</html>