Question

我正在尝试使用JavaScript覆盖引导类。问题是显示的值由Javascript代码更改，但HTML行不显示。如果我在custom.css的样式块中使用！important，则会覆盖bootstrap并且JavaScript分配仍然是HTML行没有显示....有人可以告诉我这里有什么不对。我确实尝试使用ID，然后链接那些无效的元素(#id.class)。（代码在没有引导程序的情况下工作正常）

自定义css

body {
    margin-top:30px;
     }
 .hidden
  {
   display: none;
  }

HTML

<!DOCTYPE html>
<html >
<head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/custom.css">

 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <script> src="js/bootstrap.min.js"</script>


</head>
<body>
    <div class="container">
     <div class="row">
      <div class="col-md-8">

        <table  class="hidden table table-striped table-border">

            <tbody>
                <tr class="hidden">
                 <td>List ............</td>
                </tr>

                <tr class="hidden active">
                    <th>A</th>
                    <th>B</th>  
                    <th>C</th>
                    <th>D</th>
                </tr>
                <tr class="hidden">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                 <tr class="hidden">
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                </tr>
                <tr class="hidden">
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                </tr>
                 <tr class="hidden">
                    <td>13</td>
                    <td>14</td>
                    <td>15</td>
                    <td>16</td>
                </tr>
                <tr class="hidden">
                    <td>17</td>
                    <td>18</td>
                    <td>19</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
      </div>

     </div>
     <div class="well col-md-8">
      <p>Test Messages.........</p> 
     </div>
    </div>

</body>
<script type="text/javascript">

  var count=4;

  var activerows=document.getElementsByClassName("hidden");

    if(count <= activerows.length){
    for (var i=0; i<count; i++)
       {
       activerows[i].style.display="block";
       }
     }else
     {
        for (var i=0; i<activerows.length; i++) 
        {
          //  activerows[i].style.display='block';
         }
     }
</script>
</html>

Answer 1

如果 Bootstrap 是罪魁祸首，那么请不要使用它的类，只需使用自定义类 hideme或其他内容，然后使用 Javascript 就像我在下面的代码片段中所做的那样：

var count = 4;

var activerows = document.getElementsByClassName("hideme"),
    tablehasClass = document.getElementById("table").classList;

if (count <= activerows.length) {
  tablehasClass.remove("hideme");
  for (var i = 0; i < count; i++) {
    activerows[i].style.display = "table-row";
  }
} else {
  for (var i = 0; i < activerows.length; i++) {
    //  activerows[i].style.display='';
  }
}

body {
  margin-top: 30px;
}
.hideme {
  display: none;
}

<!DOCTYPE html>
<html>

<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <link rel="stylesheet" href="css/custom.css">

</head>

<body>
  <div class="container">
    <div class="row">
      <div class="col-md-8">

        <table id="table" class="hideme table table-striped table-border">

          <tbody>
            <tr class="hideme">
              <td>List ............</td>
            </tr>

            <tr class="hideme active">
              <th>A</th>
              <th>B</th>
              <th>C</th>
              <th>D</th>
            </tr>
            <tr class="hideme">
              <td>1</td>
              <td>2</td>
              <td>3</td>
              <td>4</td>
            </tr>
            <tr class="hideme">
              <td>5</td>
              <td>6</td>
              <td>7</td>
              <td>8</td>
            </tr>
            <tr class="hideme">
              <td>9</td>
              <td>10</td>
              <td>11</td>
              <td>12</td>
            </tr>
            <tr class="hideme">
              <td>13</td>
              <td>14</td>
              <td>15</td>
              <td>16</td>
            </tr>
            <tr class="hideme">
              <td>17</td>
              <td>18</td>
              <td>19</td>
              <td>20</td>
            </tr>
          </tbody>
        </table>
      </div>

    </div>
    <div class="well col-md-8">
      <p>Test Messages.........</p>
    </div>
  </div>

</body>

</html>

表非常热衷于其元素，因此永远不要将display: block我们display: table-row用于tr，将display: table-cell用于td，同样display: table table

Answer 2

您应该从元素中删除类，而不是从javascript设置样式。 或者，您可以将元素样式的cssText设置为display:block !important

var count=4;

  var activerows=document.getElementsByClassName("hidden");

    if(count <= activerows.length){
    for (var i=0; i<count; i++)
       {
         activerows[i].style.cssText = 'display:block !important';
       }
     }else
     {
        for (var i=0; i<activerows.length; i++) 
        {
          //  activerows[i].style.display='block';
         }
     }

body {
    margin-top:30px;
     }
 .hidden
  {
   display: none;
  }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="container">
     <div class="row">
      <div class="col-md-8">

        <table  class="hidden table table-striped table-border">

            <tbody>
                <tr class="hidden">
                 <td>List ............</td>
                </tr>

                <tr class="hidden active">
                    <th>A</th>
                    <th>B</th>  
                    <th>C</th>
                    <th>D</th>
                </tr>
                <tr class="hidden">
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                    <td>4</td>
                </tr>
                 <tr class="hidden">
                    <td>5</td>
                    <td>6</td>
                    <td>7</td>
                    <td>8</td>
                </tr>
                <tr class="hidden">
                    <td>9</td>
                    <td>10</td>
                    <td>11</td>
                    <td>12</td>
                </tr>
                 <tr class="hidden">
                    <td>13</td>
                    <td>14</td>
                    <td>15</td>
                    <td>16</td>
                </tr>
                <tr class="hidden">
                    <td>17</td>
                    <td>18</td>
                    <td>19</td>
                    <td>20</td>
                </tr>
            </tbody>
        </table>
      </div>

     </div>
     <div class="well col-md-8">
      <p>Test Messages.........</p> 
     </div>
    </div>

Answer 3

请更改此行

activerows[i].style.display="block";

与

$(activerows[i]).attr("style", "display: block !important");

或

$(activerows[i]).removeClass('hidden');

你需要！重要的是重写以前的！important。 https://jsfiddle.net/nqtafyg2/6/

Bootstrap覆盖未生效

3 个答案: