How to update cell in row in javascript?

Question

How can i update the the row of particular cell in the table when button of that row is clicked. I tried but it does not work.

<table>
 <tbody>
    <tr>
        <td id="news">5</td>
        <td id="name">James</td>
        <td><button onclick="update_value(event)">Update value</button></td>
    </tr>
    <tr>
        <td id="news">6</td>
        <td id="name">Nayome</td>
        <td><button onclick="update_value(event)">Update value</button></td>
    </tr>
    <tr>
        <td id="news">9</td>
        <td id="name">Adrlin</td>
        <td><button onclick="update_value(event)">Update value</button></td>
    </tr>
 </tbody>
</table>

function update_value(event) {
    let clickedElem = event.target;
    let newValue = 88;
    let newName = Radi;
    event.target.id.value = newValue;
    
}

meine · Accepted Answer · 2021-01-05 07:32:01Z

1

const table = document.querySelector('table');

table.addEventListener('click', (e) => {
  const button = e.target.closest('button');
  
  if (!button) return;
  
  const parent = button.closest('tr');
  const news = parent.querySelector('.news');
  
  news.innerHTML = 1 + Math.floor((99 - 1) * Math.random());
});

<table>
 <tbody>
    <tr>
        <td class="news">5</td>
        <td class="name">James</td>
        <td><button>Update value</button></td>
    </tr>
    <tr>
        <td class="news">6</td>
        <td class="name">Nayome</td>
        <td><button>Update value</button></td>
    </tr>
    <tr>
        <td class="news">9</td>
        <td class="name">Adrlin</td>
        <td><button>Update value</button></td>
    </tr>
 </tbody>
</table>

Is there way we can solve this issue on button click instead addding addEventListener on table

const updateCell = (node) => {
  const parent = node.closest('tr');
  const news = parent.querySelector('.news');
  
  news.innerHTML = 1 + Math.floor((99 - 1) * Math.random());
};

<table>
 <tbody>
    <tr>
        <td class="news">5</td>
        <td class="name">James</td>
        <td><button onclick="updateCell(this)">Update value</button></td>
    </tr>
    <tr>
        <td class="news">6</td>
        <td class="name">Nayome</td>
        <td><button onclick="updateCell(this)">Update value</button></td>
    </tr>
    <tr>
        <td class="news">9</td>
        <td class="name">Adrlin</td>
        <td><button onclick="updateCell(this)">Update value</button></td>
    </tr>
 </tbody>
</table>

edited Jan 5, 2021 at 7:32

answered Jan 5, 2021 at 6:30

meine

2805 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Raul Sauco Over a year ago

While this code does answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value.

Akhi21 Over a year ago

Is there way we can solve this issue on button click instead addding addEventListener on table

Milan Tenk · Accepted Answer · 2021-01-05 07:20:23Z

In the html code the id-s need to be changed to class because if there are multiple html elements with the same id, the html will be invalid.

<table>
    <tbody>
        <tr>
            <td class="news">5</td>
            <td class="name">James</td>
            <td><button onclick="update_value(event)">Update value</button></td>
        </tr>
        <tr>
            <td class="news">6</td>
            <td class="name">Nayome</td>
            <td><button onclick="update_value(event)">Update value</button></td>
        </tr>
        <tr>
            <td class="news">9</td>
            <td class="name">Adrlin</td>
            <td><button onclick="update_value(event)">Update value</button></td>
        </tr>
    </tbody>
</table>

In the JavaScript code we need to find the parent tr element. Using the tr element we can find its children based on name and news class. The newName variable should be assigned with a string or the Radi variable should already exist with an assigned value. In my example, I used a string simply. Finally, the innerHTML of the two elements can be updated.

function update_value(event) {
     let clickedElem = event.target;
     let trElement = clickedElem.closest("tr");
     let nameElement = trElement.querySelector(".name");
     let newsElement = trElement.querySelector(".news");
     let newValue = 88;
     let newName = "Radi";
     newsElement.innerHTML = newValue;
     nameElement.innerHTML = newName;
}

Collectives™ on Stack Overflow

How to update cell in row in javascript?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related