Question

我对jQuery很新，所以请记住这一点。我已经使用了jQuery的页面，我按照我想要的方式设置它。我现在遇到的问题是我无法格式化隐藏区域中的表格。

HTM：L

                <div class="flip">Screening</div>
                <div class="panel">
                    <table style="width:500px">
                        <tr>
                            <td style="width:100px">Test<td>
                            <td style="width:100px">Test<td>
                            <td style="width:100px">Test<td>
                            <td style="width:100px">Test<td>
                            <td style="width:100px"><a href="patient_profile.php?patientid=' .$patientid. '"><img src="images/document.png" width="33px" height="25px"><td>
                        </tr>
                    </table>
                </div>

jQuery：

$('.flip').click(function () {
 $(this).next('.panel').slideToggle(200)
});

CSS：

.panel,.flip
{
  margin-left: auto;
  margin-right: auto;
  width: 500px;
  padding:5px;
  text-align:center;
  background-color:#e5eecc;
  border:solid 1px #c3c3c3;
}
.panel
{
  width: 500px;
  padding:5px;
  display:none;
}

.panel th {
  text-align: center;
  vertical-align: middle;
  background-color: rgb(34,122,174);
  padding: 5px;
  border: 2px solid rgb(6, 23, 38);
  border-collapse: collapse;
  color: white;
  font-size: 1.1em;
}

.panel tr td {
  color: rgb(6, 23, 38);
  border: 2px solid rgb(6, 23, 38);
  border-collapse: collapse;
  padding: 5px;
}

.panel tr:nth-child(odd) {
  background-color: rgb(255, 255, 255);
}

.panel tr:nth-child(even) {
  background-color: rgb(217, 226, 243);
}

.panel a {
  text-decoration: none;
  color: blue;
  font-weight: bold;
}

.panel img {
  border: none;
}

就像我说的那样，它按照我的意愿工作，问题只在于该表的格式化，它是jQuery函数的一部分，用于显示/隐藏。它正确显示/隐藏了我想要的内容，但它没有从CSS中获取任何表格格式。 CSS正在为.flip和.panel工作，但与表格无关。

FIDDLE

Answer 1

创建一个在css文件中具有所需样式属性的类，但不要将其应用于您的类。

当您显示表格时，您可以使用jQuery将类添加到html文档中的元素，因此您可以将该类添加到表格中！然后它将获得您的样式属性：D

添加类的代码：

$("#table").addClass("table_style");

但您需要为表格提供一个ID，以便您可以选择它。

编辑：修复您的代码

你的代码错了，它应该是这样的：

<div class="flip">Screening</div>
     <div class="panel">
          <table style="width:500px">
              <tr>
                  <td style="width:100px">Test</td>
                  <td style="width:100px">Test</td>
                  <td style="width:100px">Test</td>
                  <td style="width:100px">Test</td>
                  <td style="width:100px"><a href="patient_profile.php?patientid=' .$patientid. '">
                      <img src="images/document.png" width="33px" height="25px" />
                  </td>
              </tr>
          </table>
      </div>

jQuery格式化显示/隐藏的表

1 个答案: