将链接属性设置为不起作用的元素，无法弄清原因

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函数。