如何通過點擊添加按鈕後暫存商店唯一行到html表格中？

對不起，我的英文不好，但我有一個選擇下拉工資頭（基本，PF，HRA等）和一個文本字段名稱數量和添加按鈕。我想知道如何通過點擊添加按鈕暫時存儲到HTML表格，然後發送到服務器。如何通過點擊添加按鈕後暫存商店唯一行到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>"); 


});

來源

2015-11-11 Rammehar Sharma

基本上，使用JS記錄您的數據。在向表中添加或更新條目時，請根據此JS變量檢查表單數據。然後在用戶做出每一個改變的時候在客戶端更新它。由於您已經在使用jQuery，因此請使用$ .post或$ .ajax來調用您的服務器以通過AJAX添加或更新，然後在數據庫上執行更新服務器端。 –

添加行是好的，但是當我試圖再次添加而不是更新插入的重複行 –

那麼你在做什麼呢？ 'var salary = {};'什麼也沒有。在添加像'salary [salary_head_name] = amount'時更新。然後下一次更新相同的下拉列表時，您可以檢查'if（typeof salary [salary_head_name]！=='undefined'）'然後更新該值並更改表格行而不是調用'$ .append（）' –

嘗試做這樣的事情。

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

來源

2015-11-11 07:36:22

我已經試過你的代碼，但沒有發生任何事情仍然插入重複行 –

我已更新代碼再試一次它適用於我我已經測試它第一 –

感謝它的工作原理。你可以告訴我如何從該表中獲取數據以存儲到數據庫中 –

如何通過點擊添加按鈕後暫存商店唯一行到html表格中？

回答

相關問題