Insert a div-like element inside a table without applying table layout - javascript

I have a table (render by datatable) and I need to dymatically append some new elements inside the table like :
The dark grey area is a new dom elements that I need to dynamically insert.
The first row is a title that is NOT align with the th/td, which now becomes a problem to be solved
I tried inserting a div that wrap the title inside the table, but the table seems to treat it as a td:
We can see that the first row is apparently become much wider , which is not I want.
Is there a simple way to insert something inside but without treat it as td?
Here is a fiddle to demonstrate what I am faced with :http://code.hcharts.cn/jaskey/hhhGXD

Not able to update your fiddle, try this code
$(function () {
$('#btn').off('click').on('click',function(){
console.log('click');
$('#table').find('tr:first-child').after('<tr><td colspan="5"><div>Here I insert a din just after the th, which will be consided as a td ,which breaks the existing layout</div></td></tr>')
});
});
also ensure that you have given specific width to td's or tr if you don't want them to spread out.

Related

adding to input and cloning results

I am trying to clone and also add values to results:
http://jsfiddle.net/QNP3r/175/
It is working so-so' on the table element.
But what I want to do is to make it work on a div element rather than table.
How can this be solve?
...Because when I do:
$('#mtable2 section').append($("#mtable2 section:first").clone());
...It clones and doubles everytime you do it....I just want to do one row like the Table's Tbody TRs...
Lastly I would like to clone it only if all forms are added...kind got it working on the else statement.
Any thoughts?
Thanks
Try this:
$("#irowb").click(function(){
$('#mtable2 section:last').after($("#mtable2 section:first").clone());
});
Your first problem is you do an append which inserts the code into the section and not after that and your second problem is you append it after each section, not only the last one
Edit:
$('#mtable2 section:first').before($("#mtable2 section:last").clone());
$("#mtable2 section:first").find("#test-a").html($('#row3').val());
$("#mtable2 section:first").find("#test-b").html($('#row4').val());

jQuery replace entire table elements

I have this table
<table><tbody><tr><th><br></th></tr></tbody></table>
on multimple pages, and I can't remove them from database.
So I want to remove this entire line with jquery. I can't add a class or id to remove it like that.
This is why I need a replace this table with nothing, like
var elem = elem.replace('table...','');
any help please? thanks.
can't you just use one of:
$('table').remove(); // remove from dom
or
$('table').hide(); // hide the table, but stays in dom

jQuery: Style all empty child TDs only if the first (:first) TD contains no text (:empty)

I need some jquery code to style all empty child tds only if the first td contains no text.
Right now my code styles all empty TDs as a greyish color (see image).
I only want the first row to be styled because the first TD contains text. In other words, I need to test if the first TD contains text and if so, add the grayish color on that row, if it is blank then don't add the coloring to the empty TDs.
jsbin for the above code:
http://jsbin.com/ojemuf/1/edit
Select rows, check if first child not is empty, get its matching siblings:
$('tr td:first-child:empty').siblings("td[class*='_crew']:empty").css("background", "#DDCEC0");
$('tr td:first-child:not(:empty)').siblings("td[class*='_crew']:empty").css("background", "#DDCEC0");
Apparently I had it backwards!
I hope I'm understanding your question right
loop trough the tr elements and if the first is not empty add a color to the empty td's inside the tr element
$('tr').each(function () {
if(!$(this).find('td').first().is(':empty'))
$(this).find('td:empty').css('background', '#ccc');
});
--- edit ---
Reversed edition of Mathletics
$('tr td:first-child').not(':empty').siblings("td[class*='_crew']:empty").css("background", "#DDCEC0");
The question is a bit unclear whether you want to update the entire table when the first element is not empty or if you want to update every matching row. For the entire table, you can try this:
$("td:first:not(:empty)")
.closest("table")
.find("td[class*='_crew']:empty")
.css("background", "#DDCEC0");
From the description, it seems the other answers missed the fact that he wants this applied when the first element is NOT empty.

How do I search and remove/append a row in Jquery or Javascript?

If I have a table
<table id="myTable"><tr><td>First Thing</td><td>First Value</td></tr>
<tr><td>Second Thing</td><td>Second Value</td></tr>
<tr><td>Third Thing</td><td>Third Value</td></tr>
</table>
How can I use JQuery or javascript to search to get the index of the row with text "Second Value" and remove it? Also is it possible to create a new row
<tr><td>Fourth Thing</td><td>Fourth Value</td></tr>
with the click of a button? Will I have to iterate through the existing rows to get the last index of the row to insert it in?
You can achieve this easily using the :contains() selector, the remove() function, and the append() function. You don't need to iterate through the rows to find what you're looking for.
To get the index:
$("#myTable").find("td:contains('Second Value')").parent().index();
To remove it:
$("#myTable").find("td:contains('Second Value')").parent().remove();
To add a row:
$("#myTable").append("<tr><td>Fourth Thing</td><td>Fourth Value</td></tr>");
working example: http://jsfiddle.net/hunter/PzJWC/
You should ideally generate id's per each tr/td - but thats if you getting data dynamically i suppose.
If you know the order of your tables then you can use these sleectors from jQuery
$('tr:last-child').html('<p>This is the absolouty last tr in the WHOLE page<p>')
$('tr:nth-child(even)').addClass('evenColors')
$('tr:nth-child(4n)').remove() //Removes the 4th from the top TR DOM Element
var theValueOf = $('tr:first-child').html() //assigns the innerHtml to your var
So if you have 10 tables each table should have an id or class
<table id="table1"> ...bla... </table>
$('table1 tr:last-child').remove() //Remove last TR from Table1
You will need to structure your html more with id's and classes
In your case you will have to restructure your table some how programatically to atach unique ids to each row then use jquery to select it. This is ideal world
But you do a loop and check each inner html until what you want and do a .remove()
But to get the INDEX use hunters reply! But from experience this is a headache on large and dynamic documents.
JQuery has .insertAfter and insertBefore. For targeting you can also use nth-child css selector or if you want it dynamic (like insert a row after the row they click) you can use the 'this' operator and some dom navigation. All that said be very careful when editing tables on the fly, they have some peculiarities about where things can be inserted and are heavy on performance.
i just did it ;)
to add row (you may not want to use append because your table may have tbody etc):
$('#myTable tr:last').after('<tr id="forth_row"><td>forth thing</td><td>forth value</td></tr>');}
to find and remove that row:
$('#myTable').find("#forth_row").remove();

jQuery: find next table-row

I have a table, containing rows, contaning cells - and some of them contain an img as follows:
<img id="FormView1_btnSave_row1%1%new" style="border-width: 0px; cursor: pointer;"
src="grafik/ok_16x16.gif" onclick="cleverStuff(this)"/>
In the function cleverStuff I would like to operate on the line that follows the line in which the button was clicked - this special button is contained in the last visible line only, there are a bunch of hidden lines below and I want to make the first hidden line visible - but I fail at getting to the next line.
My understanding was that all combination of parent() and next() could be used to get from the img to the td, to the tr and finally to the next tr.
So I tried to verify this:
$(ctrl).attr('id') correctly returns the img's id :)
$(ctrl).parent().attr('id') returns NULL.
What am I missing here?
This should give you the enclosing tr of the element, even if it isn't the element's direct parent, then that row's next row. if you use parent on an element that is inside a td, it will give you the column, not the row. Supplying a filter to the parent() method will simply filter out the parent unless it happens to match the filter, typically resulting in no matching elements. Closest is probably what you want, but parents('tr') might be needed if you have nested tables and want the outer row instead of the inner row.
$(this).closest('tr').next('tr')
You don't show us enough HTML really but this should work:
$(ctrl).parent('tr').next();
Maybe the parent element didn't have its id set? To get to the next row from the image I believe you can do:
$(this).parent('tr').next('tr')
I hope u can use
jQuery(this).parents('tr');

Categories

Resources