使用AJAX或jQuery为动态表中的每一行创建一个超链接

时间:2019-01-02 06:22:36

标签: jquery json ajax

我需要为使用AJAX创建的表的每一行创建超链接。 通过URL传递值,然后使用jQuery或AJAX在另一个网页中获取它。

<script>
 $(document).ready(function() {

            $.getJSON("url here", function(data) {
                    console.log("data table set");
                    console.log("json fetching");

                    for (var i = 0; i < data.length; i++) {
                        var tName = data[i].tName;
                        var pName = data[i].Name;
                        var pType = data[i].prType;
                        tr = $('<tr/>');
                        tr.append("<td>" + data[i].tName + "</td>");
                        tr.append("<td>" + data[i].tName + "</td>");
                        tr.append("<td>" + data[i].prType + "</td>");

                        $('#table1').append(tr);
                        console.log("json fetch complete");

                        $('#table1').DataTable({
                            paginate: true,
                            searching: true,
                            ordering: true,
                            pageLength: 10,
                            select: true

                        });
                    });

            });       
</script>

我需要为表中的每一行提供一个超链接,并在超链接中传递表值之一。

3 个答案:

答案 0 :(得分:0)

使用锚标记指定超链接:

a

因此在您的表格中,将其作为数据放入单元格中,例如

test <- function(a = 1){
    no_cores <- detectCores()-1
    clust <- makeCluster(no_cores)
    force(a)    # <------------------------
    result <- parSapply(clust, 1:10, function(x){a + x})
    stopCluster(clust)
    return(result)
}

x = 1
test(x)
#  [1]  2  3  4  5  6  7  8  9 10 11

这也适用于JQuery-datatable。 如有必要,使用循环动态生成此html。

如果您希望传递数据,请使用查询字符串设置url的格式-这将是一个get请求。 如果要发出发布请求,则必须添加一个函数来单击事件并显式发出发布请求。

希望这会有所帮助!

答案 1 :(得分:0)

tr包装anchor tag会生成无效的HTML。您可以在tr上添加onclick,如下所示。

<tr onclick="window.location='http://www.yoururl.com?param='+ data[i].tName +';'" > //Or what ever you want to pass on next page

</tr>

答案 2 :(得分:0)

在项目中包含下划线Js

<script type="text/template" id="scriptDataTableTemplate">
    <tr>
        <td><%= tName %></td>
        <td><%= pName %></td>
        <td><%= pType %></td>
        <td class="text-center">
            <a href="/Home/List/<%= id %>">Edit</a>
        </td>
    <tr>
</script>

像这样创建模板并提供正确的ID

在您的js代码中使用此

var tmpl = _.template($('#scriptDataTableTemplate').html());
for (var i=0; i<data.length; i++){
    var id = data[i].Id;
    var tName = data[i].tName;
    var pName = data[i].Name;
    var pType = data[i].prType;
    var obj = {"id": id , "tName": tName, "pName": pName, "pType": pType};
    var html = tmpl(obj);
    $('#table1').append(html );
}
$('#table1').DataTable({
       paginate: true,
      searching:true,
      ordering: true,
      pageLength: 10,
      select: true

     });