I have a table structure similar to below:
<tr>
<td colspan="5">
TEST
</td>
</tr>
<tr id="abcd_<?php echo $id; ?>" style="display: none;">
<td colspan="5">
<span id="hidtb_<?php echo $id; ?>"></span>
</td>
</tr>
The table is within a loop and the value of $id changes. The second tr is set to display : block using javascript. But the <td colspan="5"> is not covering all the five <td>s, instead only one.
Why my colspan is not working?
This is the problem with display: block.
Please refer the below link
http://thedesignspace.net/MT2archives/000376.html#.UUrg3FfCd1u
If you are hiding tr, then use display: table-row instead of display: block to display that tr.
If you are hiding td, then use display: table-cell instead of display: block to display that td.
Use table-row, no block when styling a tr. Perfect!
Related
I am using basic datatable to print dynamic values that are received from the back end. I also have a hidden child row for each row with some additional values of that parent row. There is a button in each parent row and I want that on click of that link the child of that parent row should expand and be visible to the user. This should happen for every row.Here is the fiddle
However, when I am clicking on that button, the child row is not opening. Can anyone please help me with the solution
$('table').on('click', 'tr.parent .det', function() {
$(this).closest('tr.cchild').toggleClass('open');
});
.cchild {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Location</th>
<th>Experience</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<?php foreach($per_job as $job): ?>
<tr class="parent">
<td>
<?php echo $job->name; ?>
</td>
<td>
<?php echo $job->location; ?>
</td>
<td>
<?php echo $job->experience; ?>
</td>
<td>
<button class="show-btn rd-details det">
DETAILS
</button>
</td>
</tr>
<tr class="cchild">
<td>
<?php echo $job->age; ?>
</td>
<td>
<?php echo $job->class; ?>
</td>
<td>
<?php echo $job->address; ?>
</td>
<td>
<?php echo $job->number; ?>
</td>
</tr>
<?php endforeach; ?>
</tbody>
</table>
As far I see you have not defined the class open anywhere, so just define the class in existing CSS.
.open{
display:block !important;
}
The display property specifies if/how an element is displayed.
Every HTML element has a default display value depending on what type of element it is. The default display value for most elements is block or inline. When you declare an object to have display none as you have done using your CSS for cchild the code hides the object.
Now to show your object you can either remove your existing class or override the existing class by using another class or style. To do so you are using toggling the class open which should have display 'block'. In simple language, you are showing and hiding the object. More info can be found here.
I have a JSFiddle here.
I am trying to access the text content of the div with class '.item_description' for all rows in a table where a checkbox has been checked, but I cannot seem to get it.The checkbox is in a nested table in each row.
My HTML is:
<table id="table-tasks-list" class="table-hover">
<tbody>
<tr id="row-task-10572" class="task-modal-row">
<td >
<div class="task_description pull-left" style="padding:5px 0 0 5px;">Qui at dolore sit alias cum voluptate ad...</div>
<table class="pull-right" style="border:none;">
<tbody>
<tr>
<td style="width:80px;border:none;">2015-02-23</td>
<td class="hours" style="width:30px;border: none;">8.00</td>
<td class="row-icon tasks-check-box" style="border: none;">
<label class="checkbox-hold">
<input type="checkbox" name="bill-task" id="chk-10572" class="task-checkbox ion-fw" checked=""><span class="fake-input checkbox-icon ion-android-checkbox-outline-blank ion-fw" data-chk-id="10572"></span></label>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr id="row-task-10573" class="task-modal-row">
....
In my JS, I do:
$('table#table-tasks-list tbody tr td input.task-checkbox').each(function(i, check) {
if ($(check).is(':checked')) {
console.log($(check).closest('table#table-tasks-list tbody tr').find('.task_description').text());
}
});
But i get empty results. What have i missed? Thanks!
Use
$(check).closest(".task-modal-row").find(".task_description").text();
To access the content of the closest .task_description
According to your code it should be like this:
$(check).closest('.task-modal-row').find('.task_description').text()
Demo : https://jsfiddle.net/TheRealPapa/sw5Lh6pa/1/
Your closest() targets the whole table and outputs the contents of all .task-description it finds, regardless of checkboxes. You only need to go up to the containing tr:
console.log($(check).closest('tr[id^="row-task-"]').find('.task_description').text());
I don't have an answer about why it doesn't work. However, I believe I reached similar problem and fixed it by using $(this) inside the loop instead of using the second argument of the callback function (check in your example). I hope this helps...
I'm trying to figure out if I can name an entire column with the same class name in a table, without having to name each individual cell. Any suggestions? Would I use html, css or javascript to do so? Is naming every cell the only way to do so?
Sorry if I post this in the wrong area, I'm new to this site and still trying to figure it out
You can use the nth-child pseudo class selector
table tr td:nth-child(2) {
background: #CCCCCC;
}
table tr td:nth-child(4) {
background: #00FFEE;
}
<table>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
</tr>
</tbody>
</table>
If you want to add a class to all the elements inside the table (the td elements in this case) you can do so with jQuery.
$('td').addClass('my-class');
.my-class{
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>1-1</td>
<td>1-2</td>
<td>1-3</td>
<td>1-4</td>
</tr>
<tr>
<td>2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
<td>3-4</td>
</tr>
<tr>
<td>4-1</td>
<td>4-2</td>
<td>4-3</td>
<td>4-4</td>
</tr>
</tbody>
</table>
With the example above you're basically telling jQuery to target all of the td elements and add your class to each one of them. However, this will apply the class to ALL the td elements in your DOM. If you want to apply the class only to the elements of a specific table, you can do so with:
$('.parent-class').find('td').addClass('your-class');
and you can add the parent-class to your <tbody> element of table. That way you find all the elements that match.
I have a table, with repetitive tbody's exactly as shown below:
<tbody>
<tr>
<td class="icons_small" style="color:#fff; vertical-align:middle;"><!--Change color to white if their is attachment--><span class="task_attachment" title="View Attached Items">v</span></td>
<td><span class="active">Task Name</span><br /><span style="vertical-align:middle;" class="icons_small">U</span><span class="contact_name tiny">Contact/Customer</span></td>
<td style="text-align:center;" class="tiny"><span class="date_assigned" title="Date Assigned">13/12/2012</span><br /><div id="progressbar" value="50" title="Progress"></div></td>
<td style="vertical-align:middle;" class="icons_small"><span class="edit_task" title="Edit Task">E</span></td>
<td style="vertical-align:middle;" class="icons_small"><span class="flag_task" title="Flag Task as Important">f</span></td>
<td style="vertical-align:middle;" class="icons_small"><span class="set_reminder" title="Set Reminder">A</span></td>
<td class="tiny" style="color:#333;"><span class="delete_task" title="Delete Task">Delete</span></td>
</tr>
<tr class="attachment" >
<td class="icons_small" style="vertical-align:middle;"><span class="attchement_type" title="Attachment">A</span></td>
<td colspan="6" class="tiny attachment_details">SomeAttachment.pdf</td>
</tr>
</tbody>
Using jquery, within each tbody, I hide the second tr (class="attachment"). I want to show this tr, when I click on the above tr's first td, which contains span(class="task_attachment"). However, i'm running into an all or nothing situation, the code below give's me no result, but i think it is closer to what i'm looking for.
// Show attached files
<script>
$("tr.attachment").hide();
$("span.task_attachment").click(
function () {
$(this).closest("tr.attachment").show()
});
});
</script>
Anyone have any suggestion, or see anything wrong with this?
Try:
$(this).closest("tr").next().show();
Closest tests itself and up to the DOM tree. WHat you need is to select next element to the span's closest tr.
I have a table like that:
<table id="myTable" cellspacing="0" cellpadding="10" border="0" width="100%">
<tbody>
....
<tr style="color: blue;" id="bankRecord377">
<td align="center" class="styleOdd"> <input type="checkbox" value="377" name="377"></td>
<td align="center" class="styleOdd">377</td>
<td align="center" class="styleOdd"></td>
<td align="center" class="styleOdd">391</td>
</tr>
....
<tr style="color: blue;" id="bankRecord386">
<td align="center" class="styleEven"> <input type="checkbox" value="386" name="386"></td>
<td align="center" class="styleEven">386</td>
<td align="center" class="styleEven"></td>
<td align="center" class="styleEven">396</td>
</tr>
...
<tr style="color: blue;" id="bankRecord322">
<td align="center" class="styleEven"> <input type="checkbox" value="322" name="386"></td>
<td align="center" class="styleEven">322</td>
<td align="center" class="styleEven"></td>
<td align="center" class="styleEven">314</td>
</tr>
...
</tbody>
</table>
class="styleOdd" makes row gray background class="styleEven" makes row background blue. I iterate over that table with Struts2 and define classes but user can remove some of table rows when he sees that HTML file. If user remove one of the table row, e.x. :
<tr style="color: blue;" id="bankRecord386">
...
</tr>
Colors of background was gray, blue, gray. However it is gray, gray now(because user removed a tr which includes classEven tds).
All in all what I want is iterate over that table again and defining classes styleOdd, styleEven, styleOdd, styleEven... again.
How can I do it with JavaScript or JQuery?
PS: I want to it for my table(which has id=myTable)'s every tds of trs.
EDIT: I want it except for the first tr(and it's tds).
You can use :even and :odd, but then you would iterate over the table rows twice. That might lead to unacceptable performance if your table has many rows.
I'd suggest using each() instead:
$("#myTable tr").each(function(index, row) {
var $cells = $("td", row);
if (index & 1) {
// Odd.
$cells.removeClass("styleEven").addClass("styleOdd");
} else {
// Even.
$cells.removeClass("styleOdd").addClass("styleEven");
}
});
You can use the :odd selector to target odd rows. (there is also a :even selector)
$('.td:odd').class('odd');
Trigger this when removing a row from the table to update classes.
There are also both CSS Selector but not widely supported.
$('#myTable tr:odd td').toggleClass('styleOdd', true).toggleClass('styleEven', false);
$('#myTable tr:even td').toggleClass('styleOdd', false).toggleClass('styleEven', true);
I believe you could also do it automatically using CSS. Although it requires a fairly modern browser.
Updated to take into account the table ID