php 通过Javascript删除手动添加的表行

e4yzc0pl  于 2023-04-10  发布在  PHP
关注(0)|答案(1)|浏览(106)

我正在尝试为以前创建的表单创建一个编辑表单，我想从该表中添加/删除行。
问题是我不能删除手动添加的行。我搜索了很多，终于明白应该实现事件委托，但不知道如何以及在哪里做。当然，删除按钮在页面重新加载后工作，但当然页面重新加载是不需要的。
任何帮助appriciated。
HTML Button在页面加载时通过PHP从数据库获取默认ID。ie remove_42，其中42是从db检索的。
添加功能：

  • 克隆最后一行并删除内容，
  • 在数据库中创建一个新行，并通过 AJAX 获取最后创建的行的id
  • 将此ID分配给新按钮ID。
$('#add').click(function() {
        var ele = $('.itemslists tbody tr:last');
        var ele_clone = ele.clone();
        ele_clone.find('input, select').prop("disabled", false).val('');
        ele_clone.find('td div.dummy').removeClass('has-error has-success');
        ele_clone.find('td div.input-icon i').removeClass('fa-check fa-warning');
        ele_clone.find('input').val('0');
        ele_clone.find('td:last').show();
        ele.after(ele_clone);
            
        $('.remove').show();
            
        var hash1g = '<?php echo $podata_hash; ?>';
        var hash2g = '<?php echo $podata_hash2; ?>';
            
        $.ajax({
            type: 'POST',
            url: 'cbdelrow.php',
            cache: false,
            data: {action: 'add_row', hash1: hash1g, hash2: hash2g },
    
            success: function(response) {
                 ele_clone.find('.remove').val(response);
                 var newId = "remove_" + response;
                 ele_clone.find('td button').attr("id", newId);
            }
        });
    });

删除功能：

  • 拆分id以获得行id
  • 使用行id通过 AJAX 删除数据库中的相关行
  • 重新计算金额等
$(document).on("click", ".remove", function() {
        
    rows = $('table#tbl_edit tr:last').index() + 1;
    if (rows == 2) {
        processForm();
        $('.remove').hide();
        
        $(this).parent().remove();
        update_amounts();
        
    } else if (rows == 1) {
        $('.remove').hide();
            
    } else {
        processForm();
        update_amounts();
        $(this).parent().remove();
                        
    }
}); 
function processForm() { 
    var btn_id = this.id;
    var row_id = btn_id.split('_')[1];
    $.ajax( {
        type: 'POST',
        url: 'cbdelrow.php',
        data: { btn_val: row_id },
        success: function(response) {
            // Silme islemi basariliysa gerekli islemler yapilir.
            $("button[value='"+row_id+"']").closest('tr').remove();
            update_amounts();   
        },
        error: function(xhr, status, error) {
            alert('Error while delete.');
        }
    } );
}

// Bind click event to remove buttons
$('.remove').click(processForm);

编辑：添加HTML部分

<table class="table table-bordered" style="width: auto; min-width:880px; vertical-align:middle;">
        <tr class="head headtop">
            <td width="100px"><?php echo $language['quantity']; ?></td>
            <td width="520px"><?php echo $language['product-desc']; ?></td>
            <td width="180px"><?php echo $language['cost-center']; ?></td>
            <td width="80px"><?php echo $language['fixture']; ?></td>
            <td width="130px"><?php echo $language['unit-price']; ?></td>
            <td width="80px" style="text-align:center;"><?php echo $language['tax']; ?></td>
            <td width="130px"><?php echo $language['total-price']; ?></td>
            <td width="30px" style="background-color:#fff;"><div align="right"><button type="button" name="add" id="add" class="buttonaddline btn-success btn-xs">+</button></div></td>
        </tr>
    </table>
    <table class="table table-bordered itemslists" style="width: auto; min-width:880px;" id="tbl_edit">
        <tbody>
            <?php
                while($row = $result->fetch_array()) {
            ?>
            <tr>
                <td width="100px"><input type="text" name="item_qty[]" id="item_qty" class="item_qty form-control aaa" value="<?php echo $row['item_qty']; ?>" /></td>
                <td width="520px"><input type="text" name="item_name[]" id="item_name" class="form-control" value="<?php echo $row['item_name']; ?>" /></td>
                <td width="180px">
                    <select name="item_dvsn[]" class="form-control">
                    <?php
                        foreach ($costcenters as $costcenter) {
                            $selectedcc = ($costcenter == $row['item_dvsn']) ? "selected" : "";
                            echo "<option value='$costcenter' $selectedcc>$costcenter</option>";
                        }
                    ?>
                    </select>
                </td>
                <td width="80px">
                    <select name="item_fixture[]" class="form-control">
                        <option class="limit" value="<?php echo $language['opt-yes']; ?>" <?php $selects = "selected"; if ($row['item_fixture'] == $language['opt-yes']) { echo $selects; } else { } ?>><?php echo $language['opt-yes']; ?></option>
                        <option class="limit" value="<?php echo $language['opt-no']; ?>" <?php $selects = "selected"; if ($row['item_fixture'] == $language['opt-no']) { echo $selects; } else { } ?>><?php echo $language['opt-no']; ?></option>
                                            
                    </select>
                </td>
                <td width="130px"><input type="text" name="item_unitp[]" id="item_unitp" class="item_unitp form-control sss" style="text-align:right;" value="<?php echo $row['item_unitp']; ?>" /></td>
                <td width="80px"><input type="text" name="item_tax[]" id="item_tax" class="item_tax form-control ddd" style="text-align:center;" value="<?php echo $row['item_tax']; ?>" /></td>
                <td width="130px"><input type="text" name="item_totalp[]" id="item_totalp" class="item_totalp form-control fff" style="text-align:right;" value="<?php echo $row['item_totalp']; ?>" /></td>
                                            
                <td class="hide"><input type="text" name="item_id[]" class="borderless editbg left" style="display:none;" value="<?php echo $row['item_id']; ?>" /></td>
                <td><button type="button" id="remove_<?php echo $row['item_id']; ?>" name="remove" data-row="" value="<?php echo $row['item_id']; ?>" class="remove buttonremoveline btn-danger btn-xs">-</button></td>
            </tr>
            <?php } ?>
        </tbody>
    </table>

编辑2：添加了渲染的HTML

<table class="table table-bordered itemslists" style="width: auto; min-width:880px;" id="tbl_edit">
        <tbody>
            <tr>
                <td width="100px"><input type="text" name="item_qty[]" id="item_qty" class="item_qty form-control aaa" value="2"></td>
                <td width="520px"><input type="text" name="item_name[]" id="item_name" class="form-control" value="2"></td>
                <td width="180px">
                    <select name="item_dvsn[]" class="form-control">
                        <option value="Genel Yönetim">Genel Yönetim</option> 
                        <option value="Satış">Satış</option>
                        <option value="Pazarlama">Pazarlama</option>                             
                    </select>
                </td>
                <td width="80px">
                    <select name="item_fixture[]" class="form-control">
                        <option class="limit" value="Evet" selected="">Evet</option>
                        <option class="limit" value="Hayır">Hayır</option>                                  
                    </select>
                </td>
                <td width="130px"><input type="text" name="item_unitp[]" id="item_unitp" class="item_unitp form-control sss" style="text-align:right;" value="3"></td>
                <td width="80px"><input type="text" name="item_tax[]" id="item_tax" class="item_tax form-control ddd" style="text-align:center;" value="0"></td>
                <td width="130px"><input type="text" name="item_totalp[]" id="item_totalp" class="item_totalp form-control fff" style="text-align:right;" value="6,00"></td>
                                        
                <td class="hide"><input type="text" name="item_id[]" class="borderless editbg left" style="display:none;" value="10"></td>
                <td><button type="button" id="remove_10" name="remove" data-row="1" value="10" class="remove buttonremoveline btn-danger btn-xs">-</button></td>
            </tr>
            <tr>
                <td width="100px"><input type="text" name="item_qty[]" id="item_qty" class="item_qty form-control aaa" value="2"></td>
                <td width="520px"><input type="text" name="item_name[]" id="item_name" class="form-control" value="2"></td>
                <td width="180px">
                    <select name="item_dvsn[]" class="form-control">
                        <option value="Satış">Satış</option>
                        <option value="Pazarlama">Pazarlama</option>                                     
                    </select>
                </td>
                <td width="80px">
                    <select name="item_fixture[]" class="form-control">
                        <option class="limit" value="Evet" selected="">Evet</option>
                        <option class="limit" value="Hayır">Hayır</option>                              
                    </select>
                </td>
                <td width="130px"><input type="text" name="item_unitp[]" id="item_unitp" class="item_unitp form-control sss" style="text-align:right;" value="2"></td>
                <td width="80px"><input type="text" name="item_tax[]" id="item_tax" class="item_tax form-control ddd" style="text-align:center;" value="0"></td>
                <td width="130px"><input type="text" name="item_totalp[]" id="item_totalp" class="item_totalp form-control fff" style="text-align:right;" value="4,00"></td>                                
                <td class="hide"><input type="text" name="item_id[]" class="borderless editbg left" style="display:none;" value="89"></td>
                <td><button type="button" id="remove_89" name="remove" data-row="2" value="89" class="remove buttonremoveline btn-danger btn-xs">-</button></td>
            </tr>
            <tr>
                <td width="100px"><input type="text" name="item_qty[]" id="item_qty" class="item_qty form-control aaa" value=""></td>
                <td width="520px"><input type="text" name="item_name[]" id="item_name" class="form-control" value=""></td>
                <td width="180px">
                    <select name="item_dvsn[]" class="form-control">
                        <option value="Satış">Satış</option>
                        <option value="Pazarlama">Pazarlama</option>                                     
                    </select>
                </td>
                <td width="80px">
                    <select name="item_fixture[]" class="form-control">
                        <option class="limit" value="Evet">Evet</option>
                        <option class="limit" value="Hayır">Hayır</option>                              
                    </select>
                </td>
                <td width="130px"><input type="text" name="item_unitp[]" id="item_unitp" class="item_unitp form-control sss" style="text-align:right;" value=""></td>
                <td width="80px"><input type="text" name="item_tax[]" id="item_tax" class="item_tax form-control ddd" style="text-align:center;" value="0"></td>
                <td width="130px"><input type="text" name="item_totalp[]" id="item_totalp" class="item_totalp form-control fff" style="text-align:right;" value=""></td>
                                        
                <td class="hide"><input type="text" name="item_id[]" class="borderless editbg left" style="display:none;" value="109"></td>
                <td><button type="button" id="remove_109" name="remove" data-row="3" value="109" class="remove buttonremoveline btn-danger btn-xs">-</button></td>
            </tr>
        </tbody>
    </table>
php

1条答案

按热度按时间
lnlaulya

lnlaulya1#

你已经在你的$(document).on("click", ".remove", function() {})处理程序中使用了Event Delegation，所以我不太确定你的问题是什么。我猜你需要简化你的逻辑。我认为下面应该是好的：

$(document).on("click", ".remove", function() {
  const $button = $(this);
  const buttonId = $button.attr('id');
  const rowId = buttonId.split('_')[1];

  $.ajax({
    type: 'POST',
    url: '/cbdelrow.php',
    data: {
      btn_val: rowId
    },
    success: function(response) {
      // remove the row of the clicked button
      $button.closest('tr').remove();
      update_amounts();

      const $remove = $('.remove');
      
      // if there is only 1 .remove button remaining, hide it
      if ($remove.length === 1) {
        $remove.hide();
      }
    },
    error: function(xhr, status, error) {
      alert('Error while delete.');
    }
  });
});

Here是一个小提琴的例子。

赞(0）分享  回复(0）举报  2023-04-10
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com