I have a div block like this:
<div id="myDiv">
<table>
<tbody>
<tr>Some data</tr>
</tbody>
</table>
</div>
All I want to do is check if the <tr></tr> has some text in it and display this div block in a dialog box, otherwise don't do anything.
What would be the best way to do this? I don't know how to check if the <tr></tr> is empty or not.
First of all you have invalid html. The tr tag can contains one or more th or td elements (W3C). So fix your html.
As for validation using jQuery:
if ($('#myDiv table tr td').is(':empty')) {
}
else {
}
http://jsfiddle.net/JnyJs/1/
DEMO
var text = $.trim($('#myDiv').text());
if (text) {
alert(text);
}
You can check the "emptiness" usng jQuery's .text() function:
var $tr = $('#myDiv > table > tbody > tr');
if ($tr.text())
{
// div is not empty
}
else
{
// div is empty
}
You may want to $.trim() the whitespace from the returned string.
Related
I need your help:
The problem:
I have a select filter for my table.
The filter hides the tr rows of the tbody if the value is not the same. The table-header still show.
The question:
If the select filter hides (display:none; ?) ALL tr of the tbody, the thead should also hide.
The Code:
$(document).ready(function(){
$("select[name='kurs']").click(function() {
$('tbody').each(function(){
if ($(this).find("tr:hidden")) {
$(this).closest(thead).hide();
}
});
});
});
This will also do :
$(this).parent().find("thead").hide();
Sample code :
function hide() {
$('tbody').each(function(){
if($(this).not("tr:hidden").length=1)
{
$(this).parent().find("thead").hide();
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
Table
<table border='1'>
<thead>
<tr><td>H1</td><td>H2</td></tr>
</thead>
<tbody>
<tr style='display:none'><td>a</td><td>b</td></tr>
<tr style='display:none'><td>a</td><td>b</td></tr>
<tr style='display:none'><td>a</td><td>b</td></tr>
<tr style='display:none'><td>a</td><td>b</td></tr>
</tbody>
</table>
<button onClick='hide()'>Hide</button>
How about
$('tbody').each(function(){
if ($(this).has("> tr:visible").length === 0){
$(this).closest('table').hide();
}
});
It checks for visible trs in the tbody, if there isn't any the table is hidden.
Check this fiddle and see if that's what you want.
When the select changes, it filters the rows. I've done something that might or might not be as the filtering method you may have. The important thing is the part that closes the thead when there's no rows.
$("#filter").change(function () {// Select changes and filters rows of the different tables.
var class_to_filter = "." + $(this).val();// I'm accessing rows by class in order to close them, you may access them using some other method.
$.each($(class_to_filter), function (i, item) {// For each one of them, close and check if you have to close thead as well.
var $tr = $(item).closest('tr'),
$tbody = $tr.closest('tbody'),
$thead = $tbody.siblings('thead'),
numOfVisibleRows;
$tr.hide();// Hide row.
numOfVisibleRows = $('tr:visible', $tbody).length;// Number of sibling rows visible.
if (!numOfVisibleRows) {// if 0, hide thead.
$thead.hide();
}
});
});
Hope it helps.
I have 3 tables in my boostrap tab. Each tab as a table. The rows of this table is dynamically generated with csharp asp.net code. Right I Want a scenario were if a user click on the row of the first table, the clicked role of the first table get remove from the first table and is added to the rows of the second table.
My challenge as been getting to remove the row after the onClick process.
<tbody>
<tr id="kayode#yahoo.com">
<td> kayode <a class="chat" connectionid="135976e6-799b-4cda-a764-a00f7110d515"
data-parentid="kayode#yahoo.com"
href="/Visitor/StartChat?threadid=3&email=kayode%40yahoo.com"
operatorid="1" target="_blank" threadid="3">chat</a></td>
<td>271.0.0.1</td>
<td>Active</td>
<td></td>
<td>9/13/2014</td>
<td>04:15:18</td>
<td>02:52:55</td>
<td>271.0.0.1</td>
</tr>
</tbody>
My javascript code which I am trying to use to remove the row after the Click event.
function updateWaitingState(sender) {
var parentid = $(sender).attr("data-parentid");
//alert(parentid);
//we are going to remove the role from this field
var element = document.getElementById(parentid);
element.parentNode.removeChild(element); //This line is a problem says
//document.querySelector("tablebody4 first").appendChild(element);
console.log(element);
}
This is untested, but I imagine jQuery will greatly reduce your headache here:
function updateWaitingState(sender) {
var parentId = $(sender).attr("data-parentid");
$('#' + parentId).appendTo('.tablebody4:first');
}
You may need to adjust the selector in the appendTo function, as it was a guess on my part.
function updateWaitingState(sender) {
var parentid = $(sender).attr("data-parentid");
var element = document.getElementById(parentid);
$(element).appendTo('.tablebody2:first');
}
I'm trying to find if a table contains only spaces in each columns. Practically it's an empty table but with spaces. Is it possible with Javascript or jQuery?
<table>
<tr>
<td> </td>
<td> </td>
</tr>
</table>
Yes you can
$("table tr td").text().trim()==""
OR
$("table tr td:empty")
And if you want to do something like hide a the table based on the td emptiness, etc, refer to this post
Another fiddle example
Not a clear question, try this :
$('td').filter(function(){
return $(this).text().search(/^\s*$/) != -1;
}).doWhatYouWantWithThat()
You can use text() and trim() combination, if the trim() give zero length and without trim the length of text is not zero it means table contains spaces.
if($('#tableId').text().length > 0 && $('#tableId').text().trim().length == 0)
{
alert("Empty table with spaces.")
}
I'd suggest:
var cells = $('td'),
allCellsEmpty = cells.length == cells.filter(function(){
return $.trim($(this).text()) == '';
}).length;
JS Fiddle demo.
To hide the table, if its child td elements have no content (other than white-sapce):
$('table').toggle(!allCellsEmpty);
JS Fiddle demo.
References:
filter().
jQuery.trim().
text().
My table is like this:
<table>
<tr>
<td>
<img src="" />
<span>blah</span>
</td>
</tr>
...
So in each row, first column contains an image. I need to register event on each of this image. So how can I select it?
I tried this:
td:eq(0):nth-child(0)
But it is not working.
something like this selector:
td:first-child > img
should work i guess...
For nth-child selector, the index is 1 based. I think something like this would work for you:
$("td:nth-child(1) > img")
or even simpler:
$("td:first-child > img")
I'd suggest:
$('table tr td:first-child img').on('event', function (){
// handle the event here
});
I think http://forum.jquery.com/topic/jquery-how-to-select-all-first-tds-inside-all-tr-in-a-table contains several solutions:
$('tr td:first-child')
$('tr').find('td:eq(0)')
$("tr td:nth-child(1)")
You can select the first column image of the table as follows :
$('tr').find('td:eq(0)')
$('table > tr > td:first-child > img').bind('click', function() {
// your code
});
I would give the table a unique id for more precision.
$('#table_id > tr > td:first-child > img').bind('click', function() {
// your code
});
Replace 'click' in the code above with wathever event you need to check.
Check this
$(function(){
$("table tr td:first-child").on("click","img",function(){
console.log("hey");
});
});
Seeing as you want to attach an event to the image, instead of iterating to each image, you could bind the event handler like this:
$("table").on("eventname", "td:first-child img", function(i){
//your code
});
Demo : http://jsfiddle.net/hungerpain/PYFhw/
I want to access the div tag in the following HTML code:
<table>
<div class="rowBound">
<tr onclick="expandLastResultDetails(this);">
<td class="c1">56835-14513</td>
...
</tr>
<tr class="rowDetails">
<td colspan="0">
<div style="background-color: #0F9;"> expandable
</div></td>
</tr>
</div>
</table>
But jQuery commands just give me a TBODY instead of my DIV ..
This is what I was doing in another case:
function expandNavContent(navEntryTitle) {
var content = $(navEntryTitle).parent().children('.navContent');
$(content).slideToggle('slow', function () {
// Animation complete.
});
}
What I want:
rowDetails should be animated with slideToggle if someone clicks on the tr
If I use this code:
function expandLastResultDetails(tableEntry) {
var content =$(tableEntry).parent().children('.rowDetails');
$(content).slideToggle('slow', function () {
// Animation complete.
});
}
It toggles ALL rows but it should just toggle ONE row so I nested them into a division, maybe that was wrong
Try this:
$('tr.rowDetails').find('div');
But, your Markup is not valid. tr is element of table, not for div.
To get the outer parent div:
$('tr.rowDetails').closest('div');
After edit
function expandLastResultDetails(tableEntry) {
var content =$(tableEntry).next('.rowDetails'); // will point to next tr
$(content).slideToggle('slow', function () {
// Animation complete.
});
}
Try $('.rowDetails').closest('div.rowBound');
It will bubble from the current element (outwards) until it find a div element.
Hope it helps
What command did you try? You could have used this:
$(".rowDetails tr td div");
And moreover, there cannot be a <tr> inside a <div>!
Since your markup is invalid the browser will propably insert the tbody and table for you (look at the markup in FireBug/Dev tools). Something like $(".rowDetails").parent().parent().parent() could work (in some browsers) but I'd recommend fixing the markup instead