I have this table: https://codepen.io/anon/pen/bjvwOx
Each time I click a row (e.g 1st row 'NODE ID 1'), the div with the id #divTemplate should appear below the row as you can see in the demo link.
The problems are (I know of) :
The div displays all the contents from endpointsData object(e.g if I click on the first row,
the div should contain 'EPID: 1', not 'EPID: 1234' as you can see in demo).
The 'accordion' display of the div works chaotic. In demo you can see if you press
multiple times on a row, the div just appears in different places, till it doesn't work any more
For the 1st problem I did this: https://codepen.io/anon/pen/Owvbae (I selected each id from div)
$("#epid").text(roomValue[key[0]]);
$("#clslist").text(roomValue[key[1]]);
$("#type").text(roomValue[key[2]]);
$("#zplus").text(roomValue[key[3]]);
Is there a way I can loop this?
Any ideas for the second problem?
To fix the 'accordion' you should put it in your <tr class="header">, then use jquery and listen when pressed on it.
$('.header').on('click' function() {
// code
});
After that use $('this') to get what has been pressed, and target it's children row .children([selector]) to manipulate the acordion.
Related
I have a html table 'TemplateData' populated dynamically from a db table...so for example could end up like:
ID Name Age
1 John 23
2 Mick 27
3 Mark 29
When the user clicks an image on screen it will post back the corresponding ID value. From here I want to change the background colour of the associating row.
So for example '2' has been posted back in 'fid'. so I have tried...
function highlightRowInTable(fid) {
var dtable = $("#TemplateData");
dtable.addClass("highlightedRow");
}
However this highlightes the outer cells of the table. I only want to highlight the corresponding row.
Iv been messing around with parents and siblings but cant find any working examples on line...any ideas?
It looks like your code is selecting the entire table, and then applying a class to it, though it is hard to say for sure. If you have an event listener attached to your table, you should be able to get the child element that was clicked on and toggle its class.
document
.getElementById('table')
.addEventListener('click', function(event){
// now event refers to the part of the dom that was clicked on
console.log(event)
});
Though I'm not sure without looking at your code. if you already have listeners set up, you might need to give every row an id based on fid, so that your function could specify the id to add class to.
function highlightRowInTable(fid) {
$(fid).addClass("highlightedRow");
}
when you create your table you can add an attribute to your <tr> to help select it later when an image is clicked.
#foreach (var row in table)
{
<tr data-uid="#row[id]">
<td></td>
</tr>
}
function highlightRowInTable(fid) {
var rows = $('tr').filter('[data-uid="' + fid + '"]');
rows.addClass("highlightedRow");
}
I have logic for cells in a row to be highlighted when the first cell text is clicked working just fine. When the page loads however, I want to default the first row to be highlighted as the first row is displaying some other data based on it's id.
What works when the first cell text (id) is clicked is:
$("#simHeaderTable").find("tr").each(function () {
var tdID = $(this).find("td:first-child").text();
if (tdID == ID)
$(this).children("td").css("background-color", "#FFFF66");
else
$(this).children("td").removeAttr("style");
});
So my logic was that this finds all rows and loops over them. I checked the first cell in each row and if the cells text is equal to some id I "highlight" it with some css. I unhighlight all the others.
So now inside document ready to highlight the first row on page load I figured I would just do the following, which doesn't result in anything getting highlighted.
$("#simHeaderTable").find("tr:first-child").children("td").css("background-color", "#FFFF66");
To me, this finds the first tr/row and then finds all children that are cells/td and applies the css to set the background color to yellow. Any idea why this isn't working?
Your statement is much more complex than needed, instead of:
$("#simHeaderTable").find("tr:first-child").children("td").css("background-color", "#FFFF66");
try:
$("#simHeaderTable tr:first-child > td").css("background-color", "#FFFF66");
You can even leave out the '>' unless you have nested tables.
Usually, you only use .find() when you have a cached selector like:
var cached_obj = $('#something');
// lots of code
var cached_obj.find('.something_else');
I have an issue with a jquery mobile 1.4.2 webapp. I have a page with 2 tables that both use the column toggle button. I want to move each of these buttons to their own placeholder to allow for horizontal scrolling.
I have this working when there is one table, but I can't figure out how to specify the table id for the column toggle button, to move the button for the correct table.
<div id="colUnit"></div>
$(document).on("pageinit", "#contractDetails", function () {
$(".ui-table-columntoggle-btn").appendTo("#colUnit");
});
Is there a way to specify the table id within the jquery so that the correct button is moved to <div id="colUnit"></div>
It currently places BOTH buttons (one from each table), into <div id="colUnit"></div>
column-toggle buttons are siblings of tables and placed before them. Use .prev() to move to another place.
$("#mytable1, #mytable2")
.prev(".ui-table-columntoggle-btn")
.appendTo("#colUnit");
Update
You can also append them into a controlgroup and change their text.
<div id="colUnit" data-role="controlgroup" data-type="horizontal"></div>
Move buttons to controlgroup.
$("#mytable1, #mytable2")
.prev(".ui-table-columntoggle-btn")
.each(function () {
var text = $.mobile.path.parseUrl($(this)
.prop("href"))
.hash.substring(1);
$(this)
.text(text.split("-")[0])
.appendTo($("#colUnit")
.controlgroup("container"));
});
$("#colUnit").controlgroup("refresh");
Demo
I am trying to create an interactive to do list in which I enter text into a text box, click a button, and it adds the items underneath. So far I have successfully been able to add items to my list using the button but am not able to remove one item at a time by clicking on it, which is what I would like to be able to do. (Ideally each item would have a check box next to it and when I click that the item would disappear). So far, using the .remove() action I have only been able to make ALL of the items in my list disappear by clicking. I did some research and thought that the .on() action may be what I need. I tried it and now I cannot make items disappear at all. This is my code:
$(document).ready(function() {
$('#button').click(function() {
var toAdd=$('input[name=checkListItem]').val();
$('#item').append.('.list');
});
$(document).on('click','item',function() {
$(this).remove();
});
});
Is there anything that stands out as being incorrect? Or is there a better way to go about this? I am brand new to this and appreciate any and all feedback.Thank you!
I forked your fiddle, with corrected code: http://jsfiddle.net/XEDHJ/2/
Here's where you were having trouble:
$('.list').on('click','input',function() {
$(this).parent().remove();
});
Using on was the right idea, it's perfect for this situation. The way you use on is that you have a parent node, in this case a div with a class of list, and a number of matched child nodes, in this case any element that is an input underneath your parent node. Child nodes are denoted by the selector in the second argument. This will match any input node under your div even if they are created after the page is rendered.
Because I wrapped your input in a <div> tag, we actually want to remove that parent <div>. So we call $(this).parent().remove().
I left my original example below but this should be sufficient to get you going.
It looks like something like this is what you're looking for:
Fiddle
http://jsfiddle.net/Khesy/
JavaScript
$(document).ready(function() {
$('#button').click(function() {
$('#item').append("<div><input name='checkListItem' type='checkbox'></input>To do!</div>");
});
$('#item').on('click','input',function() {
$(this).parent().remove();
});
});
HTML
<input id="button" type="button" value="Add Item"></input>
<div id="item">
</div>
I have a table in which any time a user clicks on one of the rows it highlights the row. However as of if I have multiple rows highlighted i have to click each individual highlighted row to get rid of the highlight. I want to make it so when an individual is not clicking on the table it will get rid of the highlight on all the rows. This is the code that I am using.
//this highlights the table that has been clicked on
$('.tr_highlight').live('click',(function () {
$(this).parent().toggleClass("tr_highlight_ed");
}));
How do I get it to unhighlight(if thats a word) when clicking anywhere but the table?
You really need to post an example of the rendered markup. You don't want to do a toggleClass, you would do a removeClass selecting the parent nodes...
Assuming the following markup...
<body>
...
<table id="myTable">...</table>
...
</body>
You could bind the following..
$('body').click(function(evt){
//evt.target is what was clicked on, which bubbles up to body
//if it's anything inside #myTable, you will get the #myTable
var el = $(evt.target).closest('#myTable');
//if you didn't get #myTable, you clicked outside the table
//remove the given class from all the tr's
if (!el.length) $('#myTable .tr_highlight_ed').removeClass('tr_highlight_ed');
});
$(document).bind('click.table', function (e) {
if ( $("#my-table").has(e.target).length === 0 ) {
$("#my-table").find("tr").removeClass('tr_highlight_ed');
}
});
Everytime a user clicks anywhere on the page, it will check if the element that was clicked is inside the table; if not, we unhighlight all the rows.