javascript - Replacing entire table row in dynamic table

Question

I have a dynamic table and I want to be able to replace an entire row with data from another page. I want to be able to replace the data over and over again without refreshing the page. I have made a fiddle here but can't understand why $("#rowid").replaceWith(newdata);does not seem work. If I change this to $("#2").replaceWith(newdata); then row 2 with id=2 gets replaced as expected.

What have I got wrong? Many thanks.

html

<div class="container">

<table class="table" id="data_table"><tbody><tr><th></th> <th></th><th></th>
</tr>
<tr class="table" id="1"><td></td><td class="prod">First cell</td><td class="prod">Second cell</td><td class="prod">Third Cell</td><td> <button type="button" id="btn1" class="add-row">Replace Row</button></td>
</tr>

  <tr class="table" id="2"><td></td><td class="prod">Fourth Cell</td><td class="prod">Fifth cell</td><td class="prod">Sixth Cell</td><td> <button type="button" id="btn2" class="add-row">Replace Row</button></td>
</tr>


  <tr class="table" id="3"><td></td><td class="prod">Seventh</td><td class="prod">Eighth</td><td class="prod">Ninth</td><td> <button type="button" id="btn3" class="add-row">Replace Row</button></td></tr>
  <tbody>
  </table>
</div>

Jquery

$('#data_table').on("click", "tr",function(){
 var btnid= $(this).attr("id");//Find button ID
 var rowid= $(this).closest('tr').attr("id");//Find row ID

   var newdata= '<tr class="table" id="4"><td></td><td class="prod">10</td><td class="prod">11</td><td class="prod">12</td><td><button type="button" id="btn1" class="add-row">Replace Row</button></td></tr>'; //Data to be replaced

alert(rowid); 
   $("#rowid").replaceWith(newdata); //Replace clicked row with data

    });

Answer 1

It's because "#rowid" is a string literal. Try: $("#"+rowid) You need to access your variable.