Dynamic link html table contents

debugcn Published at Dev

Xerox Shah

I am new to jQuery. I have table contents displayed by jQuery using Bootstrap. I want to hyperlink for each value to be link to url. I don't know how to embed jQuery inside another jQuery to make this happen. I used [href= "www.google.com/" + run_accession> run_accession ] but this doesn't take run_accession parameter.

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

Would highly appreciate your suggestions.

CrowbarKZ

To make <td> behave as a link you can create <td> elements using jQuery constructor inside your for loop and attach click event listeners to them, something like this:

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

Here is jQuery documentation about creating elements http://api.jquery.com/jquery/#jQuery-html-ownerDocument

Collected from the Internet

Please contact [email protected] to delete if infringement.