CODEWITHSUNDEEP
javascripttwitter-bootstrap
David Edgar
David Edgar

Reputation: 505

Generate row table from this customised static row

I have some trouble tring to achieve the creation of one row from JS in my table. I do not know why?

enter image description here

My static row:

<tr>
  <td>
    Bob
  </td>
  <td class="text-right text-nowrap">
    <button class="btn btn-xs btn-info">edit</button>
    <button class="btn btn-xs btn-warning">
      <span class="glyphicon glyphicon-trash"></span>
    </button>
  </td>
</tr>

The second code is when generated in my add function: 

let row = "<tr>"
    + "<td>"
       + "<a href='#'>"+ person.name +"</a>"
    + "</td>"
    + "<td class='text-right text-nowrap'>"
       +  "<button class='btn btn-xs btn-info'>edit</button>"
       +  "<button class='btn btn-xs btn-warning'>"
          +  "<span class='glyphicon glyphicon-trash'></span>"
       +  "</button>"
    +  "</td>"
    +  "</tr>"

Upvotes: 0

Views: 32

Answers (1)

Ramakanth Putta
Ramakanth Putta

Reputation: 726

There is no div around table rows. How are you accessing the table from Javascript. See the following snippet.

I have added 

<div id = "table">

and used the 

JQuery on ready function,

to wait till the page loads, and append the row to the proper table "div" using append function.

var row = "<tr>" +
    "<td>"
       + "<a href='#'> Aadi </a>"
    + "</td>"
    + "<td class='text-right text-nowrap'>"
       +  "<button class='btn btn-xs btn-info'>edit</button>"
       +  "<button class='btn btn-xs btn-warning'>"
          +  "<span class='glyphicon glyphicon-trash'></span>"
       +  "</button>"
    +  "</td>" + "</tr>"


    $( document ).ready(function() {
        $('#table tbody').append(row);
    });
    
    
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='table'>

<table>
 <tbody>
<tr>
  <td>
    Bob
  </td>
  <td class="text-right text-nowrap">
    <button class="btn btn-xs btn-info">edit</button>
    <button class="btn btn-xs btn-warning">
      <span class="glyphicon glyphicon-trash"></span>
    </button>
  </td>
</tr>
</tbody>
</table>
</div>

Upvotes: 1

Related Questions