替换动态表中的整个表行 [英] Replacing entire table row in dynamic table

问题描述

我有一个动态表，我希望能够用另一页中的数据替换整行. 我希望能够一遍又一遍地替换数据而无需刷新页面.我在此处开了个小提琴，但不明白为什么$("#rowid").replaceWith(newdata);似乎不起作用.如果我将其更改为$("#2").replaceWith(newdata);，则id = 2的第2行将按预期替换.

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.

我怎么了?非常感谢.

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

    });

推荐答案

您需要使用$("#"+rowid)而不是$("#"+rowid)，因为rowid是变量而不是选择器.

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>

这篇关于替换动态表中的整个表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！