Q1133 How can I swap table rows between two table by pressing form field buttons?

You are here: irt.org | FAQ | DHTML | Q1133 [ previous next ]

You could rewrite the whole table - possibly using JavaScript in a frame to control the output of another.

The following should work dynamically (without reloading the page) on Netscape Navigator 4+ and Internet Explorer 4+:

<head>

<script language="JavaScript"><!--
table1 = new Array();
table1[0] = 'This is some text for row 1 for table1';
table1[1] = 'Row 2 text for table1';
table1[2] = 'Contents of the last row for table1';

table2 = new Array();
table2[0] = 'This is some text for row 1 for table2';
table2[1] = 'Row 2 text for table2';
table2[2] = 'Contents of the last row for table2';

function refreshTable() {
    if (document.all) {
        document.all('myTable1').innerHTML =  createTable(1);
        document.all('myTable2').innerHTML =  createTable(2);
    }
    else if (document.layers) {
        document.layers['myTable1'].document.open();
        document.layers['myTable1'].document.writeln(createTable(1));
        document.layers['myTable1'].document.close();

        document.layers['myTable2'].document.open();
        document.layers['myTable2'].document.writeln(createTable(2));
        document.layers['myTable2'].document.close();
    }
}

function createTable(table) {
    myObject = eval('table' + table);

    var output = '<table border="1" width="200">';
    for (var row = 0; row < myObject.length; row++) {
        if (myObject[row] != '') {
            form = '<form><input type="button" value="Swap" onClick="clicked('+table+','+row+')"><\/form><\/td><td>';
            output += '<tr><td>' + form + myObject[row] + '<\/td><\/tr>';
        }
    }
    output += '<\/table>';

    return output;
}

function clicked(table,row) {
    if (table == 1) {
        table2[table2.length] = table1[row];
        table1[row] = '';
    }
    else {
        table1[table1.length] = table2[row];
        table2[row] = '';
    }
    refreshTable();
}
//--></script>

</head>

<body onLoad="refreshTable()">

<span id="myTable1" style="position:absolute; width:200;" width="200"></span>

<span id="myTable2" style="position:absolute; width:200; left:250" width="200"></span>

</body>
</html>