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

将链接属性设置为某个元素无效，无法弄清原因

1 个答案: