Как перенаправить на другую страницу и передать параметр в URL из таблицы?

Как перенаправить на другую страницу и передать параметр в URL из таблицы? Я создал в шаблоне tornato что-то вроде этого

<table data-role="table" id="my-table" data-mode="reflow">
    <thead>
        <tr>
            <th>Username</th>
            <th>Nation</th>
            <th>Rank</th>
            <th></th>
        </tr>
    </thead>
    <tbody>
        {% for result  in players %}
        <tr>
            <td>{{result['username']}}</td>
            <td>{{result['nation']}}</td>
            <td>{{result['rank']}}</td>
            <td><input type="button" name="theButton" value="Detail"
                       ></td>
        </tr>
    </tbody>
    {% end %}
</table>

и я хотел бы, когда я нажимаю детали для перенаправления на /player_detail?username=username и показать все подробности об этом игроке. Я пробовал с href="javascript:window.location.replace('./player_info');" внутри тега ввода, но не знаю, как поместить результат ['username'].  Как это сделать?

Ответы

Ответ 1

Задайте имя пользователя как атрибут data-username для кнопки, а также класс:

HTML

<input type="button" name="theButton" value="Detail" class="btn" data-username="{{result['username']}}" />

JS

$(document).on('click', '.btn', function() {

    var name = $(this).data('username');        
    if (name != undefined && name != null) {
        window.location = '/player_detail?username=' + name;
    }
});​

EDIT:

Кроме того, вы можете просто проверить undefined && null, используя:

$(document).on('click', '.btn', function() {

    var name = $(this).data('username');        
    if (name) {
        window.location = '/player_detail?username=' + name;
    }
});​

Как указано в этом ответе

if (name) {            
}

будет оценивать значение true, если значение не указано:

  • null
  • undefined
  • NaN
  • пустая строка ("")
  • 0
  • ложь

В приведенном выше списке представлены все возможные значения фальши в ECMA/Javascript.

Ответ 2

Сделайте это:

<script type="text/javascript">
function showDetails(username)
{
   window.location = '/player_detail?username='+username;
}
</script>

<input type="button" name="theButton" value="Detail" onclick="showDetails('username');">

Ответ 3

Привязать кнопку, это делается с помощью jQuery:

$("#my-table input[type='button']").click(function(){
    var parameter = $(this).val();
    window.location = "http://yoursite.com/page?variable=" + parameter;
});

Ответ 4

Вот общее решение, которое не полагается на JQuery. Просто измените определение window.location.

<html>
   <head>
      <script>
         function loadNewDoc(){ 
            var loc = window.location;
            window.location = loc.hostname + loc.port + loc.pathname + loc.search; 
         };
      </script>
   </head>
   <body onLoad="loadNewDoc()">
   </body>  
</html>