Table responsible and table bordered in JQUERY function

0

I have a site with an admin that feeds this site, when the person registers an information copying a text with a table coming from Word, the visualization of this news with the table is coming without responsiveness and edge, I am developing a function in JQUERY to I want to check if a particular text entry has an HTML table, include border and responsiveness with booststrap, below is a test of how it's getting and how I want to leave it, but I'm not able to mount this div within my function.

<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>

Now it is the following, the items commented on functions as color and border worked, the table above is just an example, to see if the function finds a table, in this case found and treated. In the place of the table has a ng-bind-html="article.description with the information coming from the bank, in this information there may be a table, just for you to understand, I would like to add below where commented the following feature: p>      ....   ....   

That is, every time I open the news my function already leaves in the browser any and all text table responsive and bordered, so it does not work, I would like some idea how to funf this, thank you.

    
asked by anonymous 19.01.2017 / 22:21

1 answer

0

How does it resolve? you want to just apply the tables inside the div #conteudo better to use the selector as well.

$(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><linkhref="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><divng-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>
    
20.01.2017 / 13:01