How to replace all td elements inside tr?

Question

I have html table on my parent page that has some data:

Begin Date  End Date    City
03/28/2017              Toronto 
03/25/2017  03/26/2017  Miami   
03/22/2017  03/24/2017  Chicago
03/16/2017  03/21/2017  Dallas  
03/10/2017  03/15/2017  Austin 

After use update the element from specific row I would like to replace entier content of that row. Each row had unique id. I have to do this with plain JavaScript Vanilla. Here is my example what I have so far:

fnObj.DATA is numeric and I get that after my ajax call is successfully completed. I use the id from that callback function to detect the row that I want to update. I'm not sure what is the best technique to replace all the td tags. This technique works with one exception. There is no id on the row that I have replaced the data. If anyone knows better way to do this please let me know. Thank you.

window.parent.document.getElementById("New_"+fnObj.DATA).outerHTML = "<td>"+document.getElementById("newBegDt").value+"</td><td>"+document.getElementById("newEndDt").value+"</td><td>document.getElementById("newCity").value</td>";
                        window.parent.document.getElementById(dType+"_"+fnObj.DATA).id = 'New_'+fnObj.DATA;

Answer 1

Try this:

var newtr = "<tr id='" + "New_"+fnObj.DATA  + "'><td>"+document.getElementById("newBegDt").value+"</td><td>"+document.getElementById("newEndDt").value+"</td><td>" + document.getElementById("newCity").value + "</td></tr>";

$("#New_"+fnObj.DATA ).replaceWith(newtr);

If you don't want to use jquery you can use something like:

var currentTr = document.getElementById("New_"+fnObj.DATA), parent = currentTr.parentNode,
tempDiv = document.createElement('div');

tempDiv.innerHTML =  "<tr id='" + "New_"+fnObj.DATA  + "'><td>"+document.getElementById("newBegDt").value+"</td><td>"+document.getElementById("newEndDt").value+"</td><td>" + document.getElementById("newCity").value + "</td></tr>";

var input = tempDiv.childNodes[0];

parent.replaceChild(input, currentTr);