I have a table that need to be hidden on page load and then shown after login
So i figured out how to remove the table on login but don't have a clue how to return it
<table class="showAfter">
<tr>
<th></th>
</tr>
</table>
function restart(){
var removeTable = document.querySelector('.showAfter');
while (removeTable.hasChildNodes()) {
removeTable.removeChild(removeTable.firstChild);
}
}
function restore(){
var addTable = document.querySelector('.showAfter');
while (!addTable.hasChildNodes()) {
append?
}
}
Thanks for the help
Here's a super cheap way to do the same.
<table class="showAfter">
<tr>
<th></th>
</tr>
</table>
var savedTable = "": // establish var on the window scope so both functions can access it.
function restart(){
var removeTable = document.querySelector('.showAfter');
savedTable = removeTable.innerHTML;
removeTable.innerHTML = "";
// while (removeTable.hasChildNodes()) {
// removeTable.removeChild(removeTable.firstChild);
// }
}
function restore(){
var addTable = document.querySelector('.showAfter');
addTable.innerHTML += savedTable;
savedTable = "";
// while (!addTable.hasChildNodes()) {
// append?
// }
}
Related
I have a table with following columns: checkbox, text, text, ...
For every selected checkbox I need to get the 2nd text value and test if contains some value.
My code so far
$('input:checkbox').each(function () {
var current = $(this);
if (current.is(':checked')) {
var txt = current.next('.inf-name').text();
if (txt.contains(inf) { ... }
}
});
razor code:
<table class="table table-bordered table-modified">
<thead>
<tr>
<th></th>
<th>State</th>
<th>Lookup Type</th>
<th>Plates</th>
<th>Notices</th>
</tr>
</thead>
<tbody>
#Html.HiddenFor(p => p.OrgUnitID, new { #Value = orgUnitId })
#for(var ind = 0; ind < records.Count(); ++ind)
{
var r = records[ind];
var i = ind;
#Html.HiddenFor(p => p.Comp[i].State, new { #Value = #r.State })
<tr>
<td>#Html.CheckBoxFor(p => p.Comp[i].Checked)</td>
<td>#r.State</td>
#if (dict.ContainsKey(r.State))
{ <td class="inf-name">#dict[r.State].ToString()</td> }
else
{ <td class="inf-name"></td> }
<td>#Html.ActionLink(#r.Plates.ToString(CultureInfo.InvariantCulture), "Plates", new { controller = "Lookup", state = #r.State})</td>
<td>#Html.ActionLink(#r.Notices.ToString(CultureInfo.InvariantCulture), "Plates", new { controller = "Lookup" }, new { state = #r.State })</td>
</tr>
}
</tbody>
</table>
where inf-name is the class on 2nd element. I can't get it done. Anyone know a solution?
using next() will get the direct sibling , you need to get parent for check box which is a <td> find the next next sibling using nextAll().eq(1) , get the text inside the that sibling using .text()
Edit :
if you want your target using classes ( provided classes will never change later ) , then just change your code to be :
$('input:checkbox').each(function () {
var current = $(this);
if (current.is(':checked')) {
var txt = current.next('.inf-name').eq(1).text();
if (txt.contains(inf) { ... }
}
});
var currentRows = $('.table tbody tr');
$.each(currentRows, function () {
$(this).find(':checkbox').each(function () {
if ($(this).is(':checked')) {
console.log($(currentRows).eq(1).val());
}
});
});
I converted a node list returned by the querySelector() method to an array but I still can't get forEach to work (I just want to add a class). Can someone tell me what I'm doing wrong?
My code is extremely simple as I'm very new to JS.
This is the HTML:
<table>
<tr>
<th>This is a th</th>
<th>This is a th</th>
<th>Target</th>
<th style="display: none;"></th>
</tr>
<tr>
<td>This is a table cell</td>
<td>This is a table cell</td>
<td>Target</td>
<td style="display: none;"></td>
</tr>
</table>
JS:
(function(){
"use strict";
var th = Array.prototype.slice.call(document.querySelectorAll("th")),
td = Array.prototype.slice.call(document.querySelectorAll("td"));
function test(index, el, array) {
el.className = "color";
}
th.forEach(test());
})();
Your argument order was wrong . This should work
(function(){
"use strict";
var th = Array.prototype.slice.call(document.querySelectorAll("th")),
td = Array.prototype.slice.call(document.querySelectorAll("td"));
function test(el, index, array) {
el.className = "color";
}
th.forEach(test);
})();
(function(){
"use strict";
var th = Array.prototype.slice.call(document.querySelectorAll("th")),
td = Array.prototype.slice.call(document.querySelectorAll("td"));
function test(el) {
el.className = "color";
}
th.forEach(function(el){
test(el);
});
})();
Try This:
Firstly you already have th in forEach, so you don't need to pass it again.
then you should do it like:
th.forEach(test);
or change the test function:
function test() {
return function(index, el, array){
el.className = "color";
};
}
th.forEach(test());
Here is a working fiddle
http://jsfiddle.net/7pVD6/
(function(){
"use strict";
var th = Array.prototype.slice.call(document.querySelectorAll("th")),
td = Array.prototype.slice.call(document.querySelectorAll("td"));
function test(el) {
el.className = "color";
}
th.forEach(function(el)
{
test(el)
});
})();
You should pass a callback that takes a single argument(the element) in the forEach
or directly pass test(el)
Hi I am struck with this problem.
I need to create a table with Onclicklisteners dynamically. so i prefered this way.
function create_weekmenu(json)
{
var column_list=json.week_list;
var menu_table=document.getElementById("weekmenu");
var row=document.createElement('tr');
for(var i=0;i<column_list.length;i++)
{
var cell=document.createElement('th');
var span_ele=document.createElement('span');
if(span_ele.addEventListener)
{
span_ele.addEventListener('click', toggletable(column_list[i]),true);
}
else if(span_ele.attachEvent)
{ // IE < 9 :(
span_ele.attachEvent('onclick', toggletable(column_list[i]));
}
span_ele.appendChild(document.createTextNode(column_list[i]))
cell.appendChild(span_ele);
row.appendChild(cell);
}
menu_table.appendChild(row);
}
The Resultant element Structure I am getting is
<table id="weekmenu">
<tr>
<th>
<span>week_one</span>
</th>
<th>
<span>week_two</span>
</th>
</tr>
</table>
But i need a Element Structure like this,
<table id="weekmenu">
<tr>
<th>
<span onclick="toggle(week_one)'>week_one</span>
</th>
<th>
<span onclick="toggle(week_two)'>week_two</span>
</th>
</tr>
</table>
Further to notice: I could see that the onclick listener is triggering while creating the element. but its not binding with the element permanently.
What would be the solution.
I prefered to construct DOM structure using appendChild() than by .innerHTML or document.write().
The problem is that you're calling the toggleTable function when you attach it. That's why it's being triggered when you create the element.
span_ele.addEventListener('click', toggletable(column_list[i]),true);
To avoid that it should be:
span_ele.addEventListener('click', toggletable, true);
But obviously that doesn't pass in the column to toggle so it's not ideal.
I would use something like:
function create_weekmenu(json)
{
var column_list=json.week_list;
var menu_table=document.getElementById("weekmenu");
var row=document.createElement('tr');
for(var i=0;i<column_list.length;i++)
{
var cell=document.createElement('th');
var span_ele=document.createElement('span');
if(span_ele.addEventListener)
{
span_ele.addEventListener('click', function(col) {
return function() {
toggletable(col);
}
}(column_list[i]),true);
}
else if(span_ele.attachEvent)
{ // IE < 9 :(
span_ele.attachEvent('onclick', function(col) {
return function() {
toggletable(col);
}
}(column_list[i]));
}
span_ele.appendChild(document.createTextNode(column_list[i]))
cell.appendChild(span_ele);
row.appendChild(cell);
}
menu_table.appendChild(row);
}
You need to make sure you attach a function to the event handler, not the result of a function.
function create_weekmenu(json) {
var column_list = json.week_list;
var menu_table = document.getElementById("weekmenu");
var row = document.createElement('tr');
for (var i = 0; i < column_list.length; i++) {
var cell = document.createElement('th');
var span_ele = document.createElement('span');
span_ele.setAttribute('onclick', 'toggletable(column_list[' + i + '])');
span_ele.appendChild(document.createTextNode(column_list[i]))
cell.appendChild(span_ele);
row.appendChild(cell);
}
menu_table.appendChild(row);
};
I have a string that is set up as Xml. This was a data set which i filled and then returned as string getXml().
I would like to grab all values under Sub-categories and have a alert show displaying each sub category.
I tried something like this but could not come right:
$.parseXML(xml).find('Table').each(function(index){
var SubCategorySystem = $(this).find('SubCategorySystem').text();
var SubCategory = $(this).find('SubCategory').text();
alert(SubCategory);
});
This is how my string looks.
<NewDataSet>
<Table>
<SubCategorySystem>Building</SubCategorySystem>
<SubCategory>Building</SubCategory>
</Table>
<Table>
<SubCategorySystem>Electrical</SubCategorySystem>
<SubCategory>Electrical</SubCategory>
</Table>
<Table>
<SubCategorySystem>Engineering</SubCategorySystem>
<SubCategory>Engineering</SubCategory>
</Table>
<Table>
<SubCategorySystem>Inspection</SubCategorySystem>
<SubCategory>Inspection</SubCategory>
</Table>
<Table>
<SubCategorySystem>Landscaping</SubCategorySystem>
<SubCategory>Landscaping</SubCategory>
</Table>
<Table>
<SubCategorySystem>Mechanical</SubCategorySystem>
<SubCategory>Mechanical</SubCategory>
</Table>
<Table>
<SubCategorySystem>Painting</SubCategorySystem>
<SubCategory>Painting</SubCategory>
</Table>
<Table>
<SubCategorySystem>Plumbing</SubCategorySystem>
<SubCategory>Plumbing</SubCategory>
</Table>
<Table>
<SubCategorySystem>Safety & Security</SubCategorySystem>
<SubCategory>Safety & Security</SubCategory>
</Table>
</NewDataSet>"
Use this function to load the xml
function loadXMLString(txt) {
try {
xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async = "false";
xmlDoc.loadXML(txt);
return (xmlDoc);
}
catch (e) {
try {
parser = new DOMParser();
xmlDoc = parser.parseFromString(txt, "text/xml");
return (xmlDoc);
}
catch (e) {
alert(e.message)
}
}
return (null);
}
and then call the function like this:
var xmlData = loadXMLString(originalxml);
Now you can simply do this:
var data = xmlData.getElementsByTagName('SubCategory');
for(var i=0;i<data.length;i++)
{
alert(data[i].textContent);
}
Check out this fiddle
I think the wrong part is that $.parseXML(xml) creates a XML Document but it does not return it as an object, so you won't be able to use jQuery methods on it.
Wrap it in an object and it should work
$($.parseXML(xml)).find('Table')
you can reference this two functions first
function getExtendedNodeValue(nodeName, xmlNode, i)
{
var node = "";
if(typeof(xmlNode.getElementsByTagName(nodeName)[i]) != "undefined" && xmlNode.getElementsByTagName(nodeName)[i].hasChildNodes())
node = xmlNode.getElementsByTagName(nodeName)[i].firstChild.nodeValue;
return node;
}
function getNodeLength(nodeName, xmlNode){
return xmlNode.getElementsByTagName(nodeName).length;
}
And below you can loop through
var len = getNodeLength("Table",xml);
var SubCategorySystem = "";
var SubCategory = "";
for(i=0;i<len;i++)
{
SubCategorySystem = getExtendedNodeValue("SubCategorySystem",xml,i);
SubCategory = getExtendedNodeValue("SubCategory",xml,i);
console.log(SubCategorySystem + " == " + SubCategory);
}
You can find this FIDDLE
I use knockoutjs to update my Html view when an Javascript (Signalr) function is fired. But the view does not update when producthub.client.showOnlineUser is called. When i apply the binding everytime the table has same content multiple times. How can i just update the view in knockoutjs?
Html:
<table id="usersTable">
<thead>
<tr>
<th>Name</th>
<th>Mail</th>
</tr>
</thead>
<tbody data-bind="foreach: seats">
<tr>
<td data-bind="text: NameFirst"></td>
<td data-bind="text: Mail"></td>
</tr>
</tbody>
</table>
Javascript:
$(document).ready(function () {
var applied = false;
var model;
producthub.client.showOnlineUser = function (userOnlineOnUrl, msg1) {
function ReservationsViewModel() {
var self = this;
self.seats = ko.observableArray(userOnlineOnUrl);
}
model = new ReservationsViewModel();
if (!applied) {
ko.applyBindings(model);
applied = true;
}
};
});
userOnlineOnUrl is an JSON-Array which changes it's data on each function call. The view (table) is not updated with it's data.
try not to call model every time just update it with function
$(document).ready(function () {
var applied = false;
var model;
function ReservationsViewModel() {
var self = this;
self.seats = ko.observableArray();
}
model = new ReservationsViewModel();
ko.applyBindings(model);
applied = true;
producthub.client.showOnlineUser = function (userOnlineOnUrl, msg1) {
model = new ReservationsViewModel();
//remove the previous data in array
model.seats.removeAll();
//Add new data to array
model.seats(userOnlineOnUrl);
$('#onlineUsers').append(msg1);
};
});