[Solved] Replacing entire table row in dynamic table

by


Instead of $("#rowid") you need to use $("#"+rowid) since rowid is the variable not a selector.

/* Latest compiled and minified JavaScript included as External Resource */$('#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>";
   
//alert(rowid);
   $("#"+rowid).replaceWith(newdata);
  
    });
    
  
    
   //$("#"+btn).click(function(){
  
    
  // });
/* Latest compiled and minified CSS included as External Resource*/

/* Optional theme */
@import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

solved Replacing entire table row in dynamic table