Bootstrap 2.3.2 table

by kc11

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
            </button> <a class="brand" href="#">Bootstrap 2.3.2 Skeleton</a>
            <div class="nav-collapse collapse">
                <ul class="nav">
                    <li class="active"><a href="#">Home</a>
                    </li>
                    <li><a href="#about">About</a>
                    </li>
                    <li><a href="#contact">Contact</a>
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
    </div>
</div>

<table id="codexpl">
    <tr>
        <th>#</th>
        <th>Columna</th>
        <th>Relative</th>
        <th>Isso</th>
    </tr>
    <tr>
        <td>1</td>
        <td>This</td>
        <td>http://stackoverflow.com/</td>
        <td>Is</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Coloumn</td>
        <td>two</td>
        <td>this</td>
    </tr>
    <tr>
        <td>3</td>
        <td>http://stackoverflow.com/</td>
        <td>not equals</td>
        <td>a</td>
    </tr>
    <tr>
        <td>4</td>
        <td>the</td>
        <td>Column</td>
        <td>real</td>
    </tr>
    <tr>
        <td>5</td>
        <td>first</td>
        <td>One</td>
        <td>Coloumn</td>
    </tr>
</table>



<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    Find documentation: <a href='http://getbootstrap.com/2.3.2/base-css.html'>Get Bootstrap...

CSS

#codexpl th, #codexpl td{
    padding:0.8em;
    border: 1px solid;
}
#codexpl th{
    background-color:#6699FF;
    font-weight:bold;
}

JavaScript

var html ="";
                var $that ="";
                var $url ="";

    $('td').hover( function() {
                var contents = $( this ).html() ;

                if (contents.match("^http")) {
                    console.log('contents',contents);
                    $that = $( this );
                    $url = contents;

                    $.ajax({
                            type:"POST",
                            url: "/echo/html/",
                            context: $that,
                            data: { u : 'http://stackoverflow.com' },
                            dataType: 'html',    
                            error: function(jqXHR, textStatus, errorThrown) {
                                console.log('error');
                                console.log(jqXHR, textStatus, errorThrown);
                            }
                        }).done(function(html) {
                           console.log(' here is the html ' + html);
                        
              
                        html = '<ul class="nav"><li><a href="#">hola</li><li><a href="#">hola2</li></ul>';
                        $link = $('<a href="myreference.html" class="p1" data-html="true" data-bind="popover">');
                        $link.data('content', html);
                    $(this).html($link);
              
                $that = $(this);
                
               // Trigger the popover to open
                $link = $(this).find('a');
                $link.popover("show");

                       })

            };

                
                
            }, function() {
                console.log('this2 ',$that);
                $link = $that.find('a');
                console.log('$link2 ',$link);
                $link.popover("hide");
               $that.html($url);
            });