个人中心
gpt4 book ai didi

javascript - 某些表的行应保持相同的宽度，而其他行则不

转载 作者：行者123 更新时间：2023-11-28 04:45:36 25 4
gpt4 key购买 nike

我有一张 table ，上面有一些 trs。

有些 tr-s 是可见的，有些是不可见的。

在 init 中可见的 tr-s，我们将调用:mainTrs。

当点击可见的 tr 时，所有具有其 id 的类的 tr-s 都将可见。

再次点击时，所有打开的tr-s都将关闭。

当不可见变为可见时，表格“跳跃”。

我希望 mainTrs 与其 td-s 保持相同的宽度..

(以及其他人在打开时打开)。

例如:

在 Init 中，假设这是表:

enter image description here

现在，这些行在切换时应保持相同的宽度。

良好的结果:

enter image description here

enter image description here

如您所见，init 中的行(红色和蓝色)保持相同的宽度。

其他行变得更大，但不影响蓝色和红色 trs。

糟糕的结果:

enter image description here

enter image description here

这很糟糕，因为红色和蓝色行比初始化的要大。

我尝试为 mainTrs 使用 max-width 但没有成功。

这是我的 table :

<table>
    <tr id="a123" onclick="toggleTable(this)" data-isOpen="false">
        <td>name</td>
        <td>last name</td>
    </tr>
    <tr class="tr_a123 hidden">
        <td>this is my first cell</td>
        <td>this is my second cell</td>
    </tr>
    <tr class="tr_a123 hidden">
        <td>another text</td>
        <td>another text</td>
    </tr>
    <tr id="a456" onclick="toggleTable(this)" data-isOpen="false">
        <td>name</td>
        <td>last name</td>
    </tr>
    <tr class="tr_a456 hidden">
        <td>wow</td>
        <td>more text</td>
    </tr>
    <tr class="tr_a456 hidden">
        <td>something</td>
        <td>sometimes</td>
    </tr>
</table>

这是我的javascript:

function toggleTable(element) {
    var isNeedToShowMore = $(element).attr('data-isOpen') == "false";
    $(element).attr('data-isOpen', isNeedToShowMore);

    var elementId = $(element).attr('id');
    if (isNeedToShowMore) {
        $('tr.tr_' + elementId).show();
    }
    else {
        $('tr.tr_' + elementId).hide();
    }
}

这是我的 fiddle :

http://jsfiddle.net/52kj3b8m/

最佳答案

你得到这样的空格是因为你使用的是 <table> 。表格列将采用最大内容的大小，因此如果每个单元格的宽度与其上方和下方的单元格的宽度相同，您将获得您不希望看到的那种间距。为了更好地理解我的意思，请向 <td> 添加边框。使用 Accordion 可以实现您想要的结果。

片段 1 说明了内容呈现不理想的原因。

片段 2 是 Accordion ，请记​​住此演示使用 jQuery 、 jQuery UI 和 Dark Hive theme 。

片段 1

function toggleTable(element) {
    var isNeedToShowMore = $(element).attr('data-isOpen') == "false";
    $(element).attr('data-isOpen', isNeedToShowMore);

    var elementId = $(element).attr('id');
    if (isNeedToShowMore) {
        $('tr.tr_' + elementId).show();
    }
    else {
        $('tr.tr_' + elementId).hide();
    }
}
td {
  border: 2px dashed red;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr id="a123" onclick="toggleTable(this)" data-isOpen="false">
        <td>name</td>
        <td>last name</td>
    </tr>
    <tr class="tr_a123 hidden">
        <td>this is my first cell</td>
        <td>this is my second cell</td>
    </tr>
    <tr class="tr_a123 hidden">
        <td>another text</td>
        <td>another text</td>
    </tr>
    <tr id="a456" onclick="toggleTable(this)" data-isOpen="false">
        <td>name</td>
        <td>last name</td>
    </tr>
    <tr class="tr_a456 hidden">
        <td>wow</td>
        <td>more text</td>
    </tr>
    <tr class="tr_a456 hidden">
        <td>something</td>
        <td>sometimes</td>
    </tr>
</table>

片段 2

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1, user-scalable=no">
  <title>Accordions</title>
  <link href='http://code.jquery.com/ui/1.12.1/themes/dark-hive/jquery-ui.css' rel='stylesheet'>
  <style>
    d
  </style>
</head>

<body>
  <header>

  </header>
  <main>
    <section class='rows'>
      <dl>
        <dt>Header 1</dt>
        <dd>
          <p>
            Yoggothog mg f'athg ep hrii orr'e 'fhalma hafh'drn phlegeth, nglui ron phlegeth mnahn' throd 'fhalma chtenff R'lyeh bug, Chaugnar Faugnnyth nog hai nw ebunma llll 'ai naYoggoth, grah'noth nwagl ph'hlirgh nog syha'h Yoggoth cya. Ch' namnahn' f'li'hee uaaah
            'fhalma Nyarlathotepog 'fhalma r'luh ya shugg vulgtlagln, y'hah ngfhtagn n'ghft y-fm'latgh k'yarnak hafh'drn Cthulhu llll. Shtunggli ftaghu Chaugnar Faugn uaaah nog kadishtu lw'nafh mg ehye y'hah goka, y-ee gokaoth hupadgh nalw'nafh zhro orr'e
            shugg stell'bsna ph''ai, geb nnnch' li'hee grah'nnyth cr'luh Azathoth kadishtu y-n'gha nnngnaiih. Cphlegeth orr'e 'bthnk Nyarlathotep shagg shugg ph'Azathoth nggeb stell'bsna, cthrod shogg n'gha zhro sgn'wahl orr'e shogg sgn'wahl, nnnhai shugg
            goka k'yarnak fhtagnnyth uh'e Shub-Niggurath.
          </p>
          <p>
            Zhro fhtagn Nyarlathotep n'gha 'bthnk geb ftaghu gotha tharanaknyth f''fhalma grah'n, f'ilyaa naflshtunggli nnnchtenff ebunma gof'nn fm'latghyar mnahn' Tsathoggua y-shugg. Tharanak uln h'stell'bsna n'ghaog naflli'hee shtunggli h'Cthulhu geb shogg ch',
            ph'gnaiih wgah'n ngshogg y'hah r'luhyar orr'e ftaghu wgah'n, h'shugg shoggnyth syha'h wgah'n navulgtm nak'yarnak geb stell'bsna. Gof'nn uh'e ngk'yarnak sll'ha Hastur fm'latgh Yoggoth naflnglui ilyaaagl, hlirgh li'hee tharanak Yoggoth ilyaa
            Yoggoth ya, ch' nilgh'ri orr'eog f'sgn'wahl nglui ilyaa goka. Vulgtlagln ep sll'hanyth n'ghft shogg mg naflhupadgh cnog, ph'mg grah'nyar nw grah'n 'bthnk 'ai uaaah ngvulgtlagln, chtenff nnnfm'latgh 'bthnk ch' hrii vulgtm.
          </p>
          <p>
            Lloig nog zhro 'bthnk R'lyeh 'fhalma nglui sll'ha uln, bug Yoggoth epyar stell'bsna shugg ebunma nnnorr'e, chrii h'syha'h sll'ha lloig f'wgah'n ph'gotha hlirgh. Sgn'wahl syha'h y-ehye fm'latgh vulgtlagln h'nog naflehye mg Azathoth naorr'e nnnhafh'drn,
            naflChaugnar Faugn y-hrii wgah'n naep 'fhalma Azathoth wgah'n naflr'luh ilyaa ooboshu Nyarlathotep, h'Tsathoggua Shub-Niggurath y-hai mg lw'nafh Nyarlathotep uh'e cron nahupadgh.
          </p>
        </dd>

        <dt>Header 2</dt>
        <dd>
          <iframe id='ifrm1' name='ifrm1' src='http://w3schools.com' width='90%'></iframe>
        </dd>

        <dt>Header 3</dt>
        <dd>
          <video id="vid1" class="vid" src="http://html5demos.com/assets/dizzy.mp4" width='500' controls></video>
        </dd>

      </dl>
    </section>
  </main>
  <footer>

  </footer>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
  <script>
    $(function() {
      $('.rows').accordion({
        collapsible: true,
        header: 'dt',
        heightStyle: 'content',
        active: false
      });
    });
  </script>
</body>

</html>

关于javascript - 某些表的行应保持相同的宽度，而其他行则不，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/40983694/

25 4 0
文章推荐： c++ - 当销毁包含该线程的对象时，线程在自身上调用 thread.detach()
文章推荐： javascript - 第一次尝试Jquery-Draggable跳转容器
文章推荐： javascript - Highcharts 数据点图像
文章推荐： javascript - CefSharp执行javascript并获取值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com