I have a table structure as follows;
<tr>
<td><div class="icon-chevron-right"></div></td>
<td><div>List 1</div></td>
</tr>
<tr>
<td><div class="icon-chevron-right"></div></td>
<td><div>List 2</div></td>
</tr>
Now on click of the icon image (chevron), I want the details row to be displayed immediately below the clicked row (It should be a tr containing child table). This should be inserted/appended dynamically on click of any of the list row.
How do I do this using jQuery? Any examples for reference would be really helpful..
the following example creates a new tr (if does not exists) containing table element under the tr where the clicked icon exists.
function createChildTable(string)
{
return $('<table>').append(
$('<tr>').append(
$('<td>').append(string)
)
);
}
$('.icon-chevron-right').click(function() {
var details = $(this).closest('tr').next('tr.details');
if (details.length) details.show();
else {
// first time clicked
details = $('<tr>').append( createChildTable('child table details') ).addClass('details');
$(this).closest('tr').after(details);
}
});
Example Link
I'd say there are two main ways to do this, and you'll have to figure out which one is best for you; it depends.
What you're talking about is ADDING a row into the DOM. This is fine in some cases, it depends on what this collapsed row is used for. If you want to be able to remove the collapsed row and add it again, it could make your life difficult if you have to reconstruct all the inner HTML via JavaScript every time.
var collapseHTML = '<tr class="collapse"><td colspan="2">This is my new row</td></tr>';
$('.icon-chevron-right').click(function() {
$('.collapse').remove(); // Deletes all rows that has class "collapse"
collapseHTML.insertAfter( $(this).closest('tr') ); // Inserts what's stored in collapseHTML after "this closest tr"
});
Then, as someone else said, you can solve this by adding those rows from the get go like so:
<tr>
<td><div class="icon-chevron-right"></div></td>
<td><div>List 1</div></td>
</tr>
<tr class="collapse">
<td colspan="2">This is my new row</td>
</tr>
Then, your css should loook something like this:
.collapse {
display: none;
}
.collapse.active {
display: block;
}
This means that when you add the active class to the collapse row, it goes from display: none; to display: block;. This you do via JavaScript/jQuery:
$('.icon-chevron-right').click(function() {
$('.collapse.active').removeClass('active'); // Removes active from all active collapsed rows
$(this).closest('tr').next().addClass('active'); // adds active class to "this closest tr's next element" (which is the collapse row)
});
Hope this helps!
Related
I have the following piece of code:
<tr>
<td style="display:none;" id="missing_person_report_label"><b>Enter image</b></td>
<td style="display:none;" id="missing_person_report_image"><input type="file"><br/></td>
</tr>
These td elements are initially set as hidden and are only displayed when I'm selecting the "Missing Person Report" option from the dropdown menu. The Javascript function to activate these td elements is given as:
function checkForChange(that) {
if (that.value == "missing_person_report") {
console.log(that.value);
console.log('person');
document.getElementById("missing_person_report_label").style.display = "block";
document.getElementById("missing_person_report_image").style.display = "block";
}
}
The code is doing as intended but there is a problem with the alignment of the tr element. This is the screenshot of the webpage.
I want the Choose file to have the same alignment as all the above elements,i.e. I want the Choose file to be on the right side of the Enter Image label . How do I do it?
Edit: Full Code is available here:
Edit: Those who are saying that I should assign the style to tr instead of td, I already tried doing this. If I do this, the webpage looks like this:
I want all the elements on the right to have the same alignment.
#Ronith.
Actially you their CSS as block, so that's why they are on separated lines. You should set display = "table-cell"
table {
width: 100%;
}
td {
display: table-cell;
}
<table>
<tr>
<td
id="missing_person_report_label"><b>Enter image</b></td>
<td
id="missing_person_report_image"><input type="file"></td>
</tr>
</table>
P.S.: do not pay attention that display is in CSS. It's just for instance. You should set it from JS code as you wish
display:block; makes a html element to take the full width of it's parent. So, you made tds to block level element they took all the width available and the upper one pushed the second one below.
Solution is not to change it's default display property. However try with inline-block or table-cell; which is the default property for tds inside a table.
The issue is because of display:block in javascript. set display: inline-block in your javascript code:
document.getElementById("missing_person_report_label").style.display = "inline-block";
document.getElementById("missing_person_report_image").style.display = "inline-block";
try this - apply display none to tr and not the td and from the function display block it again
<tr style="display:none;" id="missing_person_report_row">
<td><b>Enter image</b></td>
<td><input type="file"><br/></td>
</tr>
Function
function checkForChange(that) {
if (that.value == "missing_person_report") {
console.log(that.value);
console.log('person');
document.getElementById("missing_person_report_row").style.display = "block";
}
}
I have a nested HTML table. I would like to show parts of the nested table depending on the header clicked using javascript
http://jsfiddle.net/TtWTR/103/
so far it shows all three parts. I want to click header A and show only optionA, click headerB and only show optionB etc etc. Not sure if ive set it up right as all three are showing. thanks
To achieve expected result, use below option oh hide() and show() methods
$('.trigger').click(function() {
console.log($(this).text())
var selectedHdr = $(this).text();
$('.nested tr').hide();
$('.nested tr#'+selectedHdr).show();
});
https://codepen.io/nagasai/pen/vdabJQ
Usually I find it convenient to use CSS class selectors on the "root" element (in your case that would be .toptable) allowing you to toggle it to show and hide child elements.
<table class="toptable">
<tr class="accordion">
<td class="A trigger">A</td>
<td class="B trigger">B</td>
<td class="C trigger">C</td>
</tr>
<tr>
<td>
<table>
<tr class="content A">
<!-- will toggle using show-A -->
</tr>
</table
</td>
</tr>
</table>
Then you can make sure to hide the .content rows using CSS unless specific classes are set on the top table:
.content {
display: none; /* content hidden by default */
}
.show-A .A.content {
display: table; /* show when the parent table has .show-A set */
}
Now you just have to add event listeners to your triggers to toggle the classes for the different content rows:
const toptable = document.querySelector('.toptable');
['A', 'B', 'C'].forEach((group) => {
const trigger = document.querySelector(`.${group}.trigger`);
trigger.addEventListener('click', () => {
toptable.classList.toggle(`show-${group}`);
});
});
This can be done using the following script
$('.nested').hide();
$('tr .trigger').click(function() {
var target_id= "#"+$(this).attr('id')+"-table";
$('.nested').not(target_id).hide();
$(target_id).show();
});
and is shown in http://jsfiddle.net/TtWTR/152/
I am using jQuery.
I want to select a cell from a table.
So I tried the following codes.
// First line works fine for me. I can get a list of columns at the correct target row.
var targetColumns = $(elemClicked).closest("tr").find("td");
// I want to get the cell with the class named "draftstatus". This line has problem. I cannot get what I want.
var targetCell = columnsAtTargetRow.$(".draftstatus");
The targetColumns inspected from browser looks like the following:
The 5th td above is my target cell.
I also try to use find() function. It won't work either because find() will start from next children level.
columnsAtTargetRow.find(".draftstatus"); // this does not work.
What functions should I used to get that cell within that "list of td".
Thanks in advance.
You just need to figure out which selectors to use.
var targetColumns = $(elemClicked).closest("tr").find("td");
this goes up the DOM to the "tr" and selects the tds. If the elemClicked is inside a td you can select the tds with closest("td"), and then use siblings(".draftstatus");
If the elemClicked is a td, then you can just use siblings(".draftstatus");
Here is some example code to help demonstrate some selectors. Hope this helps some and not confused you more.
$(function(){
//reference all cells with myclass class using filter
$("#table1 tbody td").filter(".myclass").addClass("red");
// click events for all tds reference the .target class cell using siblings
$("#table1 tbody td").on("click",function(e){
$(this).siblings(".target").toggleClass("red");
});
//items inside a table cell click event
$("#table1 tbody td a").on("click",function(e){
//toggle bold class
$(this).closest("td").siblings(".target").toggleClass("bold");
//prevent event from bubbling up
e.stopPropagation();
});
})
.red {
background-color:red;
}
.bold { font-weight:bold; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table border="1" id="table1">
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td class="myclass target">value2</td>
<td>Two link</td>
</tr>
<tr>
<td>foo</td>
<td>bar</td>
<td class="myclass target">value2</td>
<td>Two link</td>
</tr>
</tbody>
</table>
This is incorrect:
columnsAtTargetRow.$(".myclass");
This should be:
columnsAtTargetRow.find(".myclass");
I have a table with a single span element in td.
<table>
<tbody>
<tr>
<td id="td">
<span id="span1">this is span1</span>
</td>
</tr>
</tbody>
</table>
I create a jQuery tooltip for span1.
$('#span1').tooltip({
content: function(){
return "tooltip_span1";
},
items: $('#span1')
});
I update the content of td adding a second span with id 'span2' by concatenating.
var tdHtml = $('#td').html();
tdHtml+="<br> <span id=\"span2\">this is span2</span>"
$('#td').html(tdHtml);
I add a tooltip for span2 which will be displayed correctly.
$('#span2').tooltip({
content: function(){
return "tooltip_span2";
},
items: $('#span2')
});
However, the tooltip of span1 is not displayed anymore after updating the td content. Why?
Please see a jsFiddle example here.
Thanks very much for your answers.
You should use append, right now you are deleting and re-adding span1 (and removing previously added behavior)
$('#td').append("<br> <span id=\"span2\">this is span2</span>");
http://jsfiddle.net/dy7pq/2/
It looks like it's because you are treating the existing code as HTML and that the DOM reference is lost. It will work if instead you append a DOM fragment.
var newSpan = $('<span id="span2">this is span2</span>');
$('#td').append(newSpan);
See this fiddle for complete code: http://jsfiddle.net/harveyramer/b3xGM/1/
How to hide All rows except current (clicked Row) using jQuery?
I want to hide all rows when i click the particular row except current one row.
<table>
#foreach (var item in Model)
{
idValue++;
<tr class="tableRow" id="#idValue">
<td class="master" id="#item.Batch_Seq">
<a href= "#" >#(item.Batch_Name)></a>
</td>
<td>
#(item.Present)
</td>
<td>
#(item.Absent)
</td>
<td>
#(item.HalfDay)
</td>
<td>
#(item.Batch_count)
</td>
</tr>
}
</table>
I tried like this
$('.tableRow').hide();
$(this).closest('tr:not(.tableRow)').hide();
Could anyone help me?
You seem to want this :
$('.tableRow').click(function(){
$('.tableRow').hide(); // hide all rows
$(this).show(); // show the clicked one
});
Note that the user can't notice the row was hidden then shown : the screen isn't repaint until the event handler ends.
Use .not() to select all elements with class tableRow except for the one that was clicked(this)
$('tr.tableRow').click(function() {
$('tr.tableRow').not(this).hide();
});
You can use not() to hide everything that isn't "this":
$('table tr.tableRow').click(function(){
$('table tr').not(this).hide(); // hide everything that isn't "this"
});
or you can use .siblings() to hide the siblings of the clicked row
$('table tr').click(function(){
$(this).siblings().hide(); // hide the siblings of the clicked row
});
Working example : http://jsfiddle.net/ouadie/U7eUR/