javascript - 将链接属性设置为不起作用的元素并且无法找出原因

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