Uses Tree line by line

Question

I have the following code:

$('#tree1').treed();

I would like every row of my table to be a tree.

But only the first line works.

I’m trying to use the "Bootstrap Treeview" and nothing

calling it so:

In html

    <table>
      <tr>
        <td>
         <ul id="tree1">
           <li><a href="#">Empresa</a>
             <ul>
               <li>
                 <a href="#div" data-url="#"
                  data-id="link.php"
                  class="btn-voltar">
                   Departamento
                 </a>
               </li>
            </ul>
          </li>
        </ul>
      </td>
     </tr>
     <tr>
        <td>
         <ul id="tree1">
           <li><a href="#">Empresa</a>
             <ul>
               <li>
                 <a href="#div" data-url="#"
                  data-id="link.php"
                  class="btn-voltar">
                   Departamento
                 </a>
               </li>
            </ul>
          </li>
        </ul>
      </td>
     </tr>
    </table>

Javascript:

$('#tree1').treed();

Answer 1

Puts the ID in the table, not in ul(s)):

<table id="tree1">
  <tr>
    <td>
      <ul>
        <li><a href="#">Empresa</a>

even because duplicate Ids is wrong HTML syntax.

Example:

$.fn.extend({
  treed: function(o) {

    var openedClass = 'glyphicon-minus-sign';
    var closedClass = 'glyphicon-plus-sign';

    if (typeof o != 'undefined') {
      if (typeof o.openedClass != 'undefined') {
        openedClass = o.openedClass;
      }
      if (typeof o.closedClass != 'undefined') {
        closedClass = o.closedClass;
      }
    };

    //initialize each of the top levels
    var tree = $(this);
    tree.addClass("tree");
    tree.find('li').has("ul").each(function() {
      var branch = $(this); //li with children ul
      branch.prepend("<i class='indicator glyphicon " + closedClass + "'></i>");
      branch.addClass('branch');
      branch.on('click', function(e) {
        if (this == e.target) {
          var icon = $(this).children('i:first');
          icon.toggleClass(openedClass + " " + closedClass);
          $(this).children().children().toggle();
        }
      })
      branch.children().children().toggle();
    });
    //fire event from the dynamically added icon
    tree.find('.branch .indicator').each(function() {
      $(this).on('click', function() {
        $(this).closest('li').click();
      });
    });
    //fire event to open branch if the li contains an anchor instead of text
    tree.find('.branch>a').each(function() {
      $(this).on('click', function(e) {
        $(this).closest('li').click();
        e.preventDefault();
      });
    });
    //fire event to open branch if the li contains a button instead of text
    tree.find('.branch>button').each(function() {
      $(this).on('click', function(e) {
        $(this).closest('li').click();
        e.preventDefault();
      });
    });
  }
});
$('#tree1').treed();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" />
<table id="tree1">
  <tr>
    <td>
      <ul>
        <li><a href="#">Empresa</a>
          <ul>
            <li>
              <a href="#div" data-url="#" data-id="link.php" class="btn-voltar">
                   Departamento
                 </a>
            </li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>
  <tr>
    <td>
      <ul>
        <li><a href="#">Empresa</a>
          <ul>
            <li>
              <a href="#div" data-url="#" data-id="link.php" class="btn-voltar">
                   Departamento
                 </a>
            </li>
          </ul>
        </li>
      </ul>
    </td>
  </tr>
</table>