我在表中追加了一些行。现在,我想通过单击该行内的按钮来删除该行。我的添加逻辑有效,但是我无法使删除逻辑有效。
HTML:
<table style="background-color:#ffe6e6;width:50%;">
<tr><th colspan="6" style="border-bottom:1px solid #AAAAAA;">Credits</th></tr>
<tr><th>User</th><th>Account</th><th>Item</th><th>Unit Price</th> <th>Quantity</th><th>Amount</th></tr>
<tr id="student_entry">
<td>
<select name="account" class="form-control" required style="width: 100px;">
<option value=""><?php echo get_phrase('select_account');?></option>
<?php
$categories = $this->db->get_where('account', array('category1' => 'EXPENSE'))->result_array();
foreach ($categories as $row):
?>
<option value="<?php echo $row['componentId'];?>"><?php echo $row['description'];?></option>
<?php endforeach;?>
</select>
</td>
<td>
<select id="item_selector_holder" name="item[]" class="form-control" style="width: 100px; margin-left: 0px;">
<option value=""><?php echo get_phrase('select_item');?></option>
<?php $categories = $this->db->get('item')->result_array();
foreach ($categories as $row):
?>
<option value="<?php echo $row['componentId'];?>"><?php echo $row['itemName'];?></option>
<?php endforeach;?>
</select>
</td>
<td>
<input type="text" style="width: 80px;" name="unitPrice" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>"/>
</td>
<td>
<input type="text" style="width: 80px;" name="unitPrice" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>"/>
</td>
<td>
<input type="text" style="width: 80px;" name="quantity" data-validate="required" data-message-required="<?php echo get_phrase('value_required');?>"/>
</td>
<td>
<span style="margin-right: 0px; padding-left: 20px">
<input onclick="deleteParentElement();" type="button" style="width: 3px; font-weight: bold;font-size: large;" value="-"/>
</span>
</td>
</tr>
<tr id="student_entry_append2"></tr>
<tr><th> <input onclick="append_credit_table_row();" type="button" style="padding: 3px 8px;font-weight: bold;font-size: large;" value=" + "/> </th><th colspan="3">Total</th><th id="ttlcr">0.00</th></tr>
</table>
JavaScript:
<script type="text/javascript">
var blank_student_entry ='';
$(document).ready(function() {
//$('#bulk_add_form').hide();
blank_student_entry = $('#student_entry').html();
for ($i = 1; $i<1;$i++) {
$("#student_entry").append(blank_student_entry);
}
});
function append_credit_table_row()
{
$("#student_entry_append2").after('<tr>' +blank_student_entry +'</tr>');
}
// REMOVING INVOICE ENTRY
function deleteParentElement()
{
$(this).parent().parent().parent().remove();
}
</script>
请任何人可以提供帮助或提出解决方案?
最佳答案
您可以使用jQuery 函数来实现。
function deleteParentElement(item) {
$("tr").has($(item)).remove();
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete1"/>
This is a row 1
</span>
</td>
</tr>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete2"/>
This is a row 2
</span>
</td>
</tr>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete3"/>
This is a row 3
</span>
</td>
</tr>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete4"/>
This is a row 4
</span>
</td>
</tr>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete5"/>
This is a row 5
</span>
</td>
</tr>
<tr>
<td>
<span> <!-- important -->
<input onclick="deleteParentElement(this);" type="button" value="delete6"/>
This is a row 6
</span>
</td>
</tr>
</table>