隱藏並顯示循環中的表行

Question

循環中的表格編輯按鈕正在隱藏，並在每次單擊編輯按鈕時顯示表格的第一行。 我需要使用自己的編輯按鈕來隱藏和顯示循環中的每一行。

  <?php 
        $counter = 0;
        foreach($db->getRecordSet($sqlRecord) as $row){ $counter += 1;
            ?>
            <tr id="rowDetails">
                <td> <?php echo($counter); ?> </td>

                <td > <?php echo($row['item_code']); ?> </td>
                <td > <?php echo($row['item_name']); ?> </td>
                <td > <?php echo($row['description']); ?> </td>
                <td > <?php echo($row['quantity']); ?> </td>
                <td > <?php echo($row['p_cost']); ?> </td>

                 <td ><input type="button" name="edit" id="edit" value="edit" onClick="hideRow()" /></td>
            </td>
        </tr>
                <tr  id="editContent" style="display:none;">
                <td class="w10" id="row1"><input type="text" class="form-control" name="item_code" id="item_code" value="<?php echo($row['item_code']); ?>" required="required" /></td>
        </tr>

                <?php
            }
        ?>   
            </tr>
    <?php } ?>
        </table>


 -------------------------
function hideRow(){
    if(
        document.getElementById('editContent').style.display=='none') {                                                       
        document.getElementById('editContent').style.display='';
        document.getElementById('rowDetails').style.display='none';
    } else {
        document.getElementById('editContent').style.display='none';
        document.getElementById('rowDetails').style.display='';
    }

Answer 1

嘗試使用jQuery的兄弟。

更改以下代碼行：

<td ><input type="button" name="edit" id="edit" value="edit" onClick="hideRow()" /></td>

至 ：

<td ><input type="button" name="edit" class="hide_button" /></td>

然后更改：

function hideRow(){
 if(
    document.getElementById('editContent').style.display=='none') {                                                       
    document.getElementById('editContent').style.display='';
    document.getElementById('rowDetails').style.display='none';
 } else {
    document.getElementById('editContent').style.display='none';
    document.getElementById('rowDetails').style.display='';
 }

至：

 $( document ).ready(function() {
    $(".hide_button").click(function(){
         $(this).parents('tr').hide();
    });
 });