Question 177473 in Html Question posted in
Some basic documentation can be found here.

Is it possible to replace all the contents of the first row of an HTML table without assigning an ID to each <td> element?

I have a simple html table consisting table headers and a first row as shown below:

<html>
<table>
<thead>
<th>name</th>
<th>email</th>
</head>
<tr>
<td>Kipchoge</td>
<td>[email protected]</td>
</tr>
</table>

<input type="button" id="btn" value="btn" onClick="fn()"/>
</html>

How can I change all the contents of the first row with my custom text when I click the button?
I have tried assigning my new text directly to document.getElementByTagName("tr")[1].innerHTML with no success as shown in the code below:

function fn(){
var d = document.getElementsByTagName('tr');
var customtext = "";
d[1].innerHTML = customtext;
}
<table>
<thead>
<th>name</th>
<th>email</th>
</head>
<tr>
<td>Kipchoge</td>
<td>[email protected]</td>
</tr>
</table>
<input type="button" id="btn" value="btn" onClick="fn()"/>

I know that what I have done in the above code is trying to assign a new value to an existing innerHTML value which can be easily achieved when you use getElementById, but my idea is to change all the values of the first row once without assigning an id to each <td></td>.
Is there an alternative approach? Or what should I do to my approach in order to solve such a problem?

I tried changing existing innerHTML with new text as shown below:

d[1].innerHTML = customtext;

But that did not work.

Tags:

3

Answers


  1. 0

    Use the more powerful querySelector method to select elements from the DOM by using CSS Selectors. In your case you can select the first row with tbody tr:first-of-type.

    const firstTableRow = document.querySelector('tbody tr:first-of-type');

firstTableRow.cells[0].textContent = 'Foo';
firstTableRow.cells[1].textContent = '[email protected]';
    <table>
  <thead>
    <th>name</th>
    <th>email</th>
  </thead>

  <tbody>
    <tr>
      <td>Kipchoge</td>
      <td>[email protected]</td>
    </tr>
    
    <tr>
      <td>Kipchoge</td>
      <td>[email protected]</td>
    </tr>
  </tbody>
</table>
    Login or Signup to reply.
  2. 0

    The function getElementsByTagName returns a live HTMLCollection which is an array-like-object of elements. In your code you are trying to add text inside a table row node. Table row – or tr – is only allowed to have td elements inside it. In the following example, I am using innerHTML to set HTML that represents the that contains the td with the text inside them.

    function fn(){
  var tr = document.getElementsByTagName('tr')[0];
  tr.innerHTML = `<td>Text 1</td><td>Text 2</td>`;
}
    <table>
  <thead>
    <th>name</th>
    <th>email</th>
  </thead>
  <tr>
    <td>Kipchoge</td>
    <td>[email protected]</td>
  </tr>
</table>

<input type="button" id="btn" value="btn" onClick="fn()"/>
</html>
    Login or Signup to reply.
  3. 0

    You can iterate over the table heads in this way

    <html>
<table>
<thead>
<th>name</th>
<th>email</th>
</head>
<tr>
<td>Kipchoge</td>
<td>[email protected]</td>
</tr>
</table>

<input type="button" id="btn" value="btn" onClick="fn()"/>
</html>


// you can target thead and get all ths that are present inside it

const head = document.getElementById("thead-id") /* or */ document.querySelector('thead')
// if you don't want all th in thead only the ones in first row of the thead
//(incase you have more than one rows in thead)
const row = document.querySelector("thead tr:first-of-type") /* or */ document.querySelector("#thead-id tr:first-of-type")

const thList = head.querySelectorAll("th");
// or 
const thList = row.querySelectorAll("th");
// Now th list acts like a list or an array where you can target items using index or run a forEach loop
thList.forEach((th) => {
th.innerText = "customText"
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search