Javascript 如何在jquery和HTML中动态编辑和更新表行

我正在动态地向表中添加行，现在我正在尝试编辑表中的行

我点击编辑，编辑值后，值进入文本框。我点击添加按钮，但我创建的新行未更新

我的代码有错误吗

<form class="form-horizontal" role="form" id="chargesForm">
            <div class="col-md-6">
                 <div class="form-group ">
                    <label for="minAmt" class="col-lg-4 control-label">MinAmmount</label>
                    <div class="col-lg-6">
                       <input type="text" class="form-control" id="minAmt" name="minAmt" />
                    </div>
                 </div>
                 <div class="form-group ">
                    <label for="maxAmt" class="col-lg-4 control-label">MaxAmmount</label>
                    <div class="col-lg-6">
                       <input type="text" class="form-control" id="maxAmt" name="maxAmt"/>
                    </div>
                 </div>

              </div>
              <div class="col-md-6">
                 <div class="form-group ">
                    <label for="type" class="col-lg-4 control-label">Type</label>
                    <select size="1" id="type" name="type">
                       <option value="Flat" selected="selected">
                          Flat
                       </option>
                       <option value="Percentage">
                          Percentage
                       </option>
                    </select>
                 </div>                   

              </div>

              <div class="col-md-12">
                 <div class="form-actions btnzone">
                    <button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;margin-left: 40%;" id="savebutton" ><i class="icon-check-sign" aria-hidden="false"></i>Add</button>
                    <a class="btn btn-danger" ><i class=""></i>Back</a>

                 </div>
              </div>
           </form>
           <form  class="form-horizontal" role="form" id="chargestableForm">
              <div class="col-md-12" style="height:150px;overflow:auto;margin-top:5px;">
                 <table id="charges" class="table table-hover" width="100%" cellspacing="0" style="border: 1px; height:10px;" >
                    <thead style="background-color:#CCE5FF">
                       <tr>
                          <th>MinAmmount</th>
                          <th>MaxAmmount</th>
                          <th>Type</th>                              
                          <th></th>
                          <th></th>
                       </tr>
                    </thead>
                    <tbody>     
                    </tbody>
                 </table>
              </div>
           </form>

米纳蒙特
Maxamount
类型
平的
百分比
添加
";
$（“表体”）.append（新的行）；
$（“#minAmt”）.val（$（'td.maxant'）.last（）.text（））.prop（“禁用”、“禁用”）；
$（“#最大金额”）.val（“”）；
//$（“#type”）.val（“”）；
});
$（文档）.on（'click'，'span.deleterow'，函数（）{
$（this.parents（'tr'）.remove（）；
返回false；
});
$（文档）.on（'click'，'span.editrow'，函数（）{
$（“#minAmt”）.val（$（this）.closest（'tr'）.find（'td.minAmt'）.text（））.prop（“disabled”，“disabled”）；
$（“#maxAmt”）.val（$（this）.closest（'tr'）.find（'td.maxAmt'）.text（））.prop（“disabled”，“disabled”）；
$（“#type”）.val（$（this.closest（'tr'）.find（'td.type'）.text（））；
});

使用

replaceWith（）

添加隐藏字段以指示正在编辑的行

<input type="hidden" id="currentRow"/>

在编辑模式下单击“保存”时，使用更新的值创建一个新行模板，并将现有行替换为新行

  $("button#savebutton").click(function(){  
     if($("#currentRow").val()){
       var row = $("table tbody").find('#'+$("#currentRow").val());
       // var updated_row = //Updated template of the existing row
       row.replaceWith (updated_row);
       $("#currentRow").val("");
     }
  });

---

您好，您可以点击这个链接，我已经使用了您的代码并更新了一个lil

链接：

更新代码：

 currentRow = null;
 $("button#savebutton").click(function(){ 
 //....

 if(currentRow){

                  $("table tbody").find($(currentRow)).replaceWith(new_row);
                              currentRow = null;
                             }
                             else{
                             $("table tbody").append(new_row);
                             }
....//
});

$(document).on('click', 'span.editrow', function () {
 currentRow= $(this).parents('tr');  
//....
});

---

每次单击

#savebutton

它都会添加一个新行，因为您有：

$（“table tbody”）.append（new#row）；

@Bla:好的，如何为编辑目的更改代码此行变量行=$（“table tbody”）.find（“#”+$（“#currentRow”）.val（））；打印[对象]编辑了我的答案谢谢@Dan，你帮了我一天的忙，我在这段代码中还有一个问题。这一行**$（“#minAmt”）.val（$（'td.maxant'）.last（）.text（））.prop（“disabled”，“disabled”）；**我得到了最后保存的最大值。假设我删除了最后保存的值，那么在该文本框中显示上一个最大值。如何更改我的代码？

  $("button#savebutton").click(function(){  
     if($("#currentRow").val()){
       var row = $("table tbody").find('#'+$("#currentRow").val());
       // var updated_row = //Updated template of the existing row
       row.replaceWith (updated_row);
       $("#currentRow").val("");
     }
  });

 currentRow = null;
 $("button#savebutton").click(function(){ 
 //....

 if(currentRow){

                  $("table tbody").find($(currentRow)).replaceWith(new_row);
                              currentRow = null;
                             }
                             else{
                             $("table tbody").append(new_row);
                             }
....//
});

$(document).on('click', 'span.editrow', function () {
 currentRow= $(this).parents('tr');  
//....
});