Question

我的项目中有两个不同的Datatables实例。我希望它们具有不同的CSS样式。出于这个问题的目的，可以说我想在两个表中使用不同大小的边距。有没有简单的方法可以做到这一点？

下面是我的代码的简化版本。

表1

HTML和JS：

<script>
  $(document).ready( function () {
  $('#all_assets_datatable').DataTable({
  "sDom": "ltipr",
  });
  } );
</script>

    <table id="all_assets_datatable" class="display">

        # Various table content

    </table>

CSS：

table.dataTable {
margin: 0px;
}

表2

HTML和JS：

<script>
   $(document).ready( function () {
  $('#asset_changes_datatable').DataTable({
  "sDom": "ltipr",
  });
  } );
</script>

    <table id="asset_changes_datatable" class="display">

       # Various table content

    </table>

CSS：

table.dataTable {
margin: 10px;
}

Answer 1

将您的数据表包装在两个不同的div中，并为每个div赋予不同的名称或类。

.dtOne table.datatable{
     margin: 0px;
 }

.dtTwo table.datatable{
         margin: 10px;
     }

<div class="dtOne">//Table one goes here</div>
<div class="dtTwo">//Table two goes here</div>

Answer 2

您可以按id来捕获表格，使用id条件检查if，如果匹配通过CSS应用jQuery，如下所示。

var id = $('table').attr('id');
if (id == 'all_assets_datatable')
  $('table').css('margin', '0px')
else
  $('table').css('margin', '10px')

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="all_assets_datatable" class="display">
  <tr>
    <td>1</td>
  </tr>
</table>

将两个不同的CSS样式应用于两个不同的数据表？

2 个答案: