JQUERY dynamically created table. Trying to hide entire column - javascript

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/

Related

Getting undefined when trying to fetch an ID from a data attribute

I can't figure out why am I getting undefined when trying to console.outthe iUsedId variable from the code below.
Here I attatch the user id to data-iUserId.
var aUsers = [];
for( var i = 0; i < aUsers.length; i++ ){
$("#lblUsers").append('<tr><th scope="row">'+aUsers[i].id+'</th><td>'+aUsers[i].username+'</td><td>'+aUsers[i].firstName+'</td><td>'+aUsers[i].lastName+'</td><td>'+aUsers[i].email+'</td><td>'+"<span data-iUserId='"+aUsers[i].id+"'</span><input type='checkbox' id='chk_"+i+"'"+'</td></tr>');
}
And here I am trying to use the data from the data attribute, but in the console all I get is undefined.
$(document).ready(function() {
$("#remove").on("click", function() {
$('input:checked').each(function() {
$(this).closest('tr').remove();
var iUserId = $(this).attr('data-iUserId');
console.log(iUserId);
for (var i = 0; i < aUsers.length; i++) {
if (iUserId == aUsers[i].iUsersId) {
aUsers.splice(i, 1);
}
}
});
});
});
Any gueses? Please help!
You are deleting the parent with the containers, then trying to access the element.
removing the parent should be in the last step:
$(document).ready(function() {
$("#remove").on("click", function() {
$('input:checked').each(function() {
var iUserId = $(this).closest('span').attr('data-iUserId');
console.log(iUserId);
for (var i = 0; i < aUsers.length; i++) {
if (iUserId == aUsers[i].iUsersId) {
aUsers.splice(i, 1);
}
}
$(this).closest('tr').remove();
});
});
});
Also, consider the comment of #pBuch
The reason is you are looping over the checkboxes and not the span's which have the attribute you are trying to access.
$(this) refers to the checkbox and not the span in the each method you are using:
$('input:checked').each(function() {
// Inside this each statement $(this) refers
// to the the current 'input:checked' element being accessed
});
You should put the data-iUserId attribute on the checkbox since you are accessing that element.
Also! You are missing the closing '>' on the opening span tag:
<span data-iUserId='"+aUsers[i].id+"'</span>
var aUsers = [];
//...somehow populate array...
// We have to assume here that the array got populated
for (var i = 0; i < aUsers.length; i++) {
$("#lblUsers").append('<tr><th scope="row">' + aUsers[i].id + '</th><td>' + aUsers[i].username + '</td><td>' + aUsers[i].firstName + '</td><td>' + aUsers[i].lastName + '</td><td>' + aUsers[i].email + '</td><td>' + "<span data-iUserId='" + aUsers[i].id + "'></span><input type='checkbox' id='chk_" + i + "'" + '</td></tr>');
}
$(document).ready(function() {
$("#remove").on("click", function() {
$("#lblUsers").find('input[type="checkbox"]:checked').each(function() {
// fixed to get the element with the data
var iUserId = $(this).siblings('[data-iUserId]').data('iuserid');
console.log(iUserId);
for (var i = 0; i < aUsers.length; i++) {
// bad practice to use a global aUsers
if (iUserId == aUsers[i].iUsersId) {
aUsers.splice(i, 1);
}
}
$(this).closest('tr').remove();
});
});
});

ActionLink in jquery table

i am new to mvc and jquery,
i have created one table with jquery but i don't know how we add one actionlink in each row and also i need to call one function on the onclick event.
my code is given bellow
function loadData(data) {
var tab = $('<table class="myTable"></table>');
var thead = $('<thead></thead>');
thead.append('<th>Id</th><th></th>');
thead.append('<th>Username</th>');
tab.append(thead);
$.each(data, function (i, val) {
var trow = $('<tr></tr>');
trow.append('<td>' + val.empID + '</td>');
trow.append('<td>' +"" + '</td>');
trow.append('<td>' + val.empName + '</td>');
trow.append('<td>' + '#Html.ActionLink("Edit", "Edit", new { id = val.empID })' + '</td>');
tab.append(trow);
});
here i got one error
"val is not in the current context"
please anyone help me to add one actionlink with click event.
You can achieve this by changing your code as below.
function loadData(data) {
var tab = $('<table class="myTable"></table>');
var thead = $('<thead></thead>');
thead.append('<th>Id</th><th></th>');
thead.append('<th>Username</th>');
tab.append(thead);
$.each(data, function (i, val) {
var trow = $('<tr></tr>');
trow.append('<td>' + val.empID + '</td>');
trow.append('<td>' +"" + '</td>');
trow.append('<td>' + val.empName + '</td>');
trow.append('<td></td>');
tab.append(trow);
});
Try this and let me know, if you required anymore information.
Below Code Work Perfectly and Bind Table dynamically with Control.
function bindTable (data)
{
usersTable = $('<table><thead><tr>'
+ '<th style="width: 300px;">Col 1</th><th>Col 2</th><th>Col 3</th><th>Col 4</th><th>Col 5</th>'
+ '</tr></thead ></table>').attr({ class: ["dataTable row-border hover"].join(' '), id: "table", style: "border: 1px solid; background-color:#d2d2d2;" });
var rows = new Number("10");
var cols = new Number("4");
var tr = [];
if (data != null) {
for (var i = 0; i < data.length; i++) {
var row = $("<tr></tr>").attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(table);
$("<td></td>").html(data[i].Col1).appendTo(row);
$("<td></td>").html(data[i].Col2).appendTo(row);
$("<td></td>").html(data[i].Col3).appendTo(row);
$("<td></td>").html(data[i].Col4).appendTo(row);
$("<td></td>").html($('<a href=/ControllerName/Action?ParamId='+data[i].Id+'>Action</a>')).appendTo(row);
}
}
table.appendTo("#Div");
$("#table").DataTable({
"aoColumns": [null, null, null, null, { "bSortable": false }]
});
}

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

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>

Call custom function on one element at a time

I have a jQuery extension method to create custom animated drop-down select lists based on this answer. Using this method on a page with one drop-down works perfectly:
The extension method is as follows:
$.fn.extend({
slidingSelect: function (options) {
var select = $(this);
var selector = select.selector;
var width = $(selector).width();
var selectedValue = select.val();
if (selectedValue === "undefined")
selectedValue = select.find("option:first").val();
console.log($(selector + " option:selected").text());
var divToggle = $("<div class='SelectorToggle SelectorToggle-defualt'>" + $(selector + " option:selected").text() + "<button style='float: right; width: 20px' id='ddlImgBtn'></button></div>")
.attr({ id: select.attr("id") + "Toggle" })
.css({ width: select.width() + 20 })
.click(function () {
$(selector + "Toggle").toggleClass("SelectorToggle-defualt");
$(selector + "Toggle").toggleClass("SelectorToggle-pressed");
$(selector).slideToggle("fast");
}).insertBefore(select);
var optionCount = $(selector + " option").length;
if (optionCount < 5) {
select.attr("size", optionCount);
}
else {
select.attr("size", 5);
}
select.addClass("drop-down-selector");
$(selector).css({ 'width': select.width() + 20, 'position': 'absolute', "z-index": '9999' });
select.change(function () {
divToggle.html($(selector + " option:selected").text() + "<button style='float: right; width: 20px' id='ddlImgBtn'></button>");
$(selector + "Toggle").toggleClass("SelectorToggle-defualt");
$(selector + "Toggle").toggleClass("SelectorToggle-pressed");
$(selector).slideToggle("fast");
});
}
});
I call it as follows:
$("#LanguageSelector").hide().slidingSelect();
I am however having endless issues getting it to work on a page with multiple drop-downs. My dropdowns are dynamically created as part of a DataTable solution with server-side processing. The drop-downs in the footer:
If i call the following:
$("select").hide().slidingSelect();
then somehow all drop-downs on the page create the custom control:
if I attempt to call the extension method on each element individually:
$("select").hide().each(function(index) {
$(this).slidingSelect();
});
I also tried to call the extension method individually as the drop-downs are created (to just one of them):
$('#RelatedCasesGrid tfoot th').each(function () {
var col = $(this).html();
//..........
else if (col === "ComplaintTypeName") {
$(this).html(GetDropDownInput(col, caseId));
var element = $(this).find("select");
element.hide().slidingSelect();
}
The method GetDropDownInput(col, caseId) creates the drop-downs as follows:
function GetDropDownInput(col, id) {
var control;
$.ajax({
method: "GET",
dataType: "json",
async: false,
url: "/OATS/Api/GetColumnItems/" + id + "?column=" + col
}).done(function (data) {
control = "<select id='selector' class='table-filter-input-drop-down-list'><option value='' disabled selected>Filter by</option>"
for (var i = 0; i < data.length; i++) {
control += "<option col-type=" + data[i].Type + " value='" + data[i].Name + "'";
if (data[i].Selected) {
control += "selected='selected'";
}
control += ">" + data[i].Name + "</option>";
}
control += "</select>";
});
return control;
}
The result of this:
From: http://www.w3schools.com
The id attribute specifies a unique id for an HTML element (the value
must be unique within the HTML document).
But your ajax method create the same id for all selects: "selector". Change this method to create unique id (value of 'col' parameter seems be ok for this purpose), and then call:
$("#your_unique_id").hide().slidingSelect();

javascript get element in table untill a class happen

I have a huge table which most of the entries are "display:none". When the user click on an entity the rows should appear until the same class happen.
The table looks something like this:
<tbody>
<tr id="1" class="department"></tr>
<tr style="display:none;" id="43" class="sub"></tr>
<tr style="display:none;" id="55" class="sub"></tr>
<tr style="display:none;" id="85" class="sub"></tr>
<tr id="6" class="department"></tr>
<tr style="display:none;" id="150" class="sub"></tr>
</tbody>
So by clicking on id = 1 row the table should expand to show id= 43,55,85 (until reach to class="department" again)
I know it's a bit confusing so feel free to ask me questions if you need more explanation.
In plain javascript, you can do something like this:
function hasClass(elem, cls) {
var str = " " + elem.className + " ";
var testCls = " " + cls + " ";
return(str.indexOf(testCls) != -1) ;
}
var table = document.getElementById("myTable");
var rows = table.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
(function(index) {
rows[index].addEventListener("click", function(e) {
for (var i = index + 1; i < rows.length; i++) {
var row = rows[i];
if (hasClass(row, "department")) {
break;
}
row.style.display = "";
}
});
})(i);
}
Working demo: http://jsfiddle.net/jfriend00/Dh3p3/
The code uses a closure to capture the row index for each row, such that when it is clicked on, you can use that index into the previously captured array of rows. It then walks down that array showing rows until it finds an item that has the "department" class.
FYI, this puts event listeners on all the rows so if you manually show one of the hidden rows, it can be clicked on and have the same behavior. If you only want click handlers on the class="department" rows, the code can easily be modified to do that too.
Here's a version that works with a hierarchy of classes. It expands only items at the next level on a click:
function hasClass(elem, cls) {
var str = " " + elem.className + " ";
var testCls = " " + cls + " ";
return(str.indexOf(testCls) != -1) ;
}
var table = document.getElementById("myTable");
var rows = table.getElementsByTagName("tr");
for (var i = 0; i < rows.length; i++) {
(function(index) {
rows[index].addEventListener("click", function(e) {
// nothing to do if clicking on the last item
if (index + 1 >= rows.length) {
return;
}
// get class name to stop on
var clsToStopOn = this.className;
// get class name to show
var clsToShow = rows[index + 1].className;
for (var i = index + 1; i < rows.length; i++) {
var row = rows[i];
if (hasClass(row, clsToStopOn)) {
break;
}
if (hasClass(row, clsToShow)) {
row.style.display = "";
}
}
});
})(i);
}
Working multi-level demo: http://jsfiddle.net/jfriend00/9HgPt/

Categories