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

标签 php jquery mysql

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

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


});

最佳答案

尝试做这样的事情。

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

关于php - 单击添加按钮后如何将唯一行临时存储到html表中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33645887/

相关文章:

Php搜索字符串(带通配符)

javascript - jQuery Multiselect 插件返回空长度(应该是 0?)

mysql - 强制在表末尾插入新记录?

php - SQLSTATE[HY093] : Invalid parameter number: parameter was not defined'

php - WAMP服务器: Calling a MySQL database through PHP files

php - 相当于PHP的Java Webservice Client UsernameToken

javascript - 从 Vue 应用程序外部访问 Vue 方法或事件

mysql - varchar 列的最大数值

php - 在 Symfony 1.4 中的每个 Action 后执行代码

javascript - 如何执行 href 链接以及 anchor 标记 <a> 中的 onClick 函数