Entry
How Should i Swap rows between two tables having checkboxes selected in First Column,I need code.
Sep 9th, 2005 00:09
prashant rathi,
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv=Content-Type content="text/html;
charset=windows-1258">
<SCRIPT><!--
function Toggle(buttonName) {
if (buttonName == 'bt1') {
moveRowDown();
} else if (buttonName == 'bt2') {
moveRowUp();
}
}
function moveRowDown() {
var table1 = getTable('table1');
var table2 = getTable('table2');
var rowArray = new Array();
var rowArrayIndex = 0;
if ( table1 ) {
for ( var rowIndex = 0; rowIndex <
table1.rows.length; rowIndex++ ) {
var row1 = getTableRow ( table1,
rowIndex);
if ( row1 ) {
var cell1 = getTableRowCell
(row1, 0);
if ( cell1 ) {
var cellElements =
cell1.childNodes;
if ( cellElements
[0].type) {
if (
cellElements[0].type == 'checkbox') {
var
chkbox = cellElements[0];
if (
chkbox.checked ) {
//alert(" Row : selected ");
rowArray[rowArrayIndex++] = row1;
} else {
//alert("Check box is not checked");
}
} else {
//alert
("Node is not a Check box ");
}
}
} else {
alert (" Cell does not
exists ");
}
} else {
//alert("Row : " + rowIndex + "
does not exists");
}
}
for ( rowArrayIndex = 0; rowArrayIndex <
rowArray.length; rowArrayIndex++) {
//alert("Row Array Index : " +
rowArrayIndex);
var newRow = table2.insertRow();
var oldRow = rowArray[rowArrayIndex];
var oldRowCells = oldRow.cells;
for ( cellIndex = 0 ; cellIndex <
oldRowCells.length ; cellIndex++ ) {
//alert("Old Row Cell Index : "
+ cellIndex);
oldCell = oldRowCells
[cellIndex];
newCell = newRow.insertCell();
cellChild = oldCell.firstChild;
if ( cellChild.type ) {
//alert("Type of Child
Node : " + cellChild.type);
newCell.insertAdjacentElement('beforeEnd', cellChild);
} else {
//alert ("Data of Child
Node : " + cellChild.data);
newCell.insertAdjacentText('beforeEnd',cellChild.data);
}
//alert("Inserted Cell : " +
cellIndex);
}
//alert("Before deleting row : " +
oldRow.rowIndex );
table1.deleteRow(oldRow.rowIndex);
}
} else {
alert ("Table 1 does not exist ");
}
}
function moveRowUp() {
var table1 = getTable('table1');
var table2 = getTable('table2');
var rowArray = new Array();
var rowArrayIndex = 0;
if ( table2 ) {
for ( var rowIndex = 0; rowIndex <
table2.rows.length; rowIndex++ ) {
var row1 = getTableRow ( table2,
rowIndex);
if ( row1 ) {
var cell1 = getTableRowCell
(row1, 0);
if ( cell1 ) {
var cellElements =
cell1.childNodes;
if ( cellElements
[0].type) {
if (
cellElements[0].type == 'checkbox') {
var
chkbox = cellElements[0];
if (
chkbox.checked ) {
//alert(" Row : selected ");
rowArray[rowArrayIndex++] = row1;
} else {
//alert("Check box is not checked");
}
} else {
//alert
("Node is not a Check box ");
}
}
} else {
alert (" Cell does not
exists ");
}
} else {
//alert("Row : " + rowIndex + "
does not exists");
}
}
for ( rowArrayIndex = 0; rowArrayIndex <
rowArray.length; rowArrayIndex++) {
//alert("Row Array Index : " +
rowArrayIndex);
var newRow = table1.insertRow();
var oldRow = rowArray[rowArrayIndex];
var oldRowCells = oldRow.cells;
for ( cellIndex = 0 ; cellIndex <
oldRowCells.length ; cellIndex++ ) {
////alert("Old Row Cell
Index : " + cellIndex);
oldCell = oldRowCells
[cellIndex];
newCell = newRow.insertCell();
cellChild = oldCell.firstChild;
if ( cellChild.type ) {
//alert("Type of Child
Node : " + cellChild.type);
newCell.insertAdjacentElement('beforeEnd', cellChild);
} else {
//alert ("Data of Child
Node : " + cellChild.data);
newCell.insertAdjacentText('beforeEnd',cellChild.data);
}
//alert("Inserted Cell : " +
cellIndex);
}
//alert("Before deleting row : " +
oldRow.rowIndex );
table2.deleteRow(oldRow.rowIndex);
}
} else {
alert ("Table 2 does not exist ");
}
}
function getTable( tableId ) {
var table = document.all ? // IE
document.all
[tableId] :
document.getElementById ? // NN6 or other DOM compliant browser
document.getElementById(tableId) :
null;
return table;
}
function getTableRow ( table, rowIndex) {
var row = null;
if (table.rows[rowIndex]) {
//alert("Row : " + rowIndex + " exist" );
row = table.rows[rowIndex];
} else {
//alert("Row : " + rowIndex + " does not
exist" );
row = null;
}
return row;
}
function getTableRowCell ( row, cellIndex ) {
var cell = null;
if ( row.cells[cellIndex] ) {
//alert("Cell : " + cellIndex + " exist" );
cell = row.cells[cellIndex];
} else {
//alert("Cell : " + cellIndex + " does not
exist" );
cell = null;
}
return cell;
}
-->
</SCRIPT>
<META content="MSHTML 6.00.2900.2722" name=GENERATOR>
</HEAD>
<BODY>
<form name="frm">
<BUTTON style="WIDTH: 10em" onclick="Toggle
('bt1');">Add Row From 1 to 2</BUTTON><BR>
<BUTTON style="WIDTH: 10em" onclick="Toggle
('bt2');">Add Row From 2 to 1</BUTTON>
<BR><BR><BR>
<!-- UPPER TABLE -->
<TABLE id="table1" border=1 name="myTable">
<TR>
<Td>Location</TH>
<Td>Department</TH>
</TR>
<TR>
<TD>
<input type="checkbox"
name="chkbox" id="chkbox" value="up1_11">
</TD>
<TD>11</TD>
</TR>
<TR>
<TD>
<input type="checkbox"
name="chkbox" id="chkbox" value="up2_12">
</TD>
<TD>12</TD>
</TR>
<TR>
<TD>
<input type="checkbox"
name="chkbox" id="chkbox" value="up3_13">
</TD>
<TD>13</TD>
</TR>
</TABLE>
<!-- UPPER TABLE -->
<BR><BR><BR><BR><BR><BR>
<!-- LOWER TABLE -->
<TABLE id="table2" border=1 name="myTable1">
<TR>
<TD>Location1</TD>
<TD>Department1</TD>
</TR>
<TR>
<TD>
<input type="checkbox"
name="chkbox" id="chkbox" value="dw1_66">
</TD>
<TD>66</TD>
</TR>
<TR>
<TD>
<input type="checkbox"
name="chkbox" id="chkbox" value="dw2_77">
</TD>
<TD>77</TD>
</TR>
<TR>
<TD>
<input type="checkbox"
name="chkbox" id="chkbox" value="dw3_88">
</TD>
<TD>88</TD>
</TR>
</TABLE>
<!-- LOWER TABLE -->
</form>
</BODY>
</HTML>
