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

Question

I am trying to set a link attribute to a field of a table, I think I am following the right steps, but I am missing something.

I have this function that creates a table out of VAR data . And What I wanted is to to transform the "first_name" field into a link (taken from the 'url' field of the object)

 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"] ); 

It is not working, and I don't know if it is just a small detail i am missing, or what I am trying is completely wrong.

pd: i am begging with javascript, so If my method is not right, i would be looking for something easy for my level...

Answer 1

As per my comment, you have to add actual text to the hyperlink for it to be clickable. The href attribute only specifies the url to visit on click, not the text that will be shown as the hyperlink.

 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: You're not using your field array. I guess the intention is to loop over it instead to create the table so you do not have to change the createTable function if a field name disappears, changes name, or is added.