Sort table by selected value

I have an online rugby game and I want to make a page where users have displayed in a table with only one column player name. If they select something from the dropdown list (speed, kicking, etc), the players are sorted based on what user selected. Here is what I tried to do:

<script type="text/javascript">
var arr_head = ['name','age','ss','experience','leadership','weight','height','stamina','strength','breakthroughs','tackling,'handling','speed','kicking'];
var arr_ord = ['asc','asc','desc','desc','desc','desc','desc','desc','desc','desc','desc','desc','desc','desc'];
var arr_players = new Array();
var col = 0;
// the array bellow is generated with a function: $arr_players = player_list($teamid);
arr_players[0] = ['Bruce Ewing',20,151,2,3,84,182,21,22,21,23,24,23,17];
arr_players[1] = ['Barbu Frates',18,113,2,3,105,185,3,99,3,1,2,3,2];
arr_players[2] = ['Costi Buhaescu',24,116,2,1,95,198,2,99,2,3,4,4,2];
arr_players[3] = ['Corneliu Kirita',20,113,1,1,88,183,1,99,2,4,2,4,1];
arr_players[4] = ['Cristi Stelea',23,116,2,4,93,197,2,99,2,4,4,4,1];
arr_players[5] = ['Codrin Sarapatin',23,115,2,5,103,200,3,99,2,4,1,3,3];
arr_players[6] = ['Cosmin Tadici',19,113,1,5,99,203,2,99,2,1,2,4,3];
arr_players[7] = ['Dudu Dumea',21,115,1,5,87,179,2,99,3,3,2,4,2];
arr_players[8] = ['Dorian Hizo',24,115,1,4,98,195,4,99,3,2,1,3,3];
arr_players[9] = ['Ernest Cazacu',18,113,2,5,93,193,2,99,3,1,1,3,4];
arr_players[10] = ['Emil Siman',18,115,1,2,88,187,4,99,2,3,2,1,4];
arr_players[11] = ['Grigorie Banciu',20,116,2,5,102,198,3,99,2,4,2,4,2];
arr_players[12] = ['Horea Profis',19,112,2,5,104,185,3,99,2,2,3,1,2];
arr_players[13] = ['Iuliu Alexandrescu',19,112,1,4,99,174,3,99,1,2,4,1,2];
arr_players[14] = ['Ionut Halipa',20,117,2,4,87,171,2,99,4,4,2,1,5];
arr_players[15] = ['Ioan Ogasanu',20,120,1,5,85,198,4,99,4,4,3,3,3];
arr_players[16] = ['Larie Lozovan',19,115,1,5,102,180,3,99,4,4,2,1,2];
arr_players[17] = ['Mugur Buscan',20,114,1,3,93,192,2,99,1,2,2,3,5];
arr_players[18] = ['Nicusor Lucescu',22,113,2,4,94,193,4,99,2,2,2,3,1];
arr_players[19] = ['Olimpu Plesu',25,117,1,4,90,177,3,99,1,3,2,4,5];
arr_players[20] = ['Razvan Corlatean',23,112,1,1,92,194,1,99,2,3,4,1,2];
arr_players[21] = ['Sorin Halmageanu',21,115,1,4,101,193,2,99,2,2,2,3,5];
arr_players[22] = ['Sebi Ioanovici',21,116,1,3,104,179,2,99,4,3,2,3,3];
arr_players[23] = ['Titu Baldovin',25,113,2,2,100,185,2,99,3,3,2,2,2];
function sortMultiDimensional(a,b) {
    if (arr_ord[col] == 'asc')
        return ((a[col] < b[col]) ? -1 : ((a[col] > b[col]) ? 1 : 0));
    else
        return ((a[col] > b[col]) ? -1 : ((a[col] < b[col]) ? 1 : 0));
}
function sort_arr(crit) {
    for (i=0; i<arr_head.length; i++) {
        if (arr_head[i] == crit ) {
            col = i;
            arr_players.sort(sortMultiDimensional);
        }
    }
    var tbl = document.getElementById('players').getElementsByTagName('tr');
    for (i=0; i<arr_players.length; i++) {
            linie = i + 2;
            tbl[linie].getElementsByTagName('td')[1].innerHTML = arr_players[i][1];
    }
}
</script>

<table id="players" border="0" width="100%">
    <tr>
        &开发者_开发问答lt;th style="text-align: center;"><?php echo $text['PLAYERS']; ?></th>
    </tr>
    <tr>
        <td>
            <select onchange="sort_arr(this.options[selectedIndex].value)"> 
                <option></option>
                <option value="name"><?php echo $text['NAME']; ?></option> 
                <option value="age"><?php echo $text['AGE']; ?></option> 
                <option value="ss"><?php echo $text['SS']; ?></option> 
                <option value="experience"><?php echo $text['EXPERIENCE']; ?></option>
                <option value="leadership"><?php echo $text['LEADERSHIP']; ?></option>              
                <option value="weight"><?php echo $text['WEIGHT']; ?></option>              
                <option value="height"><?php echo $text['HEIGHT']; ?></option>      
                <option value="stamina"><?php echo $text['STAMINA']; ?></option>                
                <option value="strength"><?php echo $text['STRENGTH']; ?></option>              
                <option value="breakthroughs"><?php echo $text['BREAKTHROUGHS']; ?></option> 
                <option value="tackling"><?php echo $text['TACKLING']; ?></option>
                <option value="handling"><?php echo $text['HANDLING']; ?></option>              
                <option value="speed"><?php echo $text['SPEED']; ?></option> 
                <option value="kicking"><?php echo $text['KICKING']; ?></option> 
            </select>
        </td>
    </tr>   
    <tbody>
        <?php for($i=0; $i<count($arr_players); $i++) { ?>
            <tr><td><?php echo $arr_players[$i][1]; ?></td></tr>
        <?php } ?>  
    </tbody>
</table> 

But it doesn't work. What is wrong?

I would highly recommend an off-the-shelf solution like the jQuery plugin http://www.datatables.net/

The [1]'s from the original version of the line below needs to be [0] (as shown). Arrays in javascript are zero-based, the first element is 0, not 1. There is only one cell in the table rows so I think you want the first (only) one. The 2nd one (for getting the element from the player array) I am guessing you also want to use the first element (the name).

tbl[linie].getElementsByTagName('td')[0].innerHTML = arr_players[i][0];

This error was easily found when I put this (as much as possible) in a fiddle here: http://jsfiddle.net/TeAGw/5/

Did you try to debug this at all? If you had simply looked at the error message reported by the browser when it "did not work" you should have been able to instantly determine the cause of this error. All three major web browsers now have integrated debugging tools, I recommend using them.