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 bro。

更改此行代码：

<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();
    });
 });

隐藏并在循环中显示表行

1 个答案: