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

Question

抱歉我的英语不好，但我有一个包含工资头(基本、PF、HRA 等)的选择下拉列表以及一个包含姓名金额和添加按钮的文本字段。我想知道如何通过单击“添加”按钮临时存储到 html 表中，然后发送到服务器。

1. 临时 html 表中的每一行都应该是唯一的。
2. 应该有删除按钮来删除行。
3. 如果金额发生变化并再次按下添加按钮，则如果行已存在则应更新。

下面是表格

<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>");


});

Answer 1

尝试做这样的事情。

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);
}