If you want to replace an entire `<tr>..</tr>` with a brand new or modified `<tr>`, you can do the following.

First locate the row you want to replace in jQuery, either with some id selector or through DOM traversal from an event like this:



    var $row = $(this).closest("tr")

Let's say you have an brand new HTML row that you'd like to replace it with. This could come from an AJAX call, somewhere on the page, or a modified version of the existing row, or just straight HTML:



    var newRow = $("<tr>  <td>1</td> <td>Bob</td> <td><i>23</i></td>  <tr>

If this was a plain HTML table, you could just do [`.replaceWith()`][1] like this:



<pre><code><del>$row.replaceWith($(newRow))</del>
</code></pre>

Buutttt, then DataTables doesn't know about it, so the next time you call [`$dt.draw()`][2], it'll change back.  Instead, you have to pass the new info into the DataTable by locating the row in DataTables and then handing it the new info.

> [**`row().data()`**][3] - data represents an array of string values that are the `innerHTML` of each `td`

So we need to convert the above row to something like this:



    ["1","Bob","<i>23</i>"]

Here's a function that converts a row to a data table array:



    function TrToData(row) {
       return $(row).find('td').map(function(i,el) {
        	return el.innerHTML;
       }).get();
    }

So the whole thing will look something like this:



    $('.replace').click(function () {
        var $row = $(this).closest("tr")
        var newRow = $("#newRow").find("tr")[0].outerHTML
  			
        var newRowDataArray = TrToData(newRow)  
        $dt.row($row).data(newRowDataArray).draw();
    });

### [Demo in jsFiddle][4]

### Demon in Stack Snippets





    $(function() {
    	  // initialize table
        var $dt = $('#example').DataTable({
            paging:   false,
            bFilter: false, 
            bInfo: false
        });
        
     		// add row
        $('#addRow').click(function () {
            //$dt.row.add( [1,2,3] ).draw();
            var newRow = $("#newRow").find("tr")[0].outerHTML
            $dt.row.add($(newRow)).draw();
        });
        
        // replace row
        $('.replace').click(function () {
        		var $row = $(this).closest("tr")
            var newRow = $("#newRow").find("tr")[0].outerHTML
      			
            var newRowDataArray = TrToData(newRow)  
      
            //$row.replaceWith($(newRow))
            //data represents an array of string values that are the innerHTML of each td
            $dt.row($row).data(newRowDataArray).draw();
            
        });
        
        function TrToData(row) {
         	 return $(row).find('td').map(function(i,el) {
            	return el.innerHTML;
           }).get();
        }
     
    });



    <link href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/jquery.dataTables.css" rel="stylesheet"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/js/jquery.dataTables.js"></script>


    <table id="example" class="display" cellspacing="0" >
      <thead>
        <tr>
          <th>Hidden</th>
          <th>Name</th>
          <th>Age</th>
          <th>Replace</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Line 1 <input type="hidden" value="1"/> </td>
          <td>Bob    <input type="hidden" value="Bob"/> </td>
          <td><input type="text" value="18"/> </td>
          <td><input type="button" value="Replace" class="replace"/> </td>
        </tr>
      </tbody>
    </table>

    <br/>
    <button id="addRow">Add New Row</button>

    <table id="newRow" style="display:none">
      <tbody>
        <tr >
          <td>Line 2 <input type="hidden" value="2"/>   </td>
          <td>Ann    <input type="hidden" value="Ann"/> </td>
          <td><input type="text" value="21"/> </td>
          <td><input type="button" value="Replace" class="replace"/> </td>
        </tr>
      </tbody>
    </table>



[1]: http://api.jquery.com/replacewith/
[2]: https://datatables.net/reference/api/draw()
[3]: https://datatables.net/reference/api/row().data()
[4]: https://jsfiddle.net/KyleMit/5aaa9cmj/

I have an existing jQuery dataTables object in my html page.

I need to update a few `<a href>` elements in all `<td>`s on the first `<tr>` of the datatables by clicking on a refresh button which triggers an Ajax call to retrieve the new data in JSON.

The `<a href>` elements are dynamically constructed with the hyper links retrieved by Ajax, so I need to have the html for each `<a href>` element.

    <tr id="LoJXi76DH3" role="row" class="odd">
        <td><a data-transition="pop" data-mini="true" data-position-to="window" data-rel="popup" href="#deleteThisRunModel" onclick="copyRunModelObjId(&quot;LoJXi76DH3&quot;);" title="Delete this job"><img width="16" height="16" src="css/img/Remove24.png"></a></td>
        <td><span>LoJXi76DH3</span></td>
        <td><span>500</span></td>
        <td><span>Completed</span></td>
        <td><span>Firstname Lastname</span></td>
        <td><span>9/12/2015, 1:07:39 PM</span></td>
        <td><span>9/12/2015, 1:18:47 PM</span></td>
        <td><span>Successful</span><span> </span><a title="Details" class="my-tooltip-btn ui-btn ui-alt-icon ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" data-transition="pop" data-rel="popup" href="#popupRMDetails_LoJXi76DH3">Details</a></td>
        <td><a target="_blank" href="View.jsp?res=500&amp;url=myImage.png">View</a><span> </span><a href="myServlet?action=exportForDownload&amp;jobOID=LoJXi76DH3">Download</a></td>
    </tr>

Just wondering which function/api should I use to get this done?