如何创建可点击的数据表行,以及如何在单击时根据行中的值移动到其他页面

时间:2020-04-25 10:04:15

标签: javascript html jquery ajax

我已经创建了一个仅带有标题名称的引导数据表。当我填写表格时,表中的行值将动态变化。现在,当我单击表的任何行时,它应根据该行的id值将我重定向到另一个页面。现在,在我的情况下,如果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>

我是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;
 });
});

“详细信息”是我的控制器名称,“索引”是我的视图名称。它没有重定向到页面。 预先感谢。

2 个答案:

答案 0 :(得分:2)

您可以这样做:

 $(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;
    });
 });

答案 1 :(得分:0)

<td>上使用onclick属性

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