使嵌入超級鏈接

的問題上遵循公認的迴應，我能得到表中所示的JS小提琴下面

`var data = {"data":[{"student_name":"jack","subjects":{"math":{"cat1_grade":"30","cat2_grade":"39","cat3_grade":"38"},"english":{"cat1_grade":"30","cat2_grade":"39","cat3_grade":"38"},"swahili":{"cat1_grade":"30","cat2_grade":"39","cat3_grade":"38"}},"subject1_average":"35","subject2_average":"26","subject3_average":"59"}]}; 

/* Formatting function for row details - modify as you need */ 
function format (d) { 
    // `d` is the original data object for the row 
    var header = false; 
    var detail_table = $("<table></table>",{ 
     "cellpadding":"5", 
     "cellspacing": "0", 
     "border": "0", 
     "style":"padding-left:50px;" 
    }); 
    var tbody = $("<tbody></tbody>"); 
    detail_table.append(tbody); 
    $.each(d.subjects, function(k, v){ 
     var tbody_row = $("<tr></tr>").append($("<td></td>",{"text": k})); 
     if(!header){ 
      var thead = $("<thead></thead>"); 
      var thead_row = $("<tr></tr>") 
      thead_row.append($("<th></th>",{"text":" "})); 
      $.each(v, function(a, b){ 
       thead_row.append($("<th></th>",{"text":a})); 
       tbody_row.append($("<td></td>",{"text":b})); 
      }); 
      thead.append(thead_row); 
      detail_table.append(thead);   
      header = true; 
     }else{ 
      $.each(v, function(a, b){ 
       tbody_row.append($("<td></td>",{"text":b})); 
      }); 
     } 
     tbody.append(tbody_row);  
    }); 
    return detail_table; 
} 

$(document).ready(function() { 
    var table = $('#example').DataTable({ 
     "ajax": { 
      "url": '/echo/js/?js=' + encodeURIComponent(JSON.stringify(data)), 
     }, 
     "columns": [ 
      { 
       "className":  'details-control', 
       "orderable":  false, 
       "data":   null, 
       "defaultContent": '' 
      }, 
      { "data": "student_name" }, 
      { "data": "subject1_average" }, 
      { "data": "subject2_average" }, 
      { "data": "subject3_average" } 
     ], 
     "order": [[1, 'asc']] 
    }); 

    // Add event listener for opening and closing details 
    $('#example tbody').on('click', 'td.details-control', function() { 
     var tr = $(this).closest('tr'); 
     var row = table.row(tr); 

     if (row.child.isShown()) { 
      // This row is already open - close it 
      row.child.hide(); 
      tr.removeClass('shown'); 
     } 
     else { 
      // Open this row 
      row.child(format(row.data())).show(); 
      tr.addClass('shown'); 
     } 
    }); 
});

工作JS Fiddle Link

但是，我真的想要得到一個詳細列成爲一個超鏈接。因此，具體如何讓學生的數學欄作爲超鏈接，以便當用戶點擊數學時，他們將被導航到math.html鏈接，例如「http://math.com」。

只是要清楚，我相信

$.each(v, function(a, b){ 
       tbody_row.append($("<td></td>",{"text":b})); 
      });

是創建該行的部分，我想是有該行的elemnt X是一個超鏈接，而所有其他元素可以文本。我不太瞭解JavaScript，所以我認爲{"text":b}將元素作爲文本添加到行中。但我不知道如何指定對象訴元素X是一個URL，同時保持V的元素的其餘部分，如文本

來源

2015-11-16 user595985

請參閱[此答案]（http://stackoverflow.com/questions/32760613/jquery-datatable-is-it-possible-to-bind-href-property-of-link-with-razor-syntax/32778950 ＃32778950） – markpsmith

變化：

var tbody_row = $("<tr></tr>").append($("<td></td>",{"text": k}));

到

var tbody_row = $("<tr></tr>").append($("<td></td>",{"html": '<a href="' + k + '.html">' + k + '</a>'}));

當構建主題爲math時，構建到math.html的鏈接。

查看updated jsFiddle的代碼和演示。

來源

2015-11-17 04:11:30

使嵌入超級鏈接

回答

相關問題