Table and table bordered in JQUERY function

Question

I have a website with an admin that feeds this site, when the person registers an information by copying a text with 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 check if certain text that enters has table in HTML, include border and responsiveness with booststrap, below follows a test of how this getting and how I want to leave, but I’m not getting to assemble that 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 is the following, the items commented on in functions like color and border worked out, the above table is just an example, to see if Function finds a table, in which case found and treated. In place of the table has an ng-bind-html="article.Description with the information coming from the database, in this information there may be a table, just for you to understand, I would like to add below where this commented the following feature :

.... ....

That is, every time I open a news my Function already leave in the browser all and any text table with responsiveness and with edge, the way it includes did not work, I would like some idea of how to funfar this, thanks.

Answer 1

So resolve? you want to apply only the tables inside the div #conteudo better use the selector so.

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