Skip to content

Instantly share code, notes, and snippets.

@jineeshjohn
Last active December 5, 2018 18:59
Show Gist options
  • Save jineeshjohn/2044414 to your computer and use it in GitHub Desktop.
Save jineeshjohn/2044414 to your computer and use it in GitHub Desktop.
Dynamic html table rows and column creation with jQuery
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<style>
table{
width:500px;
height:500px;
}
table td{
padding:10px;
margin:10px;
border:1px solid #ccc;
}
</style>
<script>
function createTable(){
mytable = $('<table></table>').attr({ id: "basicTable" });
var rows = new Number($("#rowcount").val());
var cols = new Number($("#columncount").val());
var tr = [];
for (var i = 0; i < rows; i++) {
var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(mytable);
for (var j = 0; j < cols; j++) {
$('<td></td>').text("text1").appendTo(row);
}
}
console.log("TTTTT:"+mytable.html());
mytable.appendTo("#box");
}
</script>
Row Count:<input type="text" id="rowcount" />
Column Count:<input type="text" id="columncount" />
<input type="button" onclick="createTable();" value="Create Table" />
<div id="box">
</div>
@ansarisufiyan777
Copy link

function createTableDynamically(){
var table = "

";
for (var key in Object.keys(data[0])) {
table += "";
}
table += "";
for (var position in data) {
table += "<tr company-id='" + data[position]['PublicCompanyId'] + "'>"
for (var key in data[position]) {
table += "";
}
table += "";
}
table += "
" + Object.keys(data[0])[key] + "
" + data[position][key] + "
";
$("#DIVID").empty();
$("#DIVID").html(table);

}

your JSONshould look like this

[ { "id":28, "Title":"Sweden" }, { "id":56, "Title":"USA" }, { "id":89, "Title":"England" } ]

@abhishek-sisodiya
Copy link

i'm generating table dynamically using jquery.
http://jsfiddle.net/qvh7yeut/

now what im trying is to remove selected option in other dropdowns

can anybody help?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment