按选定值对表进行排序

时间:2011-07-09 20:15:31

标签: javascript

我有一个在线橄榄球游戏,我想创建一个页面,用户在一个只有一个列名称的表格中显示。如果他们从下拉列表中选择某些内容(速度,踢球等),则根据用户选择的内容对玩家进行排序。 这是我试图做的:

<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>
        <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> 

但它不起作用。有什么问题?

2 个答案:

答案 0 :(得分:1)

我强烈推荐像jQuery插件http://www.datatables.net/

这样的现成解决方案

答案 1 :(得分:1)

下面一行原始版本的[1]需要为[0](如图所示)。 javascript中的数组是从零开始的,第一个元素是0,而不是1.表行中只有一个单元格,所以我认为你想要第一个(只有)一个。第二个(用于从播放器数组中获取元素)我猜你也想使用第一个元素(名称)。

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

当我把这个(尽可能多)放在这里时,很容易发现这个错误:http://jsfiddle.net/TeAGw/5/

你有没有试过调试这个?如果您只是查看浏览器“无法正常工作”时报告的错误消息,您应该能够立即确定此错误的原因。所有三个主要的Web浏览器现在都集成了调试工具,我建议使用它们。