动态链接html表内容

时间:2015-02-19 12:40:06

标签: javascript jquery html

我是jQuery的新手。我有使用Bootstrap由jQuery显示的表内容。我想超链接每个值以链接到url。我不知道如何在另一个jQuery中嵌入jQuery来实现这一点。我使用了[href= "www.google.com/" + run_accession> run_accession ],但这并没有run_accession参数。

<table id="resultsTable" class="table table-hover">
<thead>
    <tr><th><input type="checkbox" id="selectAll" checked="true" \></th>
    <th class="sortable" sort-target="run_accession">Run</th>
    <th class="sortable" sort-target="experiment_accession">Experiment</th>

</thead>
<tbody id="results_display">
{% for sra in sra_page %}
<tr><td><input class="srasCb" checked="true" type="checkbox" name="sras" value="{{ sra.run_accession}}"\></td>
    <td>{{ sra.run_accession }}</td>
    <td>{{ sra.experiment_accession }}</td>
</tr>
{% endfor %}

<script>
var propagate_table = function(data) {
    $('#results_display').empty();

 for (i = 0; i < data.length; i++) {            

        $('#results_display').append('<tr><td> <input class = "srasCb"'
            + checkboxSelection +' type="checkbox" name="sras" value="' + run_accession +'"\></td><td>'
           // I want to make <td> as link to url as: www.example.com/data[i].fields.run_accession 
            +  data[i].fields.run_accession; + '</td><td>'
            + data[i].fields.experiment_accession + '</td><td>'
         );
      }
 }
</script>

非常感谢您的建议。

1 个答案:

答案 0 :(得分:0)

要使<td>表现为链接,您可以使用<td>循环中的jQuery构造函数创建for元素,并将click事件侦听器附加到它们,如下所示:

var container = $('#results_display');

for (i = 0; i < data.length; i++) { 

    // create elements using jquery
    var tr = $('<tr/>');
    var td1 = $('<td/>', {
        text: 'cell 1'
    });
    var td2 = $('<td/>', {
        text: 'cell 2'
    });

    // add click event listener to td1
    td1.click(function () {

        // go to url on click
        window.location.href = "http://google.com";
    });

    // append elements to container
    td1.appendTo(tr);
    td2.appendTo(tr);        
    tr.appendTo(container);
}

以下是有关创建元素http://api.jquery.com/jquery/#jQuery-html-ownerDocument

的jQuery文档