CodeIgniter 3:使用jquery在按钮上插入/删除html表行

时间:2017-10-02 07:30:23

标签: php jquery codeigniter

我是CodeIgniter的新手。我在桌面上插入/删除一个新的空行时遇到了一些麻烦。

按钮

<button class="btn btn-success" type="submit" name="add_item"  onClick="addMoreSib();" style="display:none" id="addSibling"><li class="fa fa-plus"></li></button> 

<button class="btn btn-danger" type="submit" name="del_item" onClick="deleteRow();" style="display:none" id="deleteSibling"><li class="fa fa-minus"></li></button> 

这里是jquery

function addMoreSib() {
                $("<td>").load("sib_input.php", function() {
                        $("#sibTable").append($(this).html());
                }); 
            }
function deleteRow() {
                    $('TR.product-item').each(function(index, item){
                        jQuery(':checkbox', this).each(function () {
                            if ($(this).is(':checked')) {
                                $(item).remove();
                            }
                        });
                    });
                }

sib_input.php

<tr class="product-item">
<td><input type="checkbox" name="item_index[]" /></td>
<td><input type="text" class="form-control form-input" value="+63-0000000000" placeholder="+63-00000000" disabled id="guardiancontact"></td>
<td><input class="form-control" name="sib_age[]" onKeyPress="return isNumberKey(event)" maxlength="2"></td>
<td><input class="form-control"name="sib_occupation[]"></td>
<td><select class="form-control" name="sib_educ_attain[]" >
        <option value="" selected>-Please select-</option>
        <option value="less than high school">less than high school</option>
        <option value="Some college but no degree">Some college but no degree</option>
        <option value="Associates Degree">Associates Degree</option>
        <option value="Elementary Graduate">Elementary Graduate</option>
        <option value="Secondary Graduate">Secondary Graduate</option>
        <option value="College Graduate">College Graduate</option>
        <option value="Master's Degree">Master's Degree</option>
        <option value="Professional Degree">Professional Degree</option>
        <option value="Doctorate Degree">Doctorate Degree</option>
        </select></td>  
</tr>

<script>
            function isNumberKey(evt)
            {
                var charCode = (evt.which) ? evt.which : event.keyCode
                if (charCode > 31 && (charCode < 48 || charCode > 57))
                        return false;
                    return true;
            }

</script>

Here is the image of how I wanted it.

问题在于,每次我点击&#34; +&#34;按钮表单提交和刷新codeigniter,我已经尝试过没有CodeIgniter,它工作正常。

如何在不刷新页面的情况下完成这项工作?

1 个答案:

答案 0 :(得分:2)

从&#39;提交&#39;更改按钮类型到&#39;按钮&#39;

<button class="btn btn-success" type="button" name="add_item"  onClick="addMoreSib();" style="display:none" id="addSibling"><li class="fa fa-plus"></li></button> 

<button class="btn btn-danger" type="button" name="del_item" onClick="deleteRow();" style="display:none" id="deleteSibling"><li class="fa fa-minus"></li></button>