时间戳

首页 > 解决方案 > 将 JavaScript 代码更改为仅展开下一行，而不是表中的所有下一行

javascript - 将 JavaScript 代码更改为仅展开下一行，而不是表中的所有下一行

问题描述

我对此很陌生，并试图弄清楚我之前的某个人已经实施并且我需要改变的东西是如何工作的。

我们有一张表，上面有 3 或 4 个标题，目前在它下面一行。使用 JavaScript，以便在单击一行时，它会展开以显示下一行。

我正在尝试做的是在仅在展开后显示的行之一中有另一个表。

            $(document).ready(function(){
            $("#report66 tr:odd").addClass("odd");
            $("#report66 tr:not(.odd)").hide();
            $("#report66 tr:first-child").show();
            $("#report66 tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
        });
.table.tableSection {
        display: table;
        width: 500%;
    }
    .table.tableSection thead, table.tableSection tbody {
        float: left;
        width: 100%;
    }
    .table.tableSection tbody {
        overflow: auto;
        height: 250px;
    }
    .table.tableSection tr {
        width: 100%;
        display: table;
        text-align: left;
    }
    .table.tableSection th, table.tableSection td {
        width: 33%;
    }
    .td, th {
    	border: 1px solid #dddddd;
    	text-align: left;
    	padding: 5px;
    	background-color: #00565c;
    	color: white;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table id='report66'>
    <tr>
        <th>Header1</th>
        <th>Header2</th>
        <th>Header3</th>
        <th>Header4</th>
    </tr>
    <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
    <tr>
    <td colspan='8'>
    Information
    Information
    <table>
        <th>Test</th>
        <tr>
        <td>Test</td>
    </table>
</table>

因此，您可以看到，在选择第一行数据时，它会展开并显示下一行。该行中的表格已折叠，您必须展开它。

主要问题是，我怎样才能改变它以使第二张桌子不折叠？（我不担心折叠它）

有很多不同的方法可以实现这一点，但我发现的每一种方法似乎都不符合我的需要。

使用原始代码片段进行编辑

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">  
$(document).ready(function(){
    $('#report66 tr.information-row').hide();
    $("#report66 tr:not(.information-row)").click(function(){
	$('#report66 tr.information-row').toggle();
  });
});
    </script> 
    <style>
    .new table {
  table-layout: fixed;
  width: 100% ;
}
</style>

<?php

 if($replacementpending >= 1)
   {

echo "<h4><center><b>Network | Pending Acceptance</b></center></h4>";

   $sql = "SELECT * FROM  `stock`.`replacements.joblog` WHERE `status` = 'Pending' AND `ownership` = 'Stock' ORDER BY `id` ASC";
   $retval = mysqli_query( $conn, $sql );

   if(! $retval ) {
      die('Could not get data: ' . mysqli_error());
   }
 echo
     "<table border='1'>
        <table id='report66'>
            <tr>
            <th style='background-color:#003033'>DB Ref</th>
            <th style='background-color:#003033'>Ticket Ref</th>
            <th style='background-color:#003033'>Item Requested</th>
            <th style='background-color:#003033'>Customer</th>
            <th style='background-color:#003033'><center><span class='glyphicon glyphicon-circle-arrow-down'></span></center></th>
        </tr>";
   while($row = mysqli_fetch_array($retval)) {
        echo "<tr>";
        echo
        "<td>{$row['id']}</td>".
         "<td>{$row['req_ticketref']}</td>".
        "<td>{$row['req_model']}</td>".
        "<td>{$row['req_customer']}</td>".
        "<td style='table-layout: fixed; width: 3%'><center><span class='glyphicon glyphicon-circle-arrow-down'></span></center></td>";
    }
echo
       "
       <tr class='information-row' style='background-color:#00181a'>
       <td colspan='8' style='background-color:#00181a'>
       ";
    echo " 
    <center><h4><b>Additional information</b></h4>
       <table style='table-layout: fixed; width: 70%'>
       <th style='background-color:#003033;text-align:right'>CI Name</th><td>{$row['ciref']}</td><tr>
       <th style='background-color:#003033;text-align:right'>Requested By</th><td>{$row['req_name']}</td><tr>
       <th style='background-color:#003033;text-align:right'>Ticket Reference</th><td>{$row['req_ticketref']}</td><tr>
       <th style='background-color:#003033;text-align:right'>Customer</th><td>{$row['req_customer']}</td><tr>
       <th style='background-color:#003033;text-align:right'>Date/Time Logged</th><td>{$row['datetimelogged']}</td><tr>
        </table>
        <br>
        <legend></legend>
    <h4><b>Delivery Details</b></h4>
        <table style='table-layout: fixed; width: 70%'>
        <th style='background-color:#003033;text-align:right'>End User Company Name</th><td>{$row['endusername']}</td><tr>
        <th style='background-color:#003033;text-align:right'>Address Line 1</th><td>{$row['address1']}</td><tr>
        <th style='background-color:#003033;text-align:right'>Address Line 2</th><td>{$row['address2']}</td><tr>
        <th style='background-color:#003033;text-align:right'>City</th><td>{$row['city']}</td><tr>
        <th style='background-color:#003033;text-align:right'>Post Code</th><td>{$row['postcode']}</td><tr>
        <th style='background-color:#003033;text-align:right'>Country</th><td>{$row['country']}</td><tr>
        </table>
        <br>
        </center>
       </td>
       </tr>
       ";

   }
   echo "</table>";
  }
  ?>

标签： javascripthtmlcss

解决方案

当你这样做时，$("#report66 tr:not(.odd)").hide();你实际上隐藏tr了主表中的所有元素，这些元素没有.odd类名。由于主表中有另一个表，因此此规则适用于其中的tr元素。

您可以显式显示内部表中的所有行：

            $(document).ready(function(){
            $("#report66 tr:odd").addClass("odd");
            $("#report66 tr:not(.odd)").hide();
            $("#report66 tr:first-child").show();
            $("#report66 tr table tr").show(); // Show all inner table rows
            $("#report66 tr.odd").click(function(){
                $(this).next("tr").toggle();
                $(this).find(".arrow").toggleClass("up");
            });
        });
.table.tableSection {
        display: table;
        width: 500%;
    }
    .table.tableSection thead, table.tableSection tbody {
        float: left;
        width: 100%;
    }
    .table.tableSection tbody {
        overflow: auto;
        height: 250px;
    }
    .table.tableSection tr {
        width: 100%;
        display: table;
        text-align: left;
    }
    .table.tableSection th, table.tableSection td {
        width: 33%;
    }
    .td, th {
    	border: 1px solid #dddddd;
    	text-align: left;
    	padding: 5px;
    	background-color: #00565c;
    	color: white;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<table id='report66'>
    <tr>
        <th>Header1</th>
        <th>Header2</th>
        <th>Header3</th>
        <th>Header4</th>
    </tr>
    <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
        <td>Data4</td>
    <tr>
    <td colspan='8'>
    Information
    Information
    <table>
        <th>Test</th>
        <tr>
        <td>Test</td>
    </table>
</table>

编辑

如果您想要多个可见单元格，在它们所在的行之后切换信息行的可见性，则可以简化脚本，您可以向该行添加特定类：

$(document).ready(function () {
  $('#report66 tr.information-row').hide();
  $("#report66 tr:not(.information-row)").click(function () {
    $(this).next().toggle();
  });
});
    .table.tableSection {
        display: table;
        width: 500%;
    }
    .table.tableSection thead, table.tableSection tbody {
        float: left;
        width: 100%;
    }
    .table.tableSection tbody {
        overflow: auto;
        height: 250px;
    }
    .table.tableSection tr {
        width: 100%;
        display: table;
        text-align: left;
    }
    .table.tableSection th, table.tableSection td {
        width: 33%;
    }
    .td, th {
    	border: 1px solid #dddddd;
    	text-align: left;
    	padding: 5px;
    	background-color: #00565c;
    	color: white;
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <table id='report66'>
    <tr>
      <th>Header1</th>
      <th>Header2</th>
      <th>Header3</th>
      <th>Header4</th>
    </tr>
    <tr>
      <td>Data1</td>
      <td>Data2</td>
      <td>Data3</td>
      <td>Data4</td>
    </tr>
    <tr class="information-row">
      <td colspan="8">
        Information
        Information
        <table>
          <th>Test</th>
          <tr>
            <td>Test</td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>Data5</td>
      <td>Data6</td>
      <td>Data7</td>
      <td>Data8</td>
    </tr>
    <tr class="information-row">
      <td colspan="8">
        Information 2
        Information 2
        <table>
          <th>Test</th>
          <tr>
            <td>Test</td>
          </tr>
        </table>
      </td>
    </tr>
  </table>

推荐阅读