CODEWITHSUNDEEP
javascripthtmlcss
Beşir Kassab
Beşir Kassab

Reputation: 33

Can I create clickable td tag with javascript?

My html code has "a" tag inside "td" tag like below code.

<td align="left"> <a href="besir.html" target="_blank">  KASSAB Besir </a> </td>

I want to add new clickable line to my table with javascript. My js code is given below.

const createTD = document.createElement('td');
const createTDA = document.createElement('a');
createTD.align = "left";
createTD.innerHTML = "SURNAME Name";
createTDA.setAttribute('href', 'https://www.exampleurl.com');
createTD.appendChild(createTDA);

A new row is added to the table but the above code is not working properly. td is created but not clickable.

Upvotes: 1

Views: 284

Answers (5)

Daniel Beck
Daniel Beck

Reputation: 21485

Your code is almost working; the mistake you made was setting the text in the innerHTML of the table cell, instead of the anchor tag -- so the link existed, it was just invisible because there was nothing inside it.

Here's a corrected version (with some extra code to demonstrate its usage, since you omitted the part that actually attaches anything to the DOM)

function AddTD() {

  const createTD = document.createElement('td');
  const createTDA = document.createElement('a');
  createTD.align = "left";
  createTDA.innerHTML = "SURNAME Name"; // <-- changed this
  createTDA.setAttribute('href', 'https://www.example.com');
  createTD.appendChild(createTDA);

  // added code to append the new cell to the table:
  document.getElementsByTagName('tr')[0].appendChild(createTD)
}
<table>
  <tr></tr>
</table>


<button onclick="AddTD()">Add</button>

It's maybe worth noting that you can do this more easily and readably by inserting the full html string instead of using individual DOM methods:

function AddTD() {

  const createTD = `<td align="left"><a href="//example.com">SURNAME name</a></td>`;

  document.getElementsByTagName('tr')[0].innerHTML += createTD
}
<table>
  <tr></tr>
</table>


<button onclick="AddTD()">Add</button>

Upvotes: 1

001
001

Reputation: 2059

let tableBody = document.getElementById('table-body');
let btn = document.getElementById('btn');

let href = 'https://google.com/';
let text = 'Google';

btn.addEventListener('click', () => {
  let link = 
    `<tr><td><a href="${href}" target="_blank">${text}</a></td></tr>`;
  tableBody.innerHTML += link;
});
table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
}

table {
  margin-bottom: 20px;
  width: 300px;
}
<table>
  <tbody id="table-body">
    <tr>
      <th>Name</th>
    </tr>
    <tr>
      <td>X</td>
    </tr>
    <tr>
      <td>Y</td>
    </tr>
  </tbody>
</table>

<button id="btn">ADD</button>

Upvotes: 0

AlexSp3
AlexSp3

Reputation: 2293

You are appending an empty <a> tag since you are not using innerHTML for it

createTD.innerHTML = "SURNAME Name";  // Incorrect

createTDA.innerHTML = "SURNAME Name";  // Correct

Try it here

const createTD = document.createElement('td');
const createTDA = document.createElement('a');
createTD.align = "left";
createTDA.innerHTML = "SURNAME Name";
createTDA.setAttribute('href', 'https://www.exampleurl.com');
createTD.appendChild(createTDA);

document.body.append(createTD);

Upvotes: 2

Antonio
Antonio

Reputation: 66

The problem here is that you're trying to make click on an empty a tag. Try to put some text on the a tag then you'll see that it works. In any case, if you are looking for add click function to any html tag, you can do that with listeners or adding the listener like the previous answer.

Upvotes: 0

bero
bero

Reputation: 87

You can try:

function createAnchorTag() {
                  
                // Create anchor element.
                let a = document.createElement('a'); 
                  
                // Create the text node for anchor element.
                let link = document.createTextNode("This is link");
                  
                // Append the text node to anchor element.
                a.appendChild(link); 
                  
                // Set the title.
                a.title = "This is Link"; 
                  
                // Set the href property.
                a.href = "https://example.org"; 
                  
                // Return newly anchor tag
                return a; 
            }

Upvotes: 0

Related Questions