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

Question

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

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

我的代码中的任何错误

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

我在 jquery 的帮助下添加了行

var i=0;
                            $("button#savebutton").click(function(){                                    
                                var minAmt=$("#minAmt").val();
                                var maxAmt=$("#maxAmt").val();
                                var type=$("#type").val();  
                                i++;
                                var new_row = "<tr id='row"+i+"' class='info'><td class='minAmt'>" + minAmt + "</td><td class='maxAmt'>" + maxAmt + "</td><td class='type'>" + type + "</td><td><span class='editrow'><a class='fa fa-edit' href='javascript: void(0);'></a></span></td><td><span class='deleterow'><a class='glyphicon glyphicon-trash' href=''></a></span></tr>";
                                 $("table tbody").append(new_row);
                                 $("#minAmt").val($('td.maxAmt').last().text()).prop("disabled","disabled");
                                 $("#maxAmt").val('');
                                 //$("#type").val('');
                            });

                        $(document).on('click', 'span.deleterow', function () {
                                $(this).parents('tr').remove();
                               return false;
                        });
                        $(document).on('click', 'span.editrow', function () {
                        $("#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());
                        });

Answer 1

嗨，您可以点击此链接，我已经使用了您的代码并对其进行了更新。

链接： https : //jsfiddle.net/u7ycrxph/

更新代码：

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

Answer 2

使用replaceWith()

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

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

在编辑

$(document).on('click', 'span.editrow', function () {
  $("#currentRow").val($(this).closest("tr").attr("id"));
}):

在编辑模式下单击保存，创建一个带有更新值的新行模板，并用新行替换现有行。

  $("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("");
     }
  });