CODEWITHSUNDEEP
javascripthtmlcss
Maki
Maki

Reputation: 637

Position div and get external js file work onload

I have a JavaScript and CSS that works in fiddle but not when I use outside fiddle. fiddle

  1. when I plug it in to the html like below, it doesn't work. I believe I am missing some code?
  2. the count div is not in the right position when I am not viewing it from jsfiddle. How can I position it relative to the search input?
  3. it takes a minute to generate the table, is it because my code is badly written? *well i do have 800rows*8columns

Thank you in advance.

HTML 

<head>
<link rel="stylesheet" type="text/css" href="search-table.css">
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="search-table.js"></script>
</head>
<body>
</body>
<table id="table-body">
    <thead>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Address</th>
            <th>Tel</th>
            <th>Fax</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Apple</td>
            <td>A1</td>
            <td>1-11</td>
            <td>1-22</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Banana</td>
            <td>A2</td>
            <td>2-11</td>
            <td>2-22</td>
        </tr>
        <tr>
            <td>3Asdqwe</td>
            <td>Cherry</td>
            <td>A3</td>
            <td>3-11</td>
            <td>3-22</td>
        </tr>
        <tr>
            <td>4A</td>
            <td>Duriaen</td>
            <td>A4</td>
            <td>4-11</td>
            <td>4-22</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Apple</td>
            <td>A1</td>
            <td>5-11</td>
            <td>5-22</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Banana</td>
            <td>A2</td>
            <td>6-11</td>
            <td>6-22</td>
        </tr>
        <tr>
            <td>3Asdqwe</td>
            <td>Cherry</td>
            <td>A3</td>
            <td>7-11</td>
            <td>7-22</td>
        </tr>
        <tr>
            <td>4A</td>
            <td>Duriaen</td>
            <td>A4</td>
            <td>8-11</td>
            <td>8-22</td>
        </tr>
    </tbody>
</table>
</html>

JavaScript

//Perparing table
    /*
     *comment
     */
    $("<div>", {
        class: "tablewrapper"
    }).insertBefore("table#table-body");
    $("<table>", {
        class: "header"
    }).appendTo($("<div>", {
        class: "headerwrapper"
    }).appendTo("div.tablewrapper"));
    $("table#table-body").appendTo($("<div>", {
        class: "bodywrapper"
    }).appendTo("div.tablewrapper"));
    $("table#table-body>thead").clone().val("").appendTo("table.header");
    $("table.header>tr").removeClass("header_hidden");
    $("table#table-body").find("thead tr").addClass("header_hidden");
    $("table#table-body").find("tbody td:nth-child(2)").addClass("lefty");
    $("<input>", {
        type: "text"
    }).attr("id", "search-criteria").appendTo($("<div>", {
        class: "s_box"
    }).insertAfter("div.headerwrapper"));
    $("<div>").attr("id", "count").insertAfter("div.s_box");


    resizeTable();
    var bodyTd = $("table#table-body tr td");

    $(window).resize(resizeTable);

    //search function
    $("#search-criteria").on("keyup", function () {
        var keyword = $(this).val().replace(/[Ａ-Ｚａ-ｚ０-９]/g, function (td_word) {
            return String.fromCharCode(td_word.charCodeAt(0) - 0xFEE0);
        }).toLowerCase();
        var row = "table#table-body tbody>tr";

        if (keyword !== "") {
            $(row).each(function () {
                var td_word = $(this).text().toLowerCase();
                //shorthand if function
                $(this).closest(row)[td_word.indexOf(keyword) !== -1 ? 'show' : 'hide']();
            });
            var srowCount = $(row).filter(":visible").length;
            document.getElementById('count').innerHTML = srowCount;
            if (srowCount === 0) {
                if (!$(row).last().hasClass('s_empty')) {
                    $("table#table-body tbody").last().append('<tr class="s_empty"><td colspan="5" style="text-align:center">Search not found</td></tr>');
                }
                $("tr.s_empty").show();
            } else {
                $("tr.s_empty").remove();
            }
        } else {
            $("tr.s_empty").remove();
            $(row).show();
            document.getElementById('count').innerHTML = $(row).length;
        }

    });

    var row = "table#table-body tbody>tr";
    var srowCount = $(row).filter(":visible").length;
    document.getElementById('count').innerHTML = srowCount;

    function resizeTable() {
        //width adjustments
        $("table.header").width($("#table-body").width());
        $("div.s_box").width(($("div.headerwrapper").width() - 10)).height(($("table.header").height() - 9));
        $("input#search-criteria").width(($("div.headerwrapper").width() - 30)).height(($("div.s_box").height() - 0.05));
        var counter_h = ($("table.header").height() / 2 + $("table.header").height() - 1);
        $("div#count").css({
            "top": counter_h
        });

        var bodyTr = $("table#table-body tbody>tr:visible:eq(0) td");
        console.log(bodyTr);
        $("table.header tr:first th").each(function (index, value) {
            $(this).width(bodyTr.eq(index).width());
        });

        //apply widths to every TD
        $("table#table-body tr:gt(0)").each(function () {
            $(this).children().each(function (index) {
                $(this).width(bodyTr.eq(index).width());
            });
        });
    }

Upvotes: 0

Views: 205

Answers (2)

111
111

Reputation: 1779

There will error coming because of this JavaScript $("<div>", {class: "tablewrapper"}) that used. It should be like this $("<div>", {"class": "tablewrapper"}) for all places.

This is suggestion that,before preparing HTML from JavaScript use document ready event OR place your JavaScript at the end of html body elements.

<html>
<head>
<link rel="stylesheet" type="text/css" href="search-table.css">
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>


<script type="text/javascript">
//Perparing table
/*
*comment
*/




$(document).ready(function() {

    $("<div>", {"class": "tablewrapper"}).insertBefore("table#table-body");
$("<table>", {"class": "header"}).appendTo($("<div>", {"class": "headerwrapper"}).appendTo("div.tablewrapper"));
$("table#table-body").appendTo($("<div>", {"class": "bodywrapper"}).appendTo("div.tablewrapper"));
$("table#table-body>thead").clone().val("").appendTo("table.header");
$("table.header>tr").removeClass("header_hidden");
$("table#table-body").find("thead tr").addClass("header_hidden");
$("table#table-body").find("tbody td:nth-child(2)").addClass("lefty");
$("<input>", {type: "text"}).attr("id","search-criteria").appendTo($("<div>", {"class":"s_box"}).insertAfter("div.headerwrapper"));
$("<div>").attr("id","count").insertAfter("div.s_box");


resizeTable();
var bodyTd = $("table#table-body tr td");

$(window).resize(resizeTable);
    
    var row = "table#table-body tbody>tr";
    var srowCount = $(row).filter(":visible").length;
    document.getElementById('count').innerHTML = srowCount;
    
    //search function
$("#search-criteria").on("keyup", function () {
var keyword = $(this).val().replace(/[Ａ-Ｚａ-ｚ０-９]/g, function (td_word) {
    return String.fromCharCode(td_word.charCodeAt(0) - 0xFEE0);
}).toLowerCase();
var row = "table#table-body tbody>tr";

if (keyword !== "") {
    $(row).each(function () {
        var td_word = $(this).text().toLowerCase();
        //shorthand if function
        $(this).closest(row)[td_word.indexOf(keyword) !== -1 ? 'show' : 'hide']();
    });
    var srowCount = $(row).filter(":visible").length;
    document.getElementById('count').innerHTML = srowCount;
    if (srowCount === 0) {
        if(!$(row).last().hasClass('s_empty'))
        {
            $("table#table-body tbody").last().append('<tr class="s_empty"><td colspan="5" style="text-align:center">Search not found</td></tr>');
        }
        $("tr.s_empty").show();
    } else {
        $("tr.s_empty").remove();
    }
} else {
    $("tr.s_empty").remove();
    $(row).show();
    document.getElementById('count').innerHTML = $(row).length;
}

});
});

function resizeTable() {
    //width adjustments
    $("table.header").width($("#table-body").width());
    $("div.s_box").width(($("div.headerwrapper").width()-10)).height(($("table.header").height()-9));
    $("input#search-criteria").width(($("div.headerwrapper").width()-30)).height(($("div.s_box").height()-0.05));
    var counter_h = ($("table.header").height()/2+$("table.header").height()-1);
    $("div#count").css({"top":counter_h});
    
    var bodyTr = $("table#table-body tbody>tr:visible:eq(0) td");
    console.log(bodyTr);
    $("table.header tr:first th").each(function (index, value) {
        $(this).width(bodyTr.eq(index).width());
    });

    //apply widths to every TD
    $("table#table-body tr:gt(0)").each(function () {
        $(this).children().each(function (index) {
            $(this).width(bodyTr.eq(index).width());
        });
    });
}
</script>

<style>div.tablewrapper, div.headerwrapper, div.bodywrapper {
    border:0px;
}

div.headerwrapper {
    background-color:#1BA7F5;    
}

div.bodywrapper {
    height:100px;
    overflow-y:scroll;
    border-bottom:solid 2px #1BA7F5;
}

table.header, table#table-body {
    border:0px;
    border-collapse:collapse;
    border-spacing:0px;
    text-align:center;
}

table.header {
    line-height:32px;
    background-color:#1BA7F5; 
    color:#FFF;
}

table.header th {
    padding-left:10px;
    text-align:left;
    font-weight: normal;
}

table#table-body {
    width:100%;
}

table#table-body tr {
    line-height:30px;
    border-top:1px solid #C4C4C4;
}

table#table-body tr.header_hidden {
    display:none;
}

table#table-body tr:hover {
    background-color:#FFFF99;
}

table#table-body tbody td.lefty {
    text-align:left;
}

div.s_box {
padding: 5px 5px;
background: #c4c4c4;
box-sizing: border-box;
}

input#search-criteria {
-webkit-appearance: none;
padding: 0 10px;
border: none;
border-radius: 6px;
font-size: 13px;
line-height: 23px;
background: #fff;
}

input#search-criteria:focus{
    outline:none;
}

div#count {
position: absolute;
right: 17px;
color: #FFF;
background-color: #9EB4C2;
line-height: 19px;
font-size: 15px;
padding: 0 5px;
border-radius: 3px;
}
</style>

</head>
<body>
</body>
<table id="table-body">
    <thead>
        <tr>
            <th>No.</th>
            <th>Name</th>
            <th>Address</th>
            <th>Tel</th>
            <th>Fax</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Apple</td>
            <td>A1</td>
            <td>1-11</td>
            <td>1-22</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Banana</td>
            <td>A2</td>
            <td>2-11</td>
            <td>2-22</td>
        </tr>
        <tr>
            <td>3Asdqwe</td>
            <td>Cherry</td>
            <td>A3</td>
            <td>3-11</td>
            <td>3-22</td>
        </tr>
        <tr>
            <td>4A</td>
            <td>Duriaen</td>
            <td>A4</td>
            <td>4-11</td>
            <td>4-22</td>
        </tr>
        <tr>
            <td>1</td>
            <td>Apple</td>
            <td>A1</td>
            <td>5-11</td>
            <td>5-22</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Banana</td>
            <td>A2</td>
            <td>6-11</td>
            <td>6-22</td>
        </tr>
        <tr>
            <td>3Asdqwe</td>
            <td>Cherry</td>
            <td>A3</td>
            <td>7-11</td>
            <td>7-22</td>
        </tr>
        <tr>
            <td>4A</td>
            <td>Duriaen</td>
            <td>A4</td>
            <td>8-11</td>
            <td>8-22</td>
        </tr>
    </tbody>
</table>
</html>

Upvotes: 1

naman kalkhuria
naman kalkhuria

Reputation: 404

you have to make s_box relative so that count becomes absolute according to it

.s_box {
 position: relative;
}

Upvotes: 1

Related Questions