Как создать интерактивные строки с датируемыми данными и при щелчке перейти на другую страницу в зависимости от значения в строке

Question

Я создал bootstrap данные только с именами заголовков. Значения строк в таблице будут поступать динамически, когда я заполняю форму. Теперь, когда я нажимаю на любую строку таблицы, она должна перенаправить меня на другую страницу, основанную на значении идентификатора строки. Теперь в моем случае, если ID = 3 и Name = Roger, он должен перенаправить меня на страницу, на которой ID отображается как 3, а Name как Roger.

       <table id="test">
        <thead>
            <tr>
                <th>
                    Name
                </th>
                <th>
                    Age
                </th>
                <th>
                    Game
                </th>
                <th>
                    ID
                </th>
            </tr>
        </thead>
    </table>

Я новичок ie в Jquery. Кто-нибудь может мне помочь с кодом jquery? Я создал такой запрос.

$(document).ready(function () {
$("tr").not(':first').click(function () {
    let name = $(this).find("td:first").text();
    let age = $(this).find("td:eq(1)").text();
    let game = $(this).find("td:eq(2)").text();
    let id = $(this).find("td:eq(3)").text();
    let newUrl = "/Details/Index/view?id=" + id + "&name=" + name;
    location.href = newUrl;
 });
});

Здесь Details - это имя моего контроллера, а Index - имя моего представления. Это не перенаправление на страницу. Заранее спасибо.

Answer 1

Вы можете сделать это так:

 $(document).ready(function() {
    $("tr").not(':first').click(function(){
       let id = $(this).find("td:first").text();
       let name = $(this).find("td:eq(1)").text();
       let newUrl = "http://example.com/view?id=" + id + "&name="  + name;
       location.href= newUrl;
    });
 });

Answer 2

используйте атрибут onclick для <td>

<table style="width:100%">
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Age</th>
    <th>Game</th>
  </tr>
  <tr onclick="document.location='www.url.com/01'" >
    <td>01</td>
    <td>Walter White</td>
    <td>50</td>
    <td>E.T. the Extra-Terrestrial</td>
  </tr>
  <tr onclick="document.location='www.url.com/02'" >>   
    <td>02</td>
    <td>Jesse Pinkman</td>
    <td>23</td>
    <td>Friday the 13th</td>
  </tr>
</table>

Используйте js для динамического добавления настраиваемого URL-адреса для каждой строки.