Develop Reference

Select A Button By Class jQuery

I am trying to have a button that, when clicked, will have some jQuery code linked to it. See the general layout below. However, there will be a variable number of rows on the table. All the buttons should have the same action but applied to its parent element. How can I achieve this?
Thanks
td {
border: 1px solid black;
padding: 10px;
}
<table>
<tr>
<td>Info</td>
<td><button class="remove">Remove row</button></td>
</tr>
<tr>
<td>Info</td>
<td><button class="remove">Remove row</button></td>
</tr>
<tr>
<td>Info</td>
<td><button class="remove">Remove row</button></td>
</tr>
</table>

You can do that in several ways, question is tagged with jQuery so the easiest way using jQuery is :
$("button").on("click", function(ev) {
$(this).parents("tr").remove()
});
This will remove tr element when clicked on it's button, you can do what you want inside that anonymous function

The example below does what you need, it will check any click within a table element to see if it matches the required pattern (in this case a button with class .remove), before then actioning the code.
I've added a dynamically added row so you can test it.
If you aren't having dynamically added rows (i.e. they are all there before this code is run) then you can simply use:
$("table button.remove").click( function() {
$(this).closest("tr").remove();
});
// Add click event linked to the table
// Will trigger whenever a button with class .remove is clicked within the table
$( "table" ).on( "click", "button.remove", function() {
// Move up DOM tree to nearest 'tr' and remove it
$(this).closest("tr").remove();
});
// Add click event to add row button
$("#add-row").click( function() {
// Add dynamic row for testing
$("table").append('<tr><td>Info</td><td><button class="remove">Remove row</button></td></tr>');
});
td {
border: 1px solid black;
padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Info</td>
<td><button class="remove">Remove row</button></td>
</tr>
</table>
<button id="add-row">Add Row</button>

Try this
let btns = $("button.remove"); // you will select only buttons with remove class
in your case you want something like this :
btns.each(function(){
let btn = $(this);
btn.on('click',()=>{
// your stuff
})
})
i hope it was useful !

Make row clickable except on checkbox

I have written code so that if the table row is clicked it will act as a link and bring you to a new page, however I also want to have it so they can select rows to do things with. The problem is when they click on the checkbox to select it, it detect that the "row" was clicked and activates the link.
Here is the code I have written
<script>
$(document).ready(function() {$('table[name=$tableName]').DataTable();
$('table[name=$tableName] tbody').on( 'click', 'tr', function () {
$(location).attr('href', 'http://stackoverflow.com/');
})
});
</script>
I have checkboxes in the first column
The problem is anytime the checkbox is clicked I need it to not redirect the page. Basically if anywhere else is then it will.
Anyone know how I can modify to implement this functionality?

So check what was clicked and if it it the label/checkbox then ignore it.
$("table tbody").on("click", "tr", function (e) {
if ($(e.target).is("label,input")) {
return
} else {
console.log("clicked")
}
})
input[type="checkbox"] {
display: none
}
input[type="checkbox"]:checked + label {
background-color: green;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td><input type="checkbox" id="cb1"><label for="cb1">CB</label></td>
<td>HMMMM 1</td>
</tr>
<tr>
<td><input type="checkbox" id="cb2"><label for="cb2">CB</label></td>
<td>HMMMM 2</td>
</tr>
<table>

HTML show/hide parts of a table onclick of table headers

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/

jQuery dynamic insert row for expand/collapse

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!

Problem with JS Selectbox Function

I have a selectbox with three options. When a user selects one of the three options, I want a specific div to appear below it. I am trying to write the code that dictates which specific box is to appear when each of the three options is selected. So far, I have only worked on the code that pertains to the first option. However, whenever the user selects any of the three options from the selectbox, the function for the first option is triggered and the div is displayed.
My question is two part:
1) How do I write a conditional function that specifically targets the selected option
2) What is the best way to accomplish what I have described above; How do I efficiently go about defining three different functions for three different options in a select box?
Here is the function I was working on for the first option:
$(document).ready(function(){
var subTableDiv = $("div.subTableDiv");
var subTableDiv1 = $("div.subTableDiv1");
var subTableDiv2 = $("div.subTableDiv2");
subTableDiv.hide();
subTableDiv1.hide();
subTableDiv2.hide();
var selectmenu=document.getElementById("customfields-s-18-s");
selectmenu.onchange=function(){ //run some code when "onchange" event fires
var chosenoption=this.options[this.selectedIndex].value //this refers to "selectmenu"
if (chosenoption.value ="Co-Op"){
subTableDiv1.slideDown("medium");
}
}
});
Html:
<tr>
<div>
<select name="customfields-s-18-s" class="dropdown" id="customfields-s-18-s" >
<option value="Condominium"> Condominium</option>
<option value="Co-Op"> Co-Op</option>
<option value="Condop"> Condop</option>
</select>
</div>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Condominium" class="subTableDiv">Hi There! This is the first Box</div>
</td>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Co-Op" class="subTableDiv1">Hi There! This is the Second Box</div>
</td>
</tr>
<tr class="subTable">
<td colspan="2">
<div style="background-color: #EEEEEE; border: 1px solid #CCCCCC; padding: 10px;" id="Condop" class="subTableDiv2">Hi There! This is the Third Box.</div>
</td>
</tr>

You can use selectmenu.value (or $(selectmenu).val()) to get the value of the selected option, and you can match the functions to the values using an object. Example:
$(function() {
var call_table = {
'Condominium': function() {alert('One!');},
'Co-Op': function() {alert('Two!');},
'Condop': function() {alert('Three!');}
};
$('#customfields-s-18-s').change(function() {
call_table[this.value]();
});
});
Of course, you don't have to define the functions inline. I just did it for concision here. You could define them anywhere and reference them by name instead.

I think you can get this using the position of the item in the list and the table, as long as those relative positions are the same. Change the class on the DIVs so they are all subTableDiv.
$(function() {
$('#customfields-s-18-s').change( function() {
var selected = $(this).find('option:selected');
var position = $(this).find('option').index(selected);
// hide all then show the nth one
$('.subTableDiv').hide().eq(position).show();
});
});

It looks like the select option values are the same as the IDs for the divs. You could use that to define a function that basically shows the div that has the same id as the value of the selected option. Also change the class on each div to subtableDiv.
$("#customfields-s-18-s").change(function() {
// hide all divs
$('.subtableDiv').hide();
// show matching div
var value = $(this).val();
$('#' + value).show();
}