jQuery treetable: Get first and last child of all nodes

Question

I have a TreeTable Api http://ludo.cubicphuse.nl/jquery-treetable/#usage that I use to display my data from MySql in Html table.

What I am trying to do is OnDocumentReady in jQuery I need to disable some buttons.

This is my table structure It has 2 buttons on each row Move up and Move down.

In order to change the sequence of the tr I have created them. My problem is how could I get First child and Last child of each node so that I could disable move up button on first child and disable move down button on last child. And disable both buttons if a node has no siblings.

So far I have tried this but is not helping me

$('tr td:last-child').each(function(){
    var $this = $(this).contents(".md");
    $this.prop( "disabled", true );
});
$('tr td:last-child').each(function(){
        var $this = $(this).contents(".mu");
        $this.prop( "disabled", true );
});

.md(moveDown) and .mu(moveUp) are classes for buttons that will perform some database task when clicked later.

This is my HTML PHP code where I am processing the above table structure

<?php
include 'dbconn.php';
    $conn = mysql_connect($dbhost, $dbuser, $dbpass);
    mysql_connect('localhost','root','root');
    mysql_select_db('cms');
    //select all rows from the main_menu table
    $result = mysql_query("select id, label as title, parent as parentid,link,status from pages order by seq asc");
    //create a multidimensional array to hold a list of menu and parent menu
    $menu = array(
        'menus' => array(),
        'parent_menus' => array(),
    );
    //build the array lists with data from the menu table
    while ($row = mysql_fetch_assoc($result)) {
        //creates entry into menus array with current menu id ie. $menus['menus'][1]
        $menu['menus'][$row['id']] = $row;
        //creates entry into parent_menus array. parent_menus array contains a list of all menus with children
        $menu['parent_menus'][$row['parentid']][] = $row['id'];
    }
    // Create the main function to build milti-level menu. It is a recursive function.  
    echo $html='<table class="test2 table  table-bordered">
                <tr>
                    <th>Page Name</th>
                    <th> Status </th><th> Edit </th><th> Add Submenu </th><th><!--Delete Menu--></th><th> Sequence </th>
                </tr>
                <tr data-tt-id="0">
                    <td class="Root">Root</td>
                    <td>
                    </td>
                    <td>
                    </td>
                    <td><button class="btn btn-info" onclick="addMenu(0,0)" data-toggle="modal" data-target="#addmenu">
                        <span  class="glyphicon glyphicon-plus-sign"></span>Add</button></td>
                    <td>
                    </td>
                </tr>';
    function buildMenu($parent, $menu) {
    $char=" ";
    if (isset($menu['parent_menus'][$parent])) {
foreach ($menu['parent_menus'][$parent] as $menu_id) {
            //echo "id:".$menu['menus'][$menu_id]['id']."par:".$menu['menus'][$menu_id]['parentid'];
              if($menu['menus'][$menu_id]['status']=='active')
              {
                  $class="btn-success";
                  $span="glyphicon glyphicon-ok-sign";
                  $set="";
              }
              else if($menu['menus'][$menu_id]['status']=='deactive')
                      {
                          $class="btn-danger";
                          $span="glyphicon glyphicon-remove-sign";
                          $set="disabled='disabled'";
                      }
                      else
                          {
                              $class="btn-info";

                          }
            if (!isset($menu['parent_menus'][$menu_id])) {

                $html .= '<tr data-tt-id="'.$menu['menus'][$menu_id]['id'].'" data-tt-parent-id="'.$menu['menus'][$menu_id]['parentid'].'">
                <td class="Root">'.$menu['menus'][$menu_id]['title'].'</td>
                <td><button style="width:6em;" id="'.$menu['menus'][$menu_id]['id'].'" class="btn '.$class.'" 
                onclick="status('."'".$menu['menus'][$menu_id]['id']."'".",".
                "'".$menu['menus'][$menu_id]['parentid']."'".","."'".$menu['menus'][$menu_id]['status']."'".')">
                <span  class="'.$span.'"></span>'.$menu['menus'][$menu_id]['status'].'</button>
                </td>

                <td><button id="'.$menu['menus'][$menu_id]['title'].'" class="btn btn-warning setting dbbutton"  onclick="edit('.$menu['menus'][$menu_id]['id'].','.$menu['menus'][$menu_id]['parentid'].')" '.$set.'>
                <span  class="glyphicon glyphicon-edit"></span>Edit</button>
                </td>

                <td><button class="btn btn-info" onclick="addMenu('.$menu['menus'][$menu_id]['id'].','.$menu['menus'][$menu_id]['parentid'].')" 
                    data-toggle="modal" data-target="#addmenu">
                <span  class="glyphicon glyphicon-plus-sign"></span>Add</button>
                </td>

                <td><!--<button class="btn btn-danger" onclick="deleteMenu('.$menu['menus'][$menu_id]['id'].','.$menu['menus'][$menu_id]['parentid'].')">
                <span  class="glyphicon glyphicon-trash"></span>Delete</button>--></td>             


                <td>    
                    <button id="'.$menu['menus'][$menu_id]['id'].'" class="btn btn-default btn-xs mu" onclick="moveUp(this)" style="color:orange !important;" title="Move Up">
                        <span class="glyphicon glyphicon-triangle-top" ></span>
                    </button>
                    <button id="'.$menu['menus'][$menu_id]['id'].'" class="btn btn-default btn-xs md" onclick="moveDown(this)" style="color:orange !important" title="Move Down">
                        <span class="glyphicon glyphicon-triangle-bottom"></span>
                    </button>
                </td>
                </tr>'
                ;
            }
            if (isset($menu['parent_menus'][$menu_id])) {
                $html .= "<tr data-tt-id='".$menu['menus'][$menu_id]['id']."' data-tt-parent-id='".$menu['menus'][$menu_id]['parentid']."'>
                            <td class='Root'>".$menu['menus'][$menu_id]['title'];
                $html .= '</td>
                <td><button style="width:6em;" id="'.$menu['menus'][$menu_id]['id'].'" class="btn '.$class.'" onclick="status('."'".$menu['menus'][$menu_id]['id']."'".",".
                "'".$menu['menus'][$menu_id]['parentid']."'".","."'".$menu['menus'][$menu_id]['status']."'".')">
                <span  class="'.$span.'"></span>'.$menu['menus'][$menu_id]['status'].'</button>
                </td>

                <td><button id="'.$menu['menus'][$menu_id]['title'].'"class="btn btn-warning setting dbbutton"  onclick="edit('.$menu['menus'][$menu_id]['id'].','.$menu['menus'][$menu_id]['parentid'].')" '.$set.'>
                <span  class="glyphicon glyphicon-edit"></span>Edit</button>
                </td>

                <td><button class="btn btn-info" onclick="addMenu('.$menu['menus'][$menu_id]['id'].','.$menu['menus'][$menu_id]['parentid'].')" data-toggle="modal" data-target="#addmenu">
                <span  class="glyphicon glyphicon-plus-sign"></span>Add</button>
                </td>

                <td><!--<button class="btn btn-danger" onclick="deleteMenu('.$menu['menus'][$menu_id]['id'].','.$menu['menus'][$menu_id]['parentid'].')">
                <span  class="glyphicon glyphicon-trash"></span>Delete</button>--></td>

                <td>    
                    <button id="'.$menu['menus'][$menu_id]['id'].'" class="btn btn-default btn-xs mu" onclick="moveUp(this)" style="color:orange !important;" title="Move Up">
                        <span class="glyphicon glyphicon-triangle-top" ></span>
                    </button>
                    <button id="'.$menu['menus'][$menu_id]['id'].'" class="btn btn-default btn-xs md" onclick="moveDown(this)" style="color:orange !important" title="Move Down">
                        <span class="glyphicon glyphicon-triangle-bottom"></span>
                    </button>
                </td>


                ';
                $html .= buildMenu($menu_id, $menu);
                //$html .= "</td>";
                $html .= "</tr>";
            }
        }
    }
    return $html;
}

echo buildMenu(0, $menu);

echo "</table>";
?>

Answer 1

You need to use .find() instead of .contents() to find the element with class .md in td. also you don't need to use .each(), you directly set the property to all of them:

$('tr td .md:last-child').prop( "disabled", true );