单击添加按钮后如何临时将唯一行存储到html表中？

debugcn 发表于 Dev

拉梅哈尔·沙玛（Rammehar Sharma）

对不起，我的英语不好，但是我有一个带薪水Head（基本，PF，HRA等）的下拉列表，以及一个带有名称金额和添加按钮的文本字段。我想知道如何通过单击添加按钮临时存储到html表中，然后将其发送到服务器。

临时html表中的每一行都应该是唯一的。
删除按钮应该在此处以用于删除行。
如果更改金额并再次按下添加按钮，则应更新已存在的行。

下面是表格

<div class="form-group required">
  <label class="control-label col-lg-3">SalaryHead</label>
  <div class="col-lg-9">
  <?php
  $attributes = 'class="form-control input-sm" id="salary_head_list"';
  $options =array(
                    '' => '...Select...'
                 );
foreach($SalaryHeadList as $row){
$options[$row->SalaryHeadId] = $row->SalaryHeadName;
}

echo form_dropdown('salary_head_list',$options, '', $attributes);
?>
 </div>
</div>

<div class="form-group required">
                                                            <label class="control-label col-lg-3" for="amount">Amount</label>
                                                            <div class="col-lg-9">
                                                                <input  type="text" value="" class="form-control input-sm" name="amount" id="amount" placeholder="">
                                                            </div>
                                                        </div>
                                                        <div class="form-group">
                                                            <!-- Buttons -->
                                                            <div class="col-lg-offset-3 col-lg-6">
                                                                <button type="button" id="add_salary_head" class="btn btn-sm btn-default">Add</button>
                                                            </div>
                                                        </div>

这是我的jQuery代码：

var salary = {};
$('#add_salary_head').on('click',function(){
    var salary_head_id = $("#salary_head_list").val();
    var salary_head_name = $("#salary_head_list option:selected").text();
    var amount = $("#amount").val();
    if (salary_head_id == '' || amount == '')
    {
        alert("Please select Salary Head and Amount!");
        return false;
    }

    var newRow = $("<tr salaryHeadID=\"" + salary_head_id  + "\" />")
        .appendTo("#salary_head_table")
        .append("<td>" + salary_head_name + "</td>")
        .append("<td>" + amount + "</td>")
        .append("<td>delete</span></td>");


});

珊·哈利克（Shan Khaliq）

尝试做这样的事情。

var newRow = "<tr salaryHeadID=\"" + salary_head_id  + "\" >"
+ "<td>" + salary_head_name + "</td>"
+ "<td>" + amount + "</td>"
+ "<td>delete</td></tr>";

if ($('tr[salaryHeadID='+ salary_head_id +']').length) {
    $('tr[salaryHeadID='+ salary_head_id +']').replaceWith(newRow);
} else {
    $("#salary_head_table").append(newRow);
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。