0

Tenho um site com um admin que alimenta este site, quando a pessoa cadastra uma informação copiando um texto com tabela vinda do Word, a visualização desta notícia com a tabela esta vindo sem responsividade e borda, estou desenvolvendo uma função em JQUERY para verificar se determinado texto que entrar tiver tabela em HTML, incluir borda e responsividade com booststrap, segue abaixo um teste de como esta ficando e como eu quero deixar, mas não estou conseguindo montar essa div dentro da minha função.

<div ng-controller="CesansCtrl">
  <div id='conteudo' class="margB40">
     <table>
         <thead>
            <tr>
               <th>#</th>
               <th>Firstname</th>
               <th>Lastname</th>
               <th>Age</th>
               <th>City</th>
               <th>Country</th>
            </tr>
         </thead>
             <tbody>
                <tr>
                  <td>1</td>
                  <td>Anna</td>
                  <td>Pitt</td>
                  <td>35</td>
                  <td>New York</td>
                  <td>USA</td>
                </tr>
             </tbody>
      </table>
  </div>

  <script type="text/javascript" src="/scripts/jquery-1.10.2.min.js"></script>
  <script src="/scripts/bootstrap.min.js"></script>

    <script type="text/javascript">
        $(function () {

            if ($("#conteudo").find("table").val() != " ") {

                // Rolou, mas quero deixa com o addClass
                //$("table").css("color", "red");
                //$("table").css("border", "1px solid #ddd");

                // Não rolou
                $("table").addClass('table table-responsible');
                $("table").addClass('table table-bordered');
            }
        });
    </script>

</div>

Agora é o seguinte, os itens comentados na functions como cor e borda deram certo, a tabela acima é apenas um exemplo, para ver se a function encontra uma tabela, nesse caso encontrou e tratou. No lugar da table tem um ng-bind-html="artigo.description com as informações vindas do banco, nessas informações pode haver uma table, apenas para vcs entenderem, eu gostaria de adicionar abaixo de onde esta comentado a seguinte característica :

.... ....

Ou seja, toda vez que eu abrir uma noticia a minha function já deixe no browser toda e qualquer table do texto com responsividade e com borda, da forma que inclui não funcionou, gostaria de alguma ideia de como funfar isso, obrigado.

1
  • Se não me engano, a classe em bootstrap que deixa uma tabela responsiva é "table". Então, já tentou assim? $("table").addClass("table"); 19/01/2017 às 22:16

1 Resposta 1

0

Assim resolve? você quer aplicar apenas as tabelas dentro da div #conteudo melhor usar o seletor assim.

$(function () {     
                $("#conteudo table").addClass('table table-responsible');
                $("#conteudo table").addClass('table table-bordered');
           
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js">
  </script>
<div ng-controller="CesansCtrl">
  <div id='conteudo' class="margB40">
     <table>
         <thead>
            <tr>
               <th>#</th>
               <th>Firstname</th>
               <th>Lastname</th>
               <th>Age</th>
               <th>City</th>
               <th>Country</th>
            </tr>
         </thead>
             <tbody>
                <tr>
                  <td>1</td>
                  <td>Anna</td>
                  <td>Pitt</td>
                  <td>35</td>
                  <td>New York</td>
                  <td>USA</td>
                </tr>
             </tbody>
      </table>
       <table>
         <thead>
            <tr>
               <th>#</th>
               <th>Firstname</th>
               <th>Lastname</th>
               <th>Age</th>
               <th>City</th>
               <th>Country</th>
            </tr>
         </thead>
             <tbody>
                <tr>
                  <td>1</td>
                  <td>Anna</td>
                  <td>Pitt</td>
                  <td>35</td>
                  <td>New York</td>
                  <td>USA</td>
                </tr>
             </tbody>
      </table>
  </div>


</div>

2
  • Estou efetuando alguns testes. 20/01/2017 às 17:07
  • Amigos, obrigado pelo ajuda de todos, o trecho do código da função vem abaixo, renderiza uma tabela quando vier em um texto HTML, quem precisa e só pegar, nem precisa do If, apenas este $('#conteudo table').addClass('table table-bordered').wrap('<div class="table-responsive"></div>'); já funciona, o item #conteudo é o ID principal onde a tabela fica dentro. 6/02/2017 às 12:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .