我有表，在其中一列中显示添加和删除按钮;并在此表中包含确认按钮的嵌套表....我想隐藏添加按钮并显示删除按钮当用户点击确认使用jQuery兄弟姐妹功能...
非常感谢
$("#ElementTable").on("click", ".k1-grid-confirm", function () {
var elementRecordId = $(this).data("id");
alert("elementRecordId " + elementRecordId);
// need help here....
//$(".NastedElementTable").hide();
//$(this).parent().siblings(".k1-grid-Remove").show();
}
});
<div class="CustomTableBlock_01">
<table class="customTable_01" id="ElementTable">
<thead>
<tr>
<th class="SC_a1">
Element
</th>
<th class="SC_a2">
Marking-Scheme
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="SC_a1"> Practical </td>
<td class="SC_a2">
<input type="button" class="k-button k-button-icontext k1-grid-Add ComponentScheme_Add" data-id="1" name="button" value="Add">
<input type="button" class="k-button k-button-icontext k1-grid-Remove Element_Remove" data-id="1" name="button" value="Remove">
<table class="NastedElementTable" style="display: none;">
<thead>
<tr>
<th class="N_th">Mark Scheme Title</th>
<th class="N_th">Available-Mark</th>
<th class="N_th">Pass-Mark</th>
<th class="N_th">Merit-Mark</th>
<th class="N_th">Distinction-Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td class="N_td"><input type="text" value="" name="Input_Title_Element" id="1_DM" class="ElementDistinctionMark k-grid-input k-textbox_3"> </td>
<td class="N_td"><input type="text" value="" name="Input_AvailableMark_Element" id="1_AM" class="ElementAvailableMarks k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_PassMark_Element" id="1_PM" class="ElementPassMark k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_MeritMark_Element" id="1_MM" class="ElementMeritMark k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_DistinctionMark_Element" id="1_DM" class="ElementDistinctionMark k-grid-input k-textbox_4"></td>
</tr>
<tr>
<td colspan="5" class="NastedElementTableOptTd">
<div class="NastedElementTableOptBlock">
<input type="button" class="k-button k-button-icontext k1-grid-confirm Element_confirm" data-id="1" name="button" value="Confirm">
<input type="button" class="k-button k-button-icontext k1-grid-cancel Element_cancel" data-id="1" name="button" value="Cancel">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="SC_a1"> Essay </td>
<td class="SC_a2">
<input type="button" class="k-button k-button-icontext k1-grid-Add ComponentScheme_Add" data-id="2" name="button" value="Add">
<input type="button" class="k-button k-button-icontext k1-grid-Remove Element_Remove" data-id="2" name="button" value="Remove">
<table class="NastedElementTable" style="display: none;">
<thead>
<tr>
<th class="N_th">Mark Scheme Title</th>
<th class="N_th">Available-Mark</th>
<th class="N_th">Pass-Mark</th>
<th class="N_th">Merit-Mark</th>
<th class="N_th">Distinction-Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td class="N_td"><input type="text" value="" name="Input_Title_Element" id="2_DM" class="ElementDistinctionMark k-grid-input k-textbox_3"> </td>
<td class="N_td"><input type="text" value="" name="Input_AvailableMark_Element" id="2_AM" class="ElementAvailableMarks k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_PassMark_Element" id="2_PM" class="ElementPassMark k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_MeritMark_Element" id="2_MM" class="ElementMeritMark k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_DistinctionMark_Element" id="2_DM" class="ElementDistinctionMark k-grid-input k-textbox_4"></td>
</tr>
<tr>
<td colspan="5" class="NastedElementTableOptTd">
<div class="NastedElementTableOptBlock">
<input type="button" class="k-button k-button-icontext k1-grid-confirm Element_confirm" data-id="2" name="button" value="Confirm">
<input type="button" class="k-button k-button-icontext k1-grid-cancel Element_cancel" data-id="2" name="button" value="Cancel">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="SC_a1"> Performance </td>
<td class="SC_a2">
<input type="button" class="k-button k-button-icontext k1-grid-Add ComponentScheme_Add" data-id="3" name="button" value="Add">
<input type="button" class="k-button k-button-icontext k1-grid-Remove Element_Remove" data-id="3" name="button" value="Remove">
<table class="NastedElementTable" style="display: none;">
<thead>
<tr>
<th class="N_th">Mark Scheme Title</th>
<th class="N_th">Available-Mark</th>
<th class="N_th">Pass-Mark</th>
<th class="N_th">Merit-Mark</th>
<th class="N_th">Distinction-Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td class="N_td"><input type="text" value="" name="Input_Title_Element" id="3_DM" class="ElementDistinctionMark k-grid-input k-textbox_3"> </td>
<td class="N_td"><input type="text" value="" name="Input_AvailableMark_Element" id="3_AM" class="ElementAvailableMarks k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_PassMark_Element" id="3_PM" class="ElementPassMark k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_MeritMark_Element" id="3_MM" class="ElementMeritMark k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_DistinctionMark_Element" id="3_DM" class="ElementDistinctionMark k-grid-input k-textbox_4"></td>
</tr>
<tr>
<td colspan="5" class="NastedElementTableOptTd">
<div class="NastedElementTableOptBlock">
<input type="button" class="k-button k-button-icontext k1-grid-confirm Element_confirm" data-id="3" name="button" value="Confirm">
<input type="button" class="k-button k-button-icontext k1-grid-cancel Element_cancel" data-id="3" name="button" value="Cancel">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="SC_a1"> E1 </td>
<td class="SC_a2">
<input type="button" class="k-button k-button-icontext k1-grid-Add ComponentScheme_Add" data-id="4" name="button" value="Add">
<input type="button" class="k-button k-button-icontext k1-grid-Remove Element_Remove" data-id="4" name="button" value="Remove">
<table class="NastedElementTable" style="display: none;">
<thead>
<tr>
<th class="N_th">Mark Scheme Title</th>
<th class="N_th">Available-Mark</th>
<th class="N_th">Pass-Mark</th>
<th class="N_th">Merit-Mark</th>
<th class="N_th">Distinction-Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td class="N_td"><input type="text" value="" name="Input_Title_Element" id="4_DM" class="ElementDistinctionMark k-grid-input k-textbox_3"> </td>
<td class="N_td"><input type="text" value="" name="Input_AvailableMark_Element" id="4_AM" class="ElementAvailableMarks k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_PassMark_Element" id="4_PM" class="ElementPassMark k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_MeritMark_Element" id="4_MM" class="ElementMeritMark k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_DistinctionMark_Element" id="4_DM" class="ElementDistinctionMark k-grid-input k-textbox_4"></td>
</tr>
<tr>
<td colspan="5" class="NastedElementTableOptTd">
<div class="NastedElementTableOptBlock">
<input type="button" class="k-button k-button-icontext k1-grid-confirm Element_confirm" data-id="4" name="button" value="Confirm">
<input type="button" class="k-button k-button-icontext k1-grid-cancel Element_cancel" data-id="4" name="button" value="Cancel">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="SC_a1"> E2 </td>
<td class="SC_a2">
<input type="button" class="k-button k-button-icontext k1-grid-Add ComponentScheme_Add" data-id="5" name="button" value="Add">
<input type="button" class="k-button k-button-icontext k1-grid-Remove Element_Remove" data-id="5" name="button" value="Remove">
<table class="NastedElementTable" style="display: none;">
<thead>
<tr>
<th class="N_th">Mark Scheme Title</th>
<th class="N_th">Available-Mark</th>
<th class="N_th">Pass-Mark</th>
<th class="N_th">Merit-Mark</th>
<th class="N_th">Distinction-Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td class="N_td"><input type="text" value="" name="Input_Title_Element" id="5_DM" class="ElementDistinctionMark k-grid-input k-textbox_3"> </td>
<td class="N_td"><input type="text" value="" name="Input_AvailableMark_Element" id="5_AM" class="ElementAvailableMarks k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_PassMark_Element" id="5_PM" class="ElementPassMark k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_MeritMark_Element" id="5_MM" class="ElementMeritMark k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_DistinctionMark_Element" id="5_DM" class="ElementDistinctionMark k-grid-input k-textbox_4"></td>
</tr>
<tr>
<td colspan="5" class="NastedElementTableOptTd">
<div class="NastedElementTableOptBlock">
<input type="button" class="k-button k-button-icontext k1-grid-confirm Element_confirm" data-id="5" name="button" value="Confirm">
<input type="button" class="k-button k-button-icontext k1-grid-cancel Element_cancel" data-id="5" name="button" value="Cancel">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="SC_a1"> E3 </td>
<td class="SC_a2">
<input type="button" class="k-button k-button-icontext k1-grid-Add ComponentScheme_Add" data-id="6" name="button" value="Add">
<input type="button" class="k-button k-button-icontext k1-grid-Remove Element_Remove" data-id="6" name="button" value="Remove">
<table class="NastedElementTable" style="display: none;">
<thead>
<tr>
<th class="N_th">Mark Scheme Title</th>
<th class="N_th">Available-Mark</th>
<th class="N_th">Pass-Mark</th>
<th class="N_th">Merit-Mark</th>
<th class="N_th">Distinction-Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td class="N_td"><input type="text" value="" name="Input_Title_Element" id="6_DM" class="ElementDistinctionMark k-grid-input k-textbox_3"> </td>
<td class="N_td"><input type="text" value="" name="Input_AvailableMark_Element" id="6_AM" class="ElementAvailableMarks k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_PassMark_Element" id="6_PM" class="ElementPassMark k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_MeritMark_Element" id="6_MM" class="ElementMeritMark k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_DistinctionMark_Element" id="6_DM" class="ElementDistinctionMark k-grid-input k-textbox_4"></td>
</tr>
<tr>
<td colspan="5" class="NastedElementTableOptTd">
<div class="NastedElementTableOptBlock">
<input type="button" class="k-button k-button-icontext k1-grid-confirm Element_confirm" data-id="6" name="button" value="Confirm">
<input type="button" class="k-button k-button-icontext k1-grid-cancel Element_cancel" data-id="6" name="button" value="Cancel">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="SC_a1"> E4 </td>
<td class="SC_a2">
<input type="button" class="k-button k-button-icontext k1-grid-Add ComponentScheme_Add" data-id="7" name="button" value="Add">
<input type="button" class="k-button k-button-icontext k1-grid-Remove Element_Remove" data-id="7" name="button" value="Remove">
<table class="NastedElementTable" style="display: none;">
<thead>
<tr>
<th class="N_th">Mark Scheme Title</th>
<th class="N_th">Available-Mark</th>
<th class="N_th">Pass-Mark</th>
<th class="N_th">Merit-Mark</th>
<th class="N_th">Distinction-Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td class="N_td"><input type="text" value="" name="Input_Title_Element" id="7_DM" class="ElementDistinctionMark k-grid-input k-textbox_3"> </td>
<td class="N_td"><input type="text" value="" name="Input_AvailableMark_Element" id="7_AM" class="ElementAvailableMarks k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_PassMark_Element" id="7_PM" class="ElementPassMark k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_MeritMark_Element" id="7_MM" class="ElementMeritMark k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_DistinctionMark_Element" id="7_DM" class="ElementDistinctionMark k-grid-input k-textbox_4"></td>
</tr>
<tr>
<td colspan="5" class="NastedElementTableOptTd">
<div class="NastedElementTableOptBlock">
<input type="button" class="k-button k-button-icontext k1-grid-confirm Element_confirm" data-id="7" name="button" value="Confirm">
<input type="button" class="k-button k-button-icontext k1-grid-cancel Element_cancel" data-id="7" name="button" value="Cancel">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td class="SC_a1"> E5 </td>
<td class="SC_a2">
<input type="button" class="k-button k-button-icontext k1-grid-Add ComponentScheme_Add" data-id="8" name="button" value="Add">
<input type="button" class="k-button k-button-icontext k1-grid-Remove Element_Remove" data-id="8" name="button" value="Remove">
<table class="NastedElementTable" style="display: none;">
<thead>
<tr>
<th class="N_th">Mark Scheme Title</th>
<th class="N_th">Available-Mark</th>
<th class="N_th">Pass-Mark</th>
<th class="N_th">Merit-Mark</th>
<th class="N_th">Distinction-Mark</th>
</tr>
</thead>
<tbody>
<tr>
<td class="N_td"><input type="text" value="" name="Input_Title_Element" id="8_DM" class="ElementDistinctionMark k-grid-input k-textbox_3"> </td>
<td class="N_td"><input type="text" value="" name="Input_AvailableMark_Element" id="8_AM" class="ElementAvailableMarks k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_PassMark_Element" id="8_PM" class="ElementPassMark k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_MeritMark_Element" id="8_MM" class="ElementMeritMark k-grid-input k-textbox_4"></td>
<td class="N_td"><input type="text" value="" name="Input_DistinctionMark_Element" id="8_DM" class="ElementDistinctionMark k-grid-input k-textbox_4"></td>
</tr>
<tr>
<td colspan="5" class="NastedElementTableOptTd">
<div class="NastedElementTableOptBlock">
<input type="button" class="k-button k-button-icontext k1-grid-confirm Element_confirm" data-id="8" name="button" value="Confirm">
<input type="button" class="k-button k-button-icontext k1-grid-cancel Element_cancel" data-id="8" name="button" value="Cancel">
</div>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
答案 0 :(得分：3)
使用：
$(this).closest('table').siblings('.k1-grid-Add').hide();//hide add button
$(this).closest('table').siblings('.k1-grid-Remove').show();//showremove button