Question

我有一个动态表，我希望能够用另一个页面中的数据替换整行。我希望能够在不刷新页面的情况下反复替换数据。我做了一个小提琴here，但无法理解为什么$("#rowid").replaceWith(newdata);看起来不起作用。如果我将其更改为$("#2").replaceWith(newdata);，那么id = 2的第2行将按预期更换。

我有什么问题？非常感谢。

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

当前的问题是因为rowid是一个变量，但您将它用作字符串文字。您需要通过将变量的值连接到选择器来解决此问题：

$('#' + rowid).replaceWith(newdata);

$('#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>';
  
  $('#' + rowid).replaceWith(newdata);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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>

话虽如此，在每个id上使用增量tr属性的模式并不是一个好主意。首先，它使HTML更难维护，JS也不必要复杂。

更好的方法是使用DOM遍历来查找与单击按钮相关的tr。您还可以将HTML内容用作DOM中的源，以便HTML和JS不会过于紧密地耦合。考虑到这些要点，试试这个：

$('#data_table').on("click", ".add-row", function() {
  var $newdata = $('#data_table tr.clone').clone().removeClass('clone');
  $(this).closest('tr').replaceWith($newdata);
});

.clone {
  display: none; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.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="clone">
        <td></td>
        <td class="prod">10</td>
        <td class="prod">11</td>
        <td class="prod">12</td>
        <td><button type="button" class="add-row">Replace Row</button></td>
      </tr>
      <tr class="table">
        <td></td>
        <td class="prod">First cell</td>
        <td class="prod">Second cell</td>
        <td class="prod">Third Cell</td>
        <td> <button type="button" class="add-row">Replace Row</button></td>
      </tr>
      <tr class="table">
        <td></td>
        <td class="prod">Fourth Cell</td>
        <td class="prod">Fifth cell</td>
        <td class="prod">Sixth Cell</td>
        <td> <button type="button" class="add-row">Replace Row</button></td>
      </tr>
      <tr class="table">
        <td></td>
        <td class="prod">Seventh</td>
        <td class="prod">Eighth</td>
        <td class="prod">Ninth</td>
        <td> <button type="button" class="add-row">Replace Row</button></td>
      </tr>
    </tbody>
  </table>
</div>

Answer 2

因为"#rowid"是一个字符串文字。尝试：$("#"+rowid) 您需要访问您的变量。

Answer 3

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

＆＃13;

/* 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(){
  
    
  // });

＆＃13;

/* 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');

＆＃13;

<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>

＆＃13;

替换动态表中的整个表行

3 个答案: