將鏈接屬性設置為不起作用的元素，無法弄清原因

Question

我正在嘗試將鏈接屬性設置為表的字段，我想我正在按照正確的步驟進行操作，但是卻缺少一些內容。

我有此功能，可以根據VAR數據創建表。 我想要的是將“ first_name”字段轉換為鏈接（取自對象的“ url”字段）

 function createTable(data, field) { var tbody = document.getElementById("senate-data") for (var i = 0; i < data.length; i++) { var row = document.createElement("tr"); var cell1 = document.createElement("td"); var cell2 = document.createElement("td"); var cell3 = document.createElement("td"); var cell4 = document.createElement("td"); var cell5 = document.createElement("td"); var nameLink = document.createElement('a'); //created this var to later set the atrribute cell1.innerHTML = data[i].first_name; cell2.innerHTML = data[i].party; cell3.innerHTML = data[i].state; cell4.innerHTML = data[i].seniority; cell5.innerHTML = data[i].votes_with_party_pct; nameLink.setAttribute('href', data[i].url); cell1.appendChild(nameLink);//here i try to apend the var which is already a link, to the 'td' element ,getting the name turned into a link row.appendChild(cell1); row.appendChild(cell2); row.appendChild(cell3); row.appendChild(cell4); row.appendChild(cell5); tbody.appendChild(row);; } } createTable(data.results[0].members, ["first_name", "party", "state", "seniority", "votes_with_party_pct"] ); 

它不起作用，我不知道這只是我丟失的一個小細節，還是我嘗試的完全錯誤。

pd：我正在用javascript請求，所以如果我的方法不正確，我會為我的水平尋找簡單的方法...

Answer 1

根據我的評論，您必須將實際文本添加到超鏈接中才能單擊。 href屬性僅指定點擊時訪問的URL，而不指定將顯示為超鏈接的文本。

 var data = { results: [ { members: [ { first_name: 'John', party: 'Dems', state: 'AZ', seniority: 1, votes_with_party_pct: 37, url: '#john' }, { first_name: 'Jane', party: 'Reps', state: 'TX', seniority: 1, votes_with_party_pct: 15, url: '#jane' }, { first_name: 'Bob', party: 'Greens', state: 'CA', seniority: 2, votes_with_party_pct: 38, url: '#bob'}, { first_name: 'Alice', party: 'Indeps', state: 'NY', seniority: 3, votes_with_party_pct: 14, url: '#alice' } ] } ] }; function createTable(data, field) { var tbody = document.getElementById("senate-data") for (var i = 0; i < data.length; i++) { var row = document.createElement("tr"); var cell1 = document.createElement("td"); var cell2 = document.createElement("td"); var cell3 = document.createElement("td"); var cell4 = document.createElement("td"); var cell5 = document.createElement("td"); var nameLink = document.createElement('a'); //created this var to later set the atrribute // Add the name to the hyperlink instead. nameLink.appendChild( document.createTextNode( data[i].first_name )); nameLink.setAttribute('href', data[i].url); // Append the hyperlink to the cell. The name is now clickable as a hyperlink. cell1.appendChild(nameLink); cell2.innerHTML = data[i].party; cell3.innerHTML = data[i].state; cell4.innerHTML = data[i].seniority; cell5.innerHTML = data[i].votes_with_party_pct; row.appendChild(cell1); row.appendChild(cell2); row.appendChild(cell3); row.appendChild(cell4); row.appendChild(cell5); tbody.appendChild(row);; } } createTable(data.results[0].members, ["first_name", "party", "state", "seniority", "votes_with_party_pct"] ); 

 <table id="senate-data"></table> 

PS：您沒有使用field數組。 我想本來是要遍歷它而不是創建表，所以如果字段名稱消失，更改名稱或添加，則不必更改createTable函數。