Dynamic table creation using Jquery

Dynamic table creation using Jquery

by rush2ashu

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<br />
<div id='input_div' name='input_div'>Please Input your Matrix Dimensions :
    <input type="text" id="rowcount" size="2" value="2">
<span>X <input type="text" id="columncount" size ="2" value="2">
</div> <br><br>
<input type="button" id="tablebtn" value="Create Tabl
e">
<input type="button" id="newabilitybtn" value="Add Ability">
<input type="button" id="newlevelbtn" value="Add Level">
    <input type="button" id="submit" value="Submit">
        <div id="hiddenVariables"></div>
<br><br>
    <span>Search with the following values    "c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"</span>
<br><br>
<div id="box">
</div>

CSS

table {
	    width:200px;
	    height:200px;
	    border:solid black;
	}
	table td {
	    padding:10px;
	    margin:10px;
	    border:solid black;
	}
	table th {
	    padding:10px;
	    margin:10px;
	    border:solid black;
	}
	table tr {
	    height:10px;
	}
.centered1
{
    margin: auto;
    width: 400px;
    height: 200px;
}
table.matrix{
    width:930px;
    height:400px;
    border:1px solid #000000;
}
table.matrix, tr.Aheader{
    height:10px;
    border:solid white;
}
table.matrix, th{
    height:10px;
    border:solid white;
}
table.matrix, td.matrix_td{
    padding:10px;
    margin:10px;
    border:solid white;
}

.fl20{
    padding:5px; 
}

.buttonDel{
    background-image: -webkit-linear-gradient(top, #f4f1ee, #fff);
    background-image: linear-gradient(top, #f4f1ee, #fff);
    border-radius: 100%;
    box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, .3), inset 0px 4px 1px 1px white, inset 0px -3px 1px 1px rgba(204,198,197,.5);
    float:left;
    height: 25px;
    margin-left: 15px;
    position: relative;
    width: 25px;			
    -webkit-transition: all .1s linear;
    transition: all .1s linear;
}

.buttonDel:after{
    color:#e9e6e4;
    content: '\03a7';
    display: block;
    font-size: 12px;
    height: 10px;
    text-decoration: none;
    text-shadow: 0px -1px 1px #bdb5b4, 1px 1px 1px white;
    width: 30px;
}

.cross:after{
    content:'\03a7';
    margin-left: -4px;
    margin-top: 5px;
}

.buttonDel:hover{
    background-image: -webkit-linear-gradient(top, #fff, #f4f1ee);
    background-image: linear-gradient(top, #fff, #f4f1ee);
    color:#0088cc;
}

.cross:hover:after{
    color:#eb2f2f;
    text-shadow:0px 0px 6px #eb2f2f;
}

.buttonDel:active{
    background-image: -webkit-linear-gradient(top, #efedec, #f7f4f4);
    background-image: linear-gradient(top, #efedec, #f7f4f4);
    box-shadow: 0 3px 5px 0 rgba(0,0,0,.4), inset 0px -3px 1px 1px rgba(204,198,197,.5);
}

.clearTable {
    border: none;
    color: #f2f2f2;
    background:...

JavaScript

$('#newabilitybtn').hide();
    $('#newlevelbtn').hide();
    $('#submit').hide();
    $('#clear').hide();

    $('#tablebtn').click(function(){ alert('Create');
        mytable = $('<table></table>').attr({ id: "MatrixTable", class: "matrix" });
        var rows = new Number($('#rowcount').val());
        var cols = new Number($('#columncount').val());
        var tr = [];

        for (var i = 0; i < rows; i++) {
            if( i == 0){
                row = $('<tr><th></th>').appendTo(mytable);
                $('<th><span>Level</span></th>').attr({ class: ["Lheader"] }).appendTo(row);
                $('</tr>').appendTo(row);
            }
            var row = $('<tr><th><span>Ability</span><br/><br/><a id="row" class="buttonDel cross" title="Delete Row"></a></th>').attr({ class: ["Aheader"] }).appendTo(mytable);
            for (var j = 0; j < cols; j++) {
                var td = $('<td>').attr({ class: ["matrix_td"] }).appendTo(row);
                var input = $("<input type='text'>").appendTo(td);
            input.autocomplete({
                source: ["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
                minLength: 1,
				select: function(event, ui ) {

                   var $a =  $(this).parent().find('.ui-anchor');
                   var $rub_cell =  $(this).parent().find('input[id^="rubric_cell"]');
                   $( $rub_cell ).val (ui.item.value );
                   $($a).attr('href','/doc/'+ ui.item.value);
                   $($a).html(ui.item.value);
				}
            });
            $('<div>').attr({ class: ["ui-widget"],  style : "margin-top:2em; font-family:Arial" }).appendTo(td);
            $('<a>').attr({ class: ["ui-anchor"] , href:"" }).appendTo(td);
            $("<input type='hidden'>").attr({ id: "rubric_cell_"+ parseInt(i+1 , 10 ) +"_" + parseInt(j+1 , 10) }).appendTo(td);
            $('</div>').appendTo(td);
            $('</td>').appendTo(row);
        }
        $('</tr>').appendTo(row);
   ...