使用freeze-table.js冻结列时单选按钮出现问题

时间:2020-09-18 06:49:07

标签: javascript jquery

我在第一列中有单选按钮,并且我试图冻结前三列。选择单选按钮后,如果滚动,则单选按钮显示为未选中。我可以知道为什么会这样吗。 (我猜这是克隆表的问题。)

这是代码:

$( document ).ready(function() {
    $(".table-multi-columns").freezeTable({
      'columnNum': 3,
      'headWrapStyles': { 'top': '0' }
    });
})
clone-head-table-wrap { margin-top: 0; }

.header {
    height: 150px;      
}

#header-sroll {
    position:fixed;
    height: 70px;
    background: rgb(255 115 37 / 75%);
    left:0;
    top:0;
    float:left;
    width:100%;
    -ms-transition:     all 0.3s ease-out;
    -moz-transition:    all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition:      all 0.3s ease-out;
    transition:         all 0.3s ease-out;

}
#header-sroll h1 {
    font-size: 30px;
    font-family: Arial;
    text-align: center;
    line-height: 50px;
     -ms-transition:    all 0.3s ease-out;
    -moz-transition:    all 0.3s ease-out;
    -webkit-transition: all 0.3s ease-out;
    -o-transition:      all 0.3s ease-out;
    transition:         all 0.3s ease-out;
}
#header-sroll.small {
    height: 70px;
    line-height: 40px;
    z-index: 99;
}
#header-sroll.small h1{
    height: 70px;
    line-height: 70px;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://yidas.github.io/jquery-freeze-table/dist/js/freeze-table.js"></script>

<div class="container-md">
<h3>Fixed Table Header & Columns Demo</h3>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque eu lorem sed pellentesque. Fusce finibus nisl in lectus vehicula pulvinar. Morbi dolor ligula, rutrum at est ultricies, vestibulum varius sapien. Donec a bibendum sem. Nunc ultricies, orci eu pellentesque pretium, quam sem condimentum libero, id accumsan lorem arcu nec metus. Nam sodales nulla non turpis interdum, ut auctor diam varius. Ut sit amet magna placerat, sagittis tellus ut, convallis augue. Integer id orci ac nunc finibus interdum tristique et augue.</p>

<p>LProin vel scelerisque odio. Etiam ut hendrerit massa. Cras sit amet consequat risus. Maecenas ac magna non purus ultricies maximus ac accumsan leo. Nam condimentum maximus orci sed ornare. Nullam nec ipsum mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas lectus dui, gravida at odio semper, vulputate facilisis libero. Sed vitae aliquet orci. Nam in orci vitae felis accumsan fringilla.</p>

<p>LDuis ut euismod justo, id gravida nisl. Vivamus nec orci nec quam sollicitudin luctus. Proin est quam, viverra quis lorem et, euismod finibus velit. Proin ultricies aliquam nisl eget lacinia. Donec nulla risus, fringilla ac imperdiet quis, placerat commodo turpis. Nam tristique, ante ut accumsan venenatis, felis nisi hendrerit nunc, eget sagittis dolor est a dolor. Quisque augue erat, lacinia ut posuere in, pellentesque ut ex. Nullam congue elit lorem, imperdiet elementum nibh suscipit id.</p>

<div class="table-multi-columns table-fill">
    <table cellspacing="0" class="table table-small-font table-bordered table-striped" style="min-width: 3400px;">
      <thead>
        <tr>
          <th rowspan="2">#</th>
          <th rowspan="2">Date</th>
          <th rowspan="2">Text</th>
          <th colspan="2">Bank (1930)</th>
          <th colspan="2">Eget kapital John Doe (2010)</th>
          <th colspan="2">Eget kapital Jane Doe (2020)</th>
          <th colspan="2">Utgående moms 25 % (2610)</th>
          <th colspan="2">Moms varuförvärv EU 25 % (2615)</th>
          <th colspan="2">Ingående moms 25 % (2640)</th>
          <th colspan="2">Ingående moms utland (2645)</th>
          <th colspan="2">Moms redovisningskonto (2650)</th>
          <th colspan="2">Momspliktiga intäkter (3000)</th>
          <th colspan="2">Inköp varor EU 25 % (4056)</th>
          <th colspan="2">Förbrukningsinventarier (5400)</th>
          <th colspan="2">Kontorsmaterial och trycksaker (6100)</th>
          <th colspan="2">Övriga externa tjänster (6500)</th>
          <th colspan="2">Bankavgifter (6570)</th>
          <th colspan="2">Årets resultat (8999)</th>
        </tr>
        <tr>
          <th>Credit</th>
          <th>Debit</th>
          <th>Credit</th>
          <th>Debit</th>
          <th>Credit</th>
          <th>Debit</th>
          <th>Credit</th>
          <th>Debit</th>
          <th>Credit</th>
          <th>Debit</th>
          <th>Credit</th>
          <th>Debit</th>
          <th>Credit</th>
          <th>Debit</th>
          <th>Credit</th>
          <th>Debit</th>
          <th>Credit</th>
          <th>Debit</th>
          <th>Credit</th>
          <th>Debit</th>
          <th>Credit</th>
          <th>Debit</th>
          <th>Credit</th>
          <th>Debit</th>
          <th>Credit</th>
          <th>Debit</th>
          <th>Credit</th>
          <th>Debit</th>
          <th>Credit</th>
          <th>Debit</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th data-columns="ledger-col-0">
          <div class="form-check">
              <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
              <label class="form-check-label" for="exampleRadios1"></label>
          </div>
          </th>
          <td data-priority="1" data-columns="ledger-col-1">2014-01-11</td>
          <td data-priority="1" data-columns="ledger-col-2">Office stuff</td>
          <td>100 SEK</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>25 SEK</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>75 SEK</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <th data-columns="ledger-col-0">
          <div class="form-check">
              <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option1" checked>
              <label class="form-check-label" for="exampleRadios2"></label>
          </div>          
          </th>
          <td data-priority="1" data-columns="ledger-col-1">2014-02-12</td>
          <td data-priority="1" data-columns="ledger-col-2">iPad</td>
          <td>5000 SEK</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>1250 SEK</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>3750 SEK</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <th data-columns="ledger-col-0">
          <div class="form-check">
              <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios3" value="option1" checked>
              <label class="form-check-label" for="exampleRadios3"></label>
          </div>          
          </th>
          <td data-priority="1" data-columns="ledger-col-1">2014-03-20</td>
          <td data-priority="1" data-columns="ledger-col-2">Office stuff</td>
          <td>100 SEK</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>25 SEK</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>75 SEK</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <th data-columns="ledger-col-0">
          <div class="form-check">
              <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios4" value="option1" checked>
              <label class="form-check-label" for="exampleRadios4"></label>
          </div>          
          </th>
          <td data-priority="1" data-columns="ledger-col-1">2014-04-11</td>
          <td data-priority="1" data-columns="ledger-col-2">iPhone</td>
          <td>7000 SEK</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>1750 SEK</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td>5250 SEK</td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
      </tbody>
      <tfoot>
      <tr>
        <th data-columns="ledger-col-0"></th>
        <th data-priority="1" data-columns="ledger-col-1"></th>
        <th data-priority="1" data-columns="ledger-col-2"></th>
        <th>12 200 SEK</th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th>3050 SEK</th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th>8000 SEK</th>
        <th></th>
        <th>150 SEK</th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
      </tr>
      </tfoot>
    </table>
</div>
    <p>LDuis ut euismod justo, id gravida nisl. Vivamus nec orci nec quam sollicitudin luctus. Proin est quam, viverra quis lorem et, euismod finibus velit. Proin ultricies aliquam nisl eget lacinia. Donec nulla risus, fringilla ac imperdiet quis, placerat commodo turpis. Nam tristique, ante ut accumsan venenatis, felis nisi hendrerit nunc, eget sagittis dolor est a dolor. Quisque augue erat, lacinia ut posuere in, pellentesque ut ex. Nullam congue elit lorem, imperdiet elementum nibh suscipit id.</p>

<p>LAenean rhoncus eros et dui tincidunt, non faucibus mauris condimentum. Mauris felis nisi, accumsan non magna ut, dignissim dapibus dui. Fusce est magna, aliquet ac pellentesque a, varius eu tortor. Aliquam erat volutpat. Fusce nec metus vitae magna rhoncus porttitor ac non sem. Nullam elementum velit eu metus mollis sodales. Morbi vitae nisl fringilla, congue mauris id, maximus metus. Morbi ut quam ut diam dignissim viverra non id dui. Sed ut rhoncus lacus. Praesent condimentum ultrices neque, sit amet porttitor mi sollicitudin ac.</p>


<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque eu lorem sed pellentesque. Fusce finibus nisl in lectus vehicula pulvinar. Morbi dolor ligula, rutrum at est ultricies, vestibulum varius sapien. Donec a bibendum sem. Nunc ultricies, orci eu pellentesque pretium, quam sem condimentum libero, id accumsan lorem arcu nec metus. Nam sodales nulla non turpis interdum, ut auctor diam varius. Ut sit amet magna placerat, sagittis tellus ut, convallis augue. Integer id orci ac nunc finibus interdum tristique et augue.</p>

<p>LProin vel scelerisque odio. Etiam ut hendrerit massa. Cras sit amet consequat risus. Maecenas ac magna non purus ultricies maximus ac accumsan leo. Nam condimentum maximus orci sed ornare. Nullam nec ipsum mi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Maecenas lectus dui, gravida at odio semper, vulputate facilisis libero. Sed vitae aliquet orci. Nam in orci vitae felis accumsan fringilla.</p>

<p>LDuis ut euismod justo, id gravida nisl. Vivamus nec orci nec quam sollicitudin luctus. Proin est quam, viverra quis lorem et, euismod finibus velit. Proin ultricies aliquam nisl eget lacinia. Donec nulla risus, fringilla ac imperdiet quis, placerat commodo turpis. Nam tristique, ante ut accumsan venenatis, felis nisi hendrerit nunc, eget sagittis dolor est a dolor. Quisque augue erat, lacinia ut posuere in, pellentesque ut ex. Nullam congue elit lorem, imperdiet elementum nibh suscipit id.</p>

<p>LAenean rhoncus eros et dui tincidunt, non faucibus mauris condimentum. Mauris felis nisi, accumsan non magna ut, dignissim dapibus dui. Fusce est magna, aliquet ac pellentesque a, varius eu tortor. Aliquam erat volutpat. Fusce nec metus vitae magna rhoncus porttitor ac non sem. Nullam elementum velit eu metus mollis sodales. Morbi vitae nisl fringilla, congue mauris id, maximus metus. Morbi ut quam ut diam dignissim viverra non id dui. Sed ut rhoncus lacus. Praesent condimentum ultrices neque, sit amet porttitor mi sollicitudin ac.</p>

0 个答案:

没有答案
相关问题