javascript - 如何在 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');  
//....
});