How to optimize jquery script (table creation N rows X 56 cols) - javascript

Hi I have a jquery scripts that takes table template and adds N rows (N=[1...100]) as clones of first TR. then each cell in each row is populated with some data (not all cells are always filled), each cell has " on clik " event attached, and on cell hover row, cell, coll is highlighted.
The problem i am facing is the optimization of generation (time) and usability (the mouse movemnts aren't smooth)
the code:
HTML template table:
<table id='schedulerview' class='myGrid'>
<colgroup id='col_0'></colgroup>
<colgroup id='col_1'></colgroup>
<colgroup id='col_2'></colgroup>
<colgroup id='col_3'></colgroup>
....
<colgroup id='col_55'></colgroup>
<thead>
<tr>
<th>0</th>
<th>1</th>
<th>2</th>
<th>3</th>
....
<th>51</th>
</tr>
</thead>
<tbody>
<tr id='template' style='display:none'>
<td id='0' HID='W0_Y_I' class='scheddata'>Week 1</td>
.....
<td id='51' HID='W55_Y_I' class='scheddata'>Week 52</td>
</tr>
</tbody>
</table>
CSS :
.litrow { background-color: #eee; }
.litcell { background-color: yellow; }
file codebehind.js
$(document).ready(function () {
//turn on row, cell, column highlight on hover
$("table#schedulerview tbody").on('mouseenter', 'tr', function () {
$(this).addClass('litrow');
});
$("table#schedulerview tbody").on('mouseleave', 'tr', function () {
$(this).removeClass('litrow');
});
$("table#schedulerview tbody").on('mouseenter', 'td', function () {
$(this).addClass('litcell');
$("colgroup").eq($(this).index()).addClass("litrow");
});
$("table#schedulerview tbody").on('mouseleave', 'td', function () {
$(this).removeClass('litcell');
$("colgroup").eq($(this).index()).removeClass("litrow");
});
//function for getting data and create schedule table from template table
getSchedule();
});
getschedule function:
function getSchedule() {
var data = "{userid:'" + userid + "',year:" + year + "}";
$.ajax({
type: "POST",
url: "/Scheduler.aspx/getSchedule",
data: data,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (ret) {
var areas = JSON.parse(ret.d.Areas);
var schedule = JSON.parse(ret.d.Schedule);
//remove all rows from table that are not template
$('table#schedulerview tr.eventSchedule').remove();
//create row for each element from DB - prepare matrix elementsXWeeks
var $tr = $('#template');
$.each(areas, function (i, x) {
var $clone = $tr.clone();
$clone.css('display', 'block');
$clone.attr('id', 'new_row_' + i);
$clone.addClass('eventSchedule');
$clone.children('td:first').text(x.AreaName);
//for each cell in new row
$clone.children('td.scheddata').each(function () {
var $this = $(this);
var HID = $this.attr("HID").replace('_Y_', '_' + year + '_').replace('_I', '_' + x.IDObszaru);
$this.attr("HID", HID);
});
$tr.before($clone);
});
//fill in the matrix with scheduled data
$.each(schedule, function (i, x) {
$td = $("table#schedulerview td[HID='" + x.HID + "']");
$td.addClass(x.Status);
$td.attr("WeekNum", x.WeekNum);
$td.attr("PlanID", x.Id);
$td.parent().addClass('plannedrow');
});
},
error: function (ret) {
alert(ret.responseText);
}
});
}
The getSchedule() function lasts few seconds, is it possible to optimize it so it would be faster?
CHANGES:
I've tried different approach for row creation:
for (i = 0; i < areas.length; i++) {
$lasttr = $("table#schedulerview tbody").append("<tr id='new_row_" + i + "' class='eventSchedule' ></tr>");
$lasttr = $("table#schedulerview tbody tr#new_row_" + i);
for (j = 0; j < 56; j++) {
var sclass = "";
if (j == 0)
$lasttr.append("<td>" + areas[i].AreaName + "</td>");
if (j == 1)
$lasttr.append("<td>" + areas[i].AreaSubName + "</td>");
if (j == 2)
$lasttr.append("<td>" + areas[i].AreaParentName + "</td>");
if (j > 2) {
sclass = "'scheddata'";
k = j - 2;
$lasttr.append("<td class=" + sclass + " HID='W" + k + "_" + year + "_" + areas[i].AreaID + "'></td>");
}
}
}
but it's not fast enough- and the problem with hovering remains. (also when using css :hover pseudoclass.

Can you do something like this?
$(function () {
for (i = 0; i < 56; i++)
$("thead tr").append("<th>" + (i+1) +"</th>");
for (i = 0; i < 20; i++){
$("tbody").append("<tr />");
for (j = 0; j < 56; j++)
$("tbody tr:last-child").append("<td>" + ((i+1) + ": " + (j+1)) +"</td>");
}
});
table tr:hover td {background: #99f;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<thead><tr></tr></thead>
<tbody></tbody>
</table>

Related

JQUERY dynamically created table. Trying to hide entire column

This is creating my table and working - It creates a table and I am going to have it check a list to hide columns. For testing purposes I am trying to hide the colun "Proj_Type" it does hide the header but does not hide the actual column of data. I want the entire thing to hide.
function createTab(Name, id) {
var $button = $('<button/>', {
'class': 'tablinks',
'onclick': 'return false;',
'id': name,
text: Name,
click: function () {
return false;
}
});
var $div = $('<div>').prop({
id: Name,
'name': id + 'MKTTAB',
className: 'tabcontent'
})
var $table = $('<table/>', {
'class': 'GRD1',
id: id + "GRDMKTLIST",
}
)
$table.append('<caption>' + Name + '</caption>')
var $tbody = $table.append('<tbody />').children('tbody');
$tbody.append('<tr />').children('tr:last');
$.ajax({
type: "POST",
url: "../WebMethods/MarketPersuitMethods.aspx/GetQueryInfo",
data: {},
contentType: "application/json; charset=utf-8",
dataType: 'json',
async: false,
success: function (d) {
var data = $.parseJSON(d.d);
var colHeader = Object.keys(data[0]);
for (var i = 0; i < colHeader.length; i++) {
if (colHeader[i] != "notes") {
$tbody.append("<th>" + colHeader[i] + "</th>");
}
}
//sets new line
$tbody.append('<tr />').children('tr:last')
for (var i = 0; i < data.length; i++) {
for (var j = 0; j < colHeader.length; j++) {
if (colHeader[j] != "notes") {
$tbody.append('<td>' + data[i][colHeader[j]] + '</td>');
}
}
$tbody.append('<tr />').children('tr:last')
}
setTimeout(function () {
}, 1000);
}
});
$($table.find('th')).each(function () {
var indextest = $(this).index() + 1;
if ($(this).text() == "Proj_Type") {
$('[id*=GRDMKTLIST] td:nth-child(' + indextest + '),th:nth-child(' + indextest + ')').hide();
}
})
$button.appendTo('#tabs');
$table.appendTo($div);
$div.appendTo('#TabbedMktList');
}
However, on the bottom where i have
if ($(this).text() == "Proj_Type") {
$('[id*=GRDMKTLIST] td:nth-child(' + indextest + '),th:nth-child(' + indextest + ')').hide();
}
This only hides the header and I am trying to hide the entire column TD included.
There are two main issues:
$('[id*=GRDMKTLIST]
will look in the DOM, but your $table has not yet been added to the DOM, so does nothing. Use $table.find(... to use the $table variable in memory.
$tbody.append('<td
will append the td (and equivalent code for th) to the tbody - but these should be in a tr.
The browser will do some "magic" and see an empty <tr></tr> and put a new row in for you, but selectors for tbody > tr > td won't work. This also means there's only a single :nth-child(n) per n, not per row (as all cells across all rows are siblings).
You can add a new row to $tbody and return the new row by using .appendTo
$tr = $("<tr>").appendTo($tbody);
then add the th/td to $tr and not $tbody
$tr.append('<td...`
Regarding the selector for $table.find("td,th") you don't need the th part as you're looping th and it's already this, so you can do:
$(this).hide();
$table.find('td:nth-child(' + indextest + ')').hide();
Also make sure you only create tr as you need it. Your code create a tr before the data row loop and inside the data row loop, leaving an empty tr.
for (var i = 0; i < data.length; i++) {
$tr = $("<tr>").appendTo($tbody);
for (var j = 0; j < colHeader.length; j++) {
if (colHeader[j] != "notes") {
$tr.append('<td id=' + colHeader[j] + '>' + data[i][colHeader[j]] + '</td>');
}
}
}
Also updated in the fiddle: https://jsfiddle.net/n168ra2g/3/

Select table cell as a group

In this table, I want to select multiple cells as a group.
You can select a target cell by clicking on it,
but I also want to click and drag to cover multiple cells as a group.
Is that possible to achieve that without any plugins (just use JQuery)?
This is what I want to achieve:
The array content will be:
["3-2", "3-3", "4-2", "4-3", "5-2", "5-3"]
Here is what I try so far:
var group = [];
var columnIndex = 7,
rowIndex = 10;
var $tableContainer = $('#tablecontainer'),
$table = $tableContainer.append('<table border="1" id="table1"></table>'),
$thead = $table.find('table').append('<thead></thead>'),
$tbody = $table.find('table').append('<tbody></tbody>');
var $columnNumber = "";
var $tdNumber = "";
for (var col = 1; col <= columnIndex; col++) {
$columnNumber += "<th>Column " + col + "</th>";
$tdNumber += "<td style='text-align: center; vertical-align: middle; color:red'></td>";
}
$thead = $thead.append('<tr><th>0</th>' + $columnNumber + '</tr>');
for (var row = 1; row <= rowIndex; row++) {
$tbody = $tbody.append('<tr><td>Row ' + row + '</td>' + $tdNumber + '</tr>');
}
$('#table1 > tbody > tr > td').hover(function() {
var colIndex = $(this).parent().children().index($(this));
var rowIndex = $(this).parent().parent().children().index($(this).parent());
$(this).attr("title", 'Row: ' + rowIndex + ', Column: ' + colIndex);
// console.log('Row: ' + rowIndex + ', Column: ' + colIndex);
});
$('#table1 > tbody > tr > td').click(function() {
var colIndex = $(this).parent().children().index($(this));
var rowIndex = $(this).parent().parent().children().index($(this).parent());
group.push(rowIndex + "-" + colIndex);
console.log(group);
$(this).css("background-color", "red");
// console.log('Row: ' + rowIndex + ', Column: ' + colIndex);
});
#table1>tbody>tr>td:hover {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tablecontainer"></div>
Any help would be appreciated!
The functionality you want to achieve is possible by using jquery mouseover function.
I made a fiddle to get the desired output as you expect.
Fiddle
Hope this helps you in solving the issue.
-Help :)

Possible to only run code block inside for loop once?

I'm using the loop to find whole table columns containing cells with a certain class and it works fine for applying class and the other stuff below. The only problem is that I would also like to output the value of the cells once. Is this possible somehow?
$('td:first-child').each(function() {
for (var i = 0; i <= 5; i++) {
var col = $('.tabell tr').find('td:nth-child(' + i + ').check').length;
if (col == 5) {
$(".bingocl").fadeIn(2000);
var column = $('.tabell tr').find('td:nth-child(' + i + ')');
column.addClass("bingo", 2000);
var text = column.text().toUpperCase();
$("#textout").append(text + "!!");
}
}
});
Update:
$('td:first-child').each(function() {
for(var i = 0; i <= 5; i++) {
var col = $('.tabell tr').find('td:nth-child(' + i + ').check').length;
var column = $('.tabell tr').find('td:nth-child(' + i + ')');
if (col == 5) {
$( ".bingocl" ).fadeIn(2000);
column.addClass("bingo", 2000);
column.each(function() {
$("#textout").append($(this).html() + " ");
});
break;
}
}
});
function in it's entirety:
var main = function() {
//Styling the rows
$(".tabell tbody").find("tr").each(function(idx) {
var row = $(this);
if (row.find("td").length == row.find("td.check").length) {
row.addClass("bingo");
$(".bingocl").fadeIn(2000);
var text = row.find("td").text().toUpperCase();
$("#textout").append(text + "!!");
}
});
//styling cols
$('td:first-child').each(function() {
for (var i = 0; i <= 5; i++) {
var col = $('.tabell tr').find('td:nth-child(' + i + ').check').length;
if (col == 5) {
$(".bingocl").fadeIn(2000);
var column = $('.tabell tr').find('td:nth-child(' + i + ')');
column.addClass("bingo", 2000);
var text = column.text().toUpperCase();
$("#textout").append(text + "!!");
break;
}
}
});
}
$(document).ready(main);
Provided you already have access to your winning row/column (you add a bingo class to them), you can access each individual element to output it's value.
Your code becomes:
var main = function() {
//Styling the rows
$(".tabell tbody").find("tr").each(function(idx) {
var row = $(this);
if (row.find("td").length == row.find("td.check").length) {
row.addClass("bingo");
$(".bingocl").fadeIn(2000);
// Iterate your row elements
row.each(function(){document.write($(this).html() + " ");});
}
});
//styling cols
//$('td:first-child').each(function() { <- remove this
for (var i = 0; i <= 5; i++) {
var col = $('.tabell tr').find('td:nth-child(' + i + ').check').length;
if (col == 5) {
$(".bingocl").fadeIn(2000);
var column = $('.tabell tr').find('td:nth-child(' + i + ')');
column.addClass("bingo", 2000);
// Iterate your column elements
column.each(function(){document.write($(this).html() + " ");});
break;
}
}
//}); <- remove this
}
$(document).ready(main);
Live example
var column = $(".selected_column");
var row = $(".selected_row");
column.addClass("bingo");
row.addClass("bingo");
column.each(function() {
$("#textout").append($(this).html() + " ");
});
row.each(function() {
$("#textout").append($(this).html() + " ");
});
.selected_column {
background: blue;
}
.selected_row {
background: yellow;
}
.selected_column.selected_row {
background: green;
}
.bingo {
border: 2px solid lime;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>A</td>
<td class="selected_column">B</td>
<td>C</td>
<td>D</td>
<td>E</td>
</tr>
<tr>
<td>F</td>
<td class="selected_column">G</td>
<td>H</td>
<td>I</td>
<td>J</td>
</tr>
<tr>
<td>K</td>
<td class="selected_column">L</td>
<td>M</td>
<td>N</td>
<td>O</td>
</tr>
<tr>
<td class="selected_row">P</td>
<td class="selected_column selected_row">Q</td>
<td class="selected_row">R</td>
<td class="selected_row">S</td>
<td class="selected_row">T</td>
</tr>
<tr>
<td>U</td>
<td class="selected_column">V</td>
<td>W</td>
<td>X</td>
<td>Y</td>
</tr>
</table>
<p id="textout">#textout : </p>
You can do column.html(); to get the cell content
You could always try with break.
Link: MDN
Try to use break:
$('td:first-child').each(function() {
for (var i = 0; i <= 5; i++) {
var col = $('.tabell tr').find('td:nth-child(' + i + ').check').length;
if (col == 5) {
$(".bingocl").fadeIn(2000);
var column = $('.tabell tr').find('td:nth-child(' + i + ')');
column.addClass("bingo", 2000);
var text = column.text().toUpperCase();
$("#textout").append(text + "!!");
break;
}
}
});

Parsing JSON objects for HTML table

I am trying to display a "leaderboard" table based on JSON data.
I have read a lot about the JSON format and overcome some initial obstacles, but my Javascript knowledge is very limited and I need help!
Basically my JSON data comes through looking like this:
[{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}]
What I need is to be able to loop through this array, generating a table row or list item for each object. There will be an unknown amount of total objects in the array but each will have the same format- three values: Name, Score, Team.
So far I have used the following code, which confirms that I am successfully loading the objects in the console-
$.getJSON(url,
function(data){
console.log(data);
});
but I am not sure how to iterate over them, parsing them into the HTML table.
The next step is sorting the entries by score in descending order...
Any help would be much appreciated.
Thanks!
EDIT:
Updated code below, this works:
$.getJSON(url,
function (data) {
var tr;
for (var i = 0; i < data.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + data[i].User_Name + "</td>");
tr.append("<td>" + data[i].score + "</td>");
tr.append("<td>" + data[i].team + "</td>");
$('table').append(tr);
}
});
(The $.parseJSON was not necessary, we can use 'data' as the JSON array is already parsed I believe)
Loop over each object, appending a table row with the relevant data each iteration.
$(document).ready(function () {
$.getJSON(url,
function (json) {
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].User_Name + "</td>");
tr.append("<td>" + json[i].score + "</td>");
tr.append("<td>" + json[i].team + "</td>");
$('table').append(tr);
}
});
});
JSFiddle
You can use simple jQuery jPut plugin
http://plugins.jquery.com/jput/
<script>
$(document).ready(function(){
var json = [{"name": "name1","score":"30"},{"name": "name2","score":"50"}];
//while running this code the template will be appended in your div with json data
$("#tbody").jPut({
jsonData:json,
//ajax_url:"youfile.json", if you want to call from a json file
name:"tbody_template",
});
});
</script>
<div jput="tbody_template">
<tr>
<td>{{name}}</td>
<td>{{score}}</td>
</tr>
</div>
<table>
<tbody id="tbody">
</tbody>
</table>
Loop over each object, push in string array and join them. Append in target table, it is better.
$(document).ready(function () {
$.getJSON(url,
function (json) {
var tr=[];
for (var i = 0; i < json.length; i++) {
tr.push('<tr>');
tr.push("<td>" + json[i].User_Name + "</td>");
tr.push("<td>" + json[i].score + "</td>");
tr.push("<td>" + json[i].team + "</td>");
tr.push('</tr>');
}
$('table').append($(tr.join('')));
});
You can use KnockoutJS with jQuery. KnockoutJS have smart data-binding features. By using the foreach binding feature you can write your code like this example:
HTML:
<table>
<thead>
<tr>
<th>User Name</th>
<th>Score</th>
<th>Team</th>
</tr>
</thead>
<tbody data-bind="foreach: teams">
<tr>
<td data-bind="text: User_Name"></td>
<td data-bind="text: score "></td>
<td data-bind="text: team "></td>
</tr>
</tbody>
</table>
JavaScript:
$(document).ready(function () {
$.getJSON(url,function (json) {
ko.applyBindings({
teams: json
});
}
});
});
Fiddle Demo with your dummy data
Make a HTML Table from a JSON array of Objects by extending $ as shown below
$.makeTable = function (mydata) {
var table = $('<table border=1>');
var tblHeader = "<tr>";
for (var k in mydata[0]) tblHeader += "<th>" + k + "</th>";
tblHeader += "</tr>";
$(tblHeader).appendTo(table);
$.each(mydata, function (index, value) {
var TableRow = "<tr>";
$.each(value, function (key, val) {
TableRow += "<td>" + val + "</td>";
});
TableRow += "</tr>";
$(table).append(TableRow);
});
return ($(table));
};
and use as follows:
var mydata = eval(jdata);
var table = $.makeTable(mydata);
$(table).appendTo("#TableCont");
where TableCont is some div
This one is ugly, but just want to throw there some other options to the mix. This one has no loops. I use it for debugging purposes
var myObject = {a:1,b:2,c:3,d:{a:1,b:2,c:3,e:{a:1}}}
var myStrObj = JSON.stringify(myObject)
var myHtmlTableObj = myStrObj.replace(/{/g,"<table><tr><td>").replace(/:/g,"</td><td>","g").replace(/,/g,"</td></tr><tr><td>","g").replace(/}/g,"</table>")
$('#myDiv').html(myHtmlTableObj)
Example:
var myObject = {a:1,b:2,c:3,d:{a:1,b:2,c:3,e:{a:1}}}
var myStrObj = JSON.stringify(myObject)
var myHtmlTableObj = myStrObj.replace(/\"/g,"").replace(/{/g,"<table><tr><td>").replace(/:/g,"</td><td>","g").replace(/,/g,"</td></tr><tr><td>","g").replace(/}/g,"</table>")
$('#myDiv').html(myHtmlTableObj)
#myDiv table td{background:whitesmoke;border:1px solid lightgray}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id='myDiv'>table goes here</div>
another nice recursive way to generate HTML from a nested JSON object (currently not supporting arrays):
// generate HTML code for an object
var make_table = function(json, css_class='tbl_calss', tabs=1){
// helper to tabulate the HTML tags. will return '\t\t\t' for num_of_tabs=3
var tab = function(num_of_tabs){
var s = '';
for (var i=0; i<num_of_tabs; i++){
s += '\t';
}
//console.log('tabbing done. tabs=' + tabs)
return s;
}
// recursive function that returns a fixed block of <td>......</td>.
var generate_td = function(json){
if (!(typeof(json) == 'object')){
// for primitive data - direct wrap in <td>...</td>
return tab(tabs) + '<td>'+json+'</td>\n';
}else{
// recursive call for objects to open a new sub-table inside the <td>...</td>
// (object[key] may be also an object)
var s = tab(++tabs)+'<td>\n';
s += tab(++tabs)+'<table class="'+css_class+'">\n';
for (var k in json){
s += tab(++tabs)+'<tr>\n';
s += tab(++tabs)+'<td>' + k + '</td>\n';
s += generate_td(json[k]);
s += tab(--tabs)+'</tr>' + tab(--tabs) + '\n';
}
// close the <td>...</td> external block
s += tab(tabs--)+'</table>\n';
s += tab(tabs--)+'</td>\n';
return s;
}
}
// construct the complete HTML code
var html_code = '' ;
html_code += tab(++tabs)+'<table class="'+css_class+'">\n';
html_code += tab(++tabs)+'<tr>\n';
html_code += generate_td(json);
html_code += tab(tabs--)+'</tr>\n';
html_code += tab(tabs--)+'</table>\n';
return html_code;
}
Here are two ways to do the same thing, with or without jQuery:
// jquery way
$(document).ready(function () {
var json = [{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}];
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].User_Name + "</td>");
tr.append("<td>" + json[i].score + "</td>");
tr.append("<td>" + json[i].team + "</td>");
$('table').first().append(tr);
}
});
// without jquery
function ready(){
var json = [{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}];
const table = document.getElementsByTagName('table')[1];
json.forEach((obj) => {
const row = table.insertRow(-1)
row.innerHTML = `
<td>${obj.User_Name}</td>
<td>${obj.score}</td>
<td>${obj.team}</td>
`;
});
};
if (document.attachEvent ? document.readyState === "complete" : document.readyState !== "loading"){
ready();
} else {
document.addEventListener('DOMContentLoaded', ready);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>User_Name</th>
<th>score</th>
<th>team</th>
</tr>
</table>'
<table>
<tr>
<th>User_Name</th>
<th>score</th>
<th>team</th>
</tr>
</table>
I spent a lot of time developing various reports. So, now I have an idea - create a web framework for building web reports. I have started here:
https://github.com/ColdSIce/ReportUI
Now it is an angular 4 module. You can pass your json data to TableLayoutComponent and get a HTML table as result. Table already has fixed header. Also you can fix some your columns by default or by click. More there, you can customize table properties like background-color, font-color, row-height etc.
If you are interested you can join me in this project and help.
Here is an another way to parse json object into Html table
//EXTRACT VALUE FOR HTML HEADER.
// ('Book ID', 'Book Name', 'Category' and 'Price')
var col = [];
for (var i = 0; i < d.length; i++) {
for (var key in d[i]) {
if (col.indexOf(key) === -1) {
col.push(key);
}
}
}
// CREATE DYNAMIC TABLE.
var table = document.createElement("table");
// CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
var tr = table.insertRow(-1); // TABLE ROW.
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");// TABLE HEADER.
th.innerHTML = col[i];
tr.appendChild(th);
}
// ADD JSON DATA TO THE TABLE AS ROWS.
for (var i = 0; i < d.length; i++) {
tr = table.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = d[i][col[j]];
}
}
// FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
var divContainer = document.getElementById("showData");
divContainer.innerHTML = "";
divContainer.appendChild(table);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
This code will help a lot
function isObject(data){
var tb = document.createElement("table");
if(data !=null) {
var keyOfobj = Object.keys(data);
var ValOfObj = Object.values(data);
for (var i = 0; i < keyOfobj.length; i++) {
var tr = document.createElement('tr');
var td = document.createElement('td');
var key = document.createTextNode(keyOfobj[i]);
td.appendChild(key);
tr.appendChild(td);
tb.appendChild(tr);
if(typeof(ValOfObj[i]) == "object") {
if(ValOfObj[i] !=null) {
tr.setAttribute("style","font-weight: bold");
isObject(ValOfObj[i]);
} else {
var td = document.createElement('td');
var value = document.createTextNode(ValOfObj[i]);
td.appendChild(value);
tr.appendChild(td);
tb.appendChild(tr);
}
} else {
var td = document.createElement('td');
var value = document.createTextNode(ValOfObj[i]);
td.appendChild(value);
tr.appendChild(td);
tb.appendChild(tr);
}
}
}
}
For those interested in a general solution in plain Vanilla JS. It works independently of the number of columns you have in your json.
const myData = [{"User_Name":"John Doe","score":"10","team":"1"},{"User_Name":"Jane Smith","score":"15","team":"2"},{"User_Name":"Chuck Berry","score":"12","team":"2"}]
const createTable = (json) => {
let table = document.getElementById('js-table')
for (let row of json) {
let newRow = table.insertRow();
for (let cell of Object.values(row)) {
let newCell = newRow.insertCell();
let newText = document.createTextNode(cell);
newCell.appendChild(newText);
}
}
}
createTable(myData)
<table>
<tbody id="js-table">
</tbody>
</table>
This post is very much helpful to all of you
First Parse the json data by using jquery eval parser and then iterarate through jquery each function below is the code sniplet:
var obj = eval("(" + data.d + ")");
alert(obj);
$.each(obj, function (index,Object) {
var Id = Object.Id;
var AptYear = Object.AptYear;
$("#ddlyear").append('<option value=' + Id + '>' + AptYear + '</option>').toString();
});

Drap-n-drop HTML table columns (not rows)

I've found dragtable http://www.danvk.org/wp/dragtable/ but I need a Jquery-based solution. May be I'm missing something?
The plugin jqGrid (latest versions at github repo) has a feature to re-order columns - the documentation is here. It does not appear to have drag/drop support for re-ordering columns however.
Here is a custom working sample of draggable table columns using only jQuery and jQuery UI sortable interaction.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<script src="jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="jquery-ui-1.8.1.custom.css">
<style type="text/css">
th
{
background-color: #e0e0e0;
cursor: pointer;
}
.ui-state-highlight
{
height: 1.5em;
line-height: 1.2em;
}
</style>
<script type="text/javascript">
$(function() {
var $table1 = $('#table1');
var $table1Thead = $table1.find('thead');
var $table1Tbody = $table1.find('tbody');
var maxCols = 10;
var maxRows = 50;
// populate fake data
for (var i = 1; i <= maxCols; i++) {
$table1Thead.append('<th id="column' + i + '">column ' + i + '</th>');
}
var rowHtml;
for (var x = 1; x <= maxRows; x++) {
rowHtml = '<tr>';
for (var i = 1; i <= maxCols; i++) {
//rowHtml += '<td>row ' + x + ', column ' + i + '</td>';
rowHtml += '<td>column ' + i + '</td>';
}
rowHtml += '</tr>';
$table1Tbody.append(rowHtml);
}
// set an index helper on each th element
$table1Thead.find('th').each(function() {
var thElement = $(this);
thElement.data('columnIndex', $table1Thead.find('th').index(thElement));
});
$table1Thead.sortable({
items: 'th',
containment: 'parent',
helper: 'clone',
placeholder: 'ui-state-highlight',
update: function(event, ui) {
var prevPos = ui.item.data('columnIndex');
var newPos = $table1Thead.find('th').index(ui.item);
// adjust all the row elements
$table1Tbody.find('tr').find('td:eq(' + prevPos + ')').each(function() {
var tdElement = $(this);
var tdElementParent = tdElement.parent();
tdElement.remove();
tdElementParent.find('td:eq(' + newPos + ')').before(tdElement);
});
// re-set an helper indexes
$table1Thead.find('th').each(function() {
var thElement = $(this);
thElement.data('columnIndex', $table1Thead.find('th').index(thElement));
});
}
});
});
</script>
</head>
<body>
<table id="table1">
<thead>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
This JavaScript does drag-and-drop on columns. As it doesn't uses any framework you can combine it easily with any other framework.
Why do you nee a jQuery based solution when you can have one without the need of a specific framework.
Another approach to reorder columns with Jquery UI Sortable:
http://jsfiddle.net/pg7wH/
Needs
jQuery (tested with 1.7.2 - 2.0)
jQuery UI (tested with 1.8.18 - 1.10.2)
HTML:
<button id="getSorting">Get sorting</button><input id="showSorting" />
<table id="table1">
<thead class="ui-state-default"></thead>
<tbody></tbody>
</table>
JS:
$(function() {
var $table1 = $('#table1');
var $table1Thead = $table1.find('thead');
var $table1Tbody = $table1.find('tbody');
var startPos;
var oldPos;
// populate fake data
var maxCols = 10;
var maxRows = 50;
for (var i = 1; i <= maxCols; i++) {
$table1Thead.append('<th sort="' + i + '" id="column[' + i + ']">column ' + i + '</th>');
}
var rowHtml;
for (var x = 1; x <= maxRows; x++) {
rowHtml = '<tr>';
for (var i = 1; i <= maxCols; i++) {
//rowHtml += '<td>' + i + ' - ' + x + '</td>';
rowHtml += '<td>col ' + i + '</td>';
}
rowHtml += '</tr>';
$table1Tbody.append(rowHtml);
}
// Show sorting
$("button#getSorting").click(function() {
$('#showSorting').val($table1Thead.sortable('toArray', { attribute: "sort" } ))
console.log($table1Thead.sortable('toArray', { attribute: "sort" } ))
})
// The sorting
$table1Thead.sortable({
axis: "x" ,
items: 'th',
containment: 'parent',
cursor: 'move',
helper: 'clone',
distance: 5,
opacity: 0.5,
placeholder: 'ui-state-highlight',
start: function(event, ui) {
startPos = $table1Thead.find('th').index(ui.item);
oldPos = startPos;
},
change: function(event, ui) {
// Get position of the placeholder
var newPos = $table1Thead.find('th').index($table1Thead.find('th.ui-state-highlight'));
// If the position is right of the original position, substract it by one in cause of the hidden th
if(newPos>startPos)newPos--;
// move all the row elements
//console.log('Move: 'oldPos+' -> '+newPos);
$table1Tbody.find('tr').find('td:eq(' + oldPos + ')').each(function() {
var tdElement = $(this);
var tdElementParent = tdElement.parent();
if(newPos>oldPos)// Move it the right
tdElementParent.find('td:eq(' + newPos + ')').after(tdElement);
else// Move it the left
tdElementParent.find('td:eq(' + newPos + ')').before(tdElement);
});
oldPos = newPos;
}
});
});
Thanks to Nate Pinchot for his example.

Categories