table with styles is not working with bootstrap

Asked

Viewed 214 times

2

HTML:

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body onload="montaTabela()"> 
<div class="container">
    <script type="text/javascript"> 
        function montaTabela(){
            document.write("<div class='table-responsive'>"+
                           "<table class='table'>");
            document.write("<thead>"+
                                "<tr>"+
                                    "<th>#</th>"+
                                    "<th>resultado</th>"+
                                    "<th>Valor Digitado</th>"+
                                    "<th>Resposta</th>"+
                                "</tr>"+
                            "</thead>"+
                            "<tbody>"+  
                                "<tr>"+
                                    "<td>dado</td>"+
                                    "<td>30</td>"+
                                    "<td>2</td>"+
                                    "<td>Errado</td>"+
                                "</tr>");
            document.write("</tbody>");
            document.write("</table>");
            document.write("</div>");
        }
    </script>           
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</body>

If I have the code rotated without the function mountTable(), the code works normally and the table style is mounted right. But if I create and call the function montarTable(), the style of the table is left without any style. I have another program in which I am developing, in it I make a function call to make the table assembly, but it did not work, is not going out with style... weird, someone can give me a light?

javascript css twitter-bootstrap

  • The document.write overwrite the contents of the page. Try using innerHTML

1 answer

1

Just call the function to mount the table at the bottom of the page after all the resources have been loaded.

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>

<body>
  <div class="container">
    <script type="text/javascript">
      function montaTabela() {
        document.write("<div class='table-responsive'>" +
          "<table class='table'>");
        document.write("<thead>" +
          "<tr>" +
          "<th>#</th>" +
          "<th>resultado</th>" +
          "<th>Valor Digitado</th>" +
          "<th>Resposta</th>" +
          "</tr>" +
          "</thead>" +
          "<tbody>" +
          "<tr>" +
          "<td>dado</td>" +
          "<td>30</td>" +
          "<td>2</td>" +
          "<td>Errado</td>" +
          "</tr>");
        document.write("</tbody>");
        document.write("</table>");
        document.write("</div>");
      }
    </script>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  <script>
    montaTabela();
  </script>
</body>

Browser other questions tagged javascript css twitter-bootstrap

You are not signed in. Login or sign up in order to post.