I'm looking for some help on the Javascript angle of this problem. I have a table that goes like...
<table>
<tbody>
<tr> (Row 1)
<td colspan="3">
<p>This Says Something</p>
</td>
</tr>
<tr> (Row 1a)
<td>
<select option>
</td>
</tr>
<tr> (Row 2)
<td colspan="3">
<p>This Says Something</p>
</td>
</tr>
<tr> (Row 2a)
<td>
<select option>
</td>
</tr>
<tr>
<td colspan="3">
<p>This Says Something</p>
</td>
</tr>
<tr>
<td>
<select option>
</td>
</tr>
<tbody>
</table>
There are actually more like 20 rows and row a's but I didn't think I'd want to copy them all.
I basically need to add a container row (a single row) around every two rows (# and #a). Something like:
<tr> (Container Row 1)
<td>
+<tr> (Row 1)
+<tr> (Row 1a)
</td>
</tr>
It needs to cycle through the whole table. Somehow it has to retain the HTML data inside since all of the "a"s have options.
I hope this makes sense...
Any help would be greatly appreciated, as I'm at a loss. I'm novice at best at javascript and am struggling my way through the DOM and TOM methods.
Thank you so much in advance for any help or headway.
[EDIT] For clarification, the table is already constructed from a third party database, I am editing it after it's constructed. I guess this clarifies why it would have to be javascript to be done through the DOM.
Embed another table:
<tr> (Container Row 1)
<td>
<table>
<tr><td>(Row 1a)</td></tr>
<tr><td>(Row 1b)</td></tr>
</table>
</td>
</tr>
Or if you are wanting to do that via Javascript, you can give the parent <td> an id and set it's innerHTML.
<tr> (Container Row 1)
<td id='rowX'>
</td>
</tr>
document.getElementById('rowX').innertHTML = "<table><tr><td>(Row 1a)</td></tr><tr><td>(Row 1b)</td></tr></table>";
As mentioned in another answer you can't add tr elements directly in td like you are trying.
You would first create an inner table.
If you were using jQuery you would do something like this:
//setup some click actions just to prove that they remain attached even after moving
$('#outterTable tr').click(function(){
alert('You clicked on row: '+$(this).text());
});
//update the table (group each even row with the one after it)
$('#outterTable tr:even').each(function() {
var $tr1 = $(this),
$tr2 = $tr1.next('tr'),
$t = $('<table></table>');
$('<tr></tr>').append($t).insertBefore($tr1);
//click actions will remain attached
//if that is not required, than use $tr1.remove()
$t.append($tr1).append($tr2);
});
See this live jsFiddle example.
without jQuery it may look like that:
<script type="text/javascript">
<!--
function fx(table)
{
var tmp=document.createElement('table');
tmp.appendChild(document.createElement('tbody'))
while(table.rows.length)
{
if(table.rows.length%2==0)
{
var wrapper=tmp.lastChild.appendChild(document.createElement('tr'));
wrapper.appendChild(document.createElement('td'));
wrapper.getElementsByTagName('TD')[0].appendChild(document.createElement('table'));
wrapper.getElementsByTagName('TD')[0].lastChild.appendChild(document.createElement('tbody'));
}
wrapper.getElementsByTagName('TD')[0].lastChild.lastChild.appendChild(table.getElementsByTagName('TR')[0])
}
table.parentNode.replaceChild(tmp,table);
tmp.setAttribute('border',1);
}
window.onload=function(){fx(document.getElementsByTagName('table')[0]);}
//-->
</script>
Example#jsFiddle
But: why do you need this grouping?
If the only benefit is a visible grouping I would prefer to do this by setting the borders of the cells .
Give all cells a border and to the even a border-top:none / to the odd a border-bottom: none
Related
I have the following code:
<td class="bedrag">
#_ATT{Factuur bedrag}
</td>
<td class="paid">
#_ATT{Betaald}{Ja|Nee}
</td>
In the td paid the option can be given for Yes or No. I would like change the background of bedrag depending on what was chosen in the td paid. I figured the best way to go was to addClass using Javascript. So I googled around for a while and found this piece of code:
jQuery('a:contains("Sponsored")').closest('.post-item').addClass('sponz');
I changed it to fit my needs:
$('.paid:contains("Nee")').closest('.bedrag').addClass('sponz');
But that didn't work. So I tried the following code:
$('.paid:contains("Nee")').addClass('sponz');
This adds the class sponz to the td paid. But I want to add it to bedrag. So I then tried this:
('.bedrag:has(.paid:contains("Nee"))').addClass('sponz');
But this also didn't work.
Anyone know how to get this code working so that it will add sponz the the td bedrag when a user selects the option Nee? thanks in advance!
closest() isn't quite what you need as that looks for parents. .bedrag is a sibling of .paid, so you need to use prev() instead:
$('.paid:contains("Nee")').prev('.bedrag').addClass('sponz');
.sponz { color: #C00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="bedrag">bedrag 1</td>
<td class="paid">Nee</td>
</tr>
<tr>
<td class="bedrag">bedrag 2</td>
<td class="paid">Ja</td>
</tr>
<tr>
<td class="bedrag">bedrag 3</td>
<td class="paid">Nee</td>
</tr>
</table>
Can't you just do an if?
if ($('.paid:contains("Nee")').length !== 0) { // there's at least an element
// add class to the right element
}
I have a pretty basic table at the moment:
I need to be able to only hightlight one row in each column, and deselect whatever was selected before it..
I understand I'm going to need a CSS class, e.g.
.hightlighted {
background: #f00;
color: #fff;
}
The HTML in the view is pretty basic also:
<tbody>
<tr>
<td> </td>
<td>Differdange</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Dippach</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Dudelange</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Echternach</td>
<td></td>
</tr>
<tr>
<td> </td>
<td>Erpelscheid</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Esch-sur-Alzette</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Esch-sur-Sûre</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Ettelbruck</td>
<td> </td>
</tr>
<tr>
<td> </td>
<td>Feulen</td>
<td> </td>
</tr>
</tbody
But I don't know whether it's appropriate to highlight/unhighlight rows in CSS if I am going to be needing to 'grab' the selected data from the rows when the table is completed by the user?
Can anyone suggest what I should use (JQuery, Javascript, CSS) to highlight a row in a column so that I can get the data later?
EDIT
Now I've got the highlighting sorted, the only problem I'm having is differentiating between columns so that instead of this (which I'm getting atm)
I want each columns to be able to have it's own unique row highlighted (e.g. Differdange could be highlighted, as well as dddd on Localities)
Any way to edit the
$("tr").click(function() {
$("tr").removeClass("highlighted");
$(this).addClass("highlighted");
});
code to do this? Thanks
You can use the .removeClass() and .addClass() jQuery methods to achieve this. Here's a little demo: little link. The code is pretty self-explaining, but here's a commented version of the JavaScript part:
var chosen = []; //an array to save the chosen row for each column
$("td").click(function() { //when a td is clicked
var idx = $(this).index() + 1; //get column of current cell
$("td:nth-child(" + idx + ")").removeClass("highlighted"); //unhighlight all cells in column
$(this).addClass("highlighted"); //highlight this one
chosen[idx] = $(this).parent("tr").index(); //and save it as chosen in its column
});
............................
Demo
Hi now you can do this jquery as like this
Css
.hightlighted{
background: #f00;
color: #fff;
}
jquery
$("tr").click(function(){
$("tr").removeClass('hightlighted')
$(this).addClass('hightlighted');
});
Could you be more precise on when and how the selection should be made? I'm guessing you want the user to click on a row, which then gets highlighted. In that case you'd want to create a highlight class in css, add it to the row the user clicked on and later you can get the row cia its class:
tr.highlighted td {
background: #f0;
color: #fff;
}
And in the javascript:
// catch click event
$('tr').click(function (e) {
// remove prvious selection
$('tr.highlighted').removeClass('highlighted');
// make this row selected
$(e.currentTarget).addClass('highlighted');
});
// get current selection
function getSelected () {
return $('tr.highlighted');
}
I need to click in a Close img, and remove all the column where the img is located.
I'm trying to do something like this:
var colnum = $(this).closest("td").prevAll("td").html();
$(this).closest("table").find("tr td:eq(" + colnum + ")").remove();
but, its not working.
EDIT: GUYS, SORRY FOR THE FIRST POST, I WAS KIND A HURRY TO OPEN THE QUESTION.
I EDIT EVERYTHING. TAKE A LOOK IN THE DEMO
the html demo: New Demo
if you guys see the red stuffs in the table, that I need to remove when click que "CLOSE".
Remove the column where I'm clicking.
ps.: guys, the red class was just to you guys see where need to be the close event.
In your example demo, what should actually close?... I modified it slightly and the close column disappears, but I am unsure what else you are expecting to be removed.
See here: http://jsfiddle.net/gfosco/TdCYy/24/
The issue is being inside a nested table... You want to remove the column from the cell parent tables parent table.
Updated example here:
http://jsfiddle.net/gfosco/TdCYy/37/
You should be able to use the nth-child selector to get the cells in nth column, something like this:
$(this).closest("table").find("tr td:nth-child(" + colnum + ")").remove();
Check out this link, I have edited your demo http://jsfiddle.net/TdCYy/39/
This is the HTML unchanged, except for the class first-row added to the first red row:
<table border='1' width='100%'>
<tr>
<td>Somthing 1</td>
<td>Somthing 2</td>
<td>Somthing 3</td>
<td>
<table border='1' style='border: solid red;' width='100%'>
<tr class="first-row">
<td colspan='2'>
Something
<span style='float: right' class='img_romove_columm'>Close</span>
</td>
</tr>
<tr>
<td>Another</td>
<td>Another 1</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td class='red'>Result</td>
</tr>
<tr>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td class='red'>Result</td>
</tr>
<tr>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td class='red'>Result</td>
</tr>
<tr>
<td>Result</td>
<td>Result</td>
<td>Result</td>
<td class='red'>Result</td>
</tr>
</table>
CSS is untouched.
Javascript should be (this works):
$(".img_romove_columm").click(function(){
// Hide the first row that has the close button, and also hide the row right after it (another, another1)
$('tr.first-row, tr.first-row + tr').hide();
// Hide everything that has the red class (result, result, result, result, )
$('td.red').hide();
});
Is this what you're looking for?
Here is an example I came up with. simply apply the same class (red) to all of the elements to want to disappear, including the nested table. Then you can call
$('.red').hide();
FIDDLE http://jsfiddle.net/Jaybles/TdCYy/42/
I have an HTML table defined as follows:
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td class="item1a"> </td>
<td class="item2a"> </td>
<td class="item3a"> </td>
<td class="item4a"> </td>
<td class="item5a"> </td>
<td class="item6a"> </td>
<td>Some addition content that is not a menu</td>
</tr>
</table>
Each cell has it's own item because the content and width such content varies. For instance, here is the CSS associated with item1a
.item1a {height:36px; width:84px; background-image:url(/resources/images/item1a.png);}
.item1b {height:36px; width:84px; background-image:url(/resources/images/item1b.png);}
When someone hovers over a cell, I need to change the class from a to b. I am pretty confident I know how to do that. My real problem is, I don't know how to make a menu popup underneath the item. I need to use this tabular structure because of the specificty of the graphics. Can someone help me out? How should I address this problem?
Thank you!
Assuming your classes item1a, item2a... are typos and you meant to type item1 a
$('td').hover(hoverIn, hoverOut); //make your more selector more specific
function hoverIn() {
$this = $(this);
$this.removeClass('a').addClass('b');
var hoverMenu = '<div class="hoverMenu">Rest of the HTML needed for the menu</div>';
$this.append(hoverMenu);
}
function hoverOut() {
$this = $(this);
$this.removeClass('b').addClass('a');
$this.children('.hoverMenu').remove();
}
Switches the classes on hover and adds a DIV to the TD bottom. You can move it around to suit your needs.
Say I had links with up/down arrows for moving a table row up or down in order. What would be the most straightforward way to move that row up or down one position (using jQuery)?
There doesn't seem to be any direct way to do this using jQuery's built in methods, and after selecting the row with jQuery, I haven't found a way to then move it. Also, in my case, making the rows draggable (which I have done with a plugin previously) isn't an option.
You could also do something pretty simple with the adjustable up/down..
given your links have a class of up or down you can wire this up in the click handler of the links. This is also under the assumption that the links are within each row of the grid.
$(document).ready(function(){
$(".up,.down").click(function(){
var row = $(this).parents("tr:first");
if ($(this).is(".up")) {
row.insertBefore(row.prev());
} else {
row.insertAfter(row.next());
}
});
});
HTML:
<table>
<tr>
<td>One</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Two</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Three</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Four</td>
<td>
Up
Down
</td>
</tr>
<tr>
<td>Five</td>
<td>
Up
Down
</td>
</tr>
</table>
Demo - JsFiddle
$(document).ready(function () {
$(".up,.down").click(function () {
var $element = this;
var row = $($element).parents("tr:first");
if($(this).is('.up')){
row.insertBefore(row.prev());
}
else{
row.insertAfter(row.next());
}
});
});
Try using JSFiddle