Custom Html Table

I want to make a small program using Javascript, I want to make a web-page that consists of a ranking-table where some participants can sort the table where the most important item

Solution 1:

Here's a start for you.

Change your onclick attributes to use .call(). This just lets you set the value of this in the functions you're calling to the value of the first argument you pass to .call(). (In this case, the element that received the event.)

<inputtype="button" name="Up1" value="Up" onclick="moveUp.call(this);"> Item 1
<inputtype="button" name="Down1" value="Down" onclick="moveDown.call(this);">

Then these functions should give a basic idea of how it could work. Probably could use some tweaks like making it so that you can't add more rows than there are cells you're sorting.

var table = document.getElementById( 'mytable' );
var filler = document.createElement( 'td' );
filler.className = 'filler';
filler.innerHTML = '*';

functionmoveUp() {
    var cell = this.parentNode.parentNode;
    var row = cell.parentNode;
    var row_above;
    if( row.rowIndex === 1 ) {
        row_above = table.insertRow( 1 );
        row_above.insertCell( 0 );
        update_row_numbers();
    } else {
        row_above = table.rows[ row.rowIndex - 1 ];
    }
    if( row_above.cells[ 1 ] && row_above.cells[ 1 ].className === 'filler' ) {
        row_above.removeChild( row_above.cells[ 1 ] );
    }
    row_above.appendChild( cell );
    if( row.cells.length === 1 ) {
        if( row.rowIndex < table.rows.length - 1 ) {
            row.appendChild( filler.cloneNode( true ) );
        } else {
            table.deleteRow( table.rows.length - 1 );
            update_row_numbers();
        }
    }
}

functionmoveDown() {
    var cell = this.parentNode.parentNode;
    var row = cell.parentNode;
    var row_below;
    if( row.rowIndex === table.rows.length - 1 ) {
        row_below = table.insertRow( table.rows.length );
        row_below.insertCell( 0 );
        update_row_numbers();
    } else {
        row_below = table.rows[ row.rowIndex + 1 ];
    }
    if( row_below.cells[ 1 ] && row_below.cells[ 1 ].className === 'filler' ) {
        row_below.removeChild( row_below.cells[ 1 ] );
    }
    row_below.appendChild( cell );
    if( row.cells.length === 1 ) {
        if( row.rowIndex > 1 ) {
            row.appendChild( filler.cloneNode( true ) );
        } else {
            table.deleteRow( 1 );
            update_row_numbers();
        }
    }
}

functionupdate_row_numbers() {
    for( var i = 1; i < table.rows.length; i++ ) {
        table.rows[i].cells[0].innerHTML = i;
    }
}

Live example:http://jsfiddle.net/v9ujy/3/

EDIT: Updated to prevent rows with the star from being at the beginning and end of the sorted rows.

Solution 2:

Take a look at jQuery and jQuery UI and all the available plugins. You may find something on there that fits your needs.

I'm thinking along the lines of drag'n'drop support to move your rows up and down.

Solution 3:

I won't give the complete solution, but instead I will say that should have asked how to move an element from one parent to another, and then you can apply the button login as you wish.

You can accomplish that by using an element appendChild function

The code bellow will place the element form2 into the first line of your table (which is the parent element of the form1 element).

document.form1.parentElement.appendChild(document.form2)

You should be able to improve the logic by adding unique ids to your elements, so that you can manipulate them by using the getElementById function from the document and also you should consider using a javascript framework such as jQuery or Prototype to help you manipulate the DOM elements