I want to show and hide several tables on one page with one button. Unfortunately my script can only show and hide one table at a time.
I have a page with a lot of queries. There are also text fields in a table. For a better overview, the tables with the text fields should only be displayed when the checkbox is ticked. The checkbox should not be clicked at the beginning.
function Displayer(n)
{
var check = document.getElementById('Section'+n);
if (check.style.display == 'none')
{
check.style.display='inline';
}
else
{
check.style.display='none';
}
}
<p><input type="checkbox" class="btnstylega" onClick="Displayer(99)" />Show Tables</p>
<table id="Section99" style="display:none;"> <td>
AAAAAAAAAAAAAA
</td></table>
<table id="Section99" style="display:none;"> <td>
BBBBBBBBBBBBBBB
</td></table><br>
I want to show and hide many tables without adjusting the tables by clicking on the checkbox.
An ID must be unique in a document. The tool to mark multiple elements as part of a group is a class.
Replace your id attributes with class attributes.
Then replace getElementById with getElementsByClassName (or querySelectorAll).
These methods return lists of nodes and not single elements, so loop over the result like an array and access the style property on each one in turn.
The attribute id must be unique in a document, you can use class instead. You can use querySelectorAll() to target all the elements having the class, then loop through them to set the style. You can toggle the class using classList.toggle() like the following way:
function Displayer()
{
var check = document.querySelectorAll('.Section99');
check.forEach(function(table){
table.classList.toggle('show');
});
}
.Section99{
display: none;
}
.show{
display: block;
}
<p><input type="checkbox" class="btnstylega" onClick="Displayer()" />Show Tables</p>
<table class="Section99" class="hide"> <td>
AAAAAAAAAAAAAA
</td></table>
<table class="Section99" class="hide"> <td>
BBBBBBBBBBBBBBB
</td></table><br>
Improvement: It will add the event handler and trigger the change on load where needed
Note the data-attribute on the checkbox
var chg = new Event('change');
document.querySelectorAll(".btnstylega").forEach(function(but) {
but.addEventListener("change", function() {
var checked = this.checked,
section = this.getAttribute("data-tables");
document.querySelectorAll('.Section' + section).forEach(function(sect) {
sect.classList.toggle("hide",!checked);
});
})
but.dispatchEvent(chg);
});
.hide {
display: none;
}
<p><input type="checkbox" class="btnstylega" data-tables="88" checked />Show Tables 88 </p>
<p><input type="checkbox" class="btnstylega" data-tables="99" />Show Tables 99</p>
<table class="Section88">
<tr>
<td>
AAAAAAAAAAAAAA
</td>
</tr>
</table>
<table class="Section88">
<tr>
<td>
BBBBBBBBBBBBBBB
</td>
</tr>
</table><hr>
<table class="Section99">
<tr>
<td>
CCCCCCCCCCCCCCCC
</td>
</tr>
</table>
<table class="Section99">
<tr>
<td>
DDDDDDDDDDDDDDDDDDDD
</td>
</tr>
</table>
Related
I have a code like this:
<tr>
<td>
<input type="checkbox" name="ordered[]" value="xxx"></input>
</td>
<td>
<input type="checkbox" name="inStock[]" value="yyy"></input>
</td>
</tr>
The code is repeated for each result in MySQL.
Also I'm using this code:
<script>
$('input[type="checkbox"]').on('change', function() {
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).siblings().prop('checked', false);
});
</script>
I need to select only one checkbox per row (per table tr). What should I change in javascript?
Thanks!
I think you need something like this
$( document ).ready(function() {
$('input[type="checkbox"]').on('change', function() {
var checkedValue = $(this).prop('checked');
// uncheck sibling checkboxes (checkboxes on the same row)
$(this).closest('tr').find('input[type="checkbox"]').each(function(){
$(this).prop('checked',false);
});
$(this).prop("checked",checkedValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="checkboxes">
<tr>
<td>
<input type="checkbox" name="inStock[]" />inStock
</td>
<td>
<input type="checkbox" name="ordered[]" value="xxx" />ordered
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="inStock[]" value="yyy" />inStock
</td>
<td>
<input type="checkbox" name="ordered[]" value="xxx" />ordered
</td>
</tr>
</table>
I think what you are asking for is a RadioButton. Just give them different ids but the same name and you will be able to select just one of them.
Try applying selector based on element name:
$('input[name="ordered[]"]').on('change', function() {
Or you would probably want to add some other attribute to identify the specific element you wish to select.
Since you haven't specified which sibling, say you can grab the first element out of a jQuery object using first:
$(this).siblings().first().prop('checked', false);
You can also do
$(this).siblings(".bar").eq(0).text()
You can use the eq method to reduce the matched set of elements to one at a specific index:
If you use radio buttons and use the same name for all of them, you are only able to select one radio button at a time and the other ones gets uncheked and like our friend mentioned you need to include your <td></td> tags in <tr></tr>tags.
I've got a table structure (see snippet below) and my goal is to hide a tr element once I click on the span that reads delete. I need the specific tr where that delete is contained.
I already got a listener for the click event on the last span, the one that says "delete" working.
I've got several tr elements, is it possible to hide the tr where the span is contained (and therefore, all the contents)?
$(".delete_pm").click(function () {
alert('hey');
$(this).closest( "tr" ).hide(); // tried this from answers below but no luck, as you can see here
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<input type="radio" name="credit-card" value="fjxtnw" checked />
<strong>555555******4444</strong> (MasterCard)
<label>(default)</label>
<span id="fjxtnw" class="delete_pm"><label>delete</label></span>
</td>
</tr>
You can use .closest to search the parents. Provide it with tr as the selector, then simply hide it.
$(".delete_pm").click(function() {
$(this).closest("tr").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="radio" name="credit-card" value="fjxtnw" checked />
<strong>555555******4444</strong> (MasterCard)
<label>(default)</label>
<span id="fjxtnw" class="delete_pm"><label>delete</label></span>
</td>
</tr>
</table>
have you try this,
$(".delete_pm").click(function() {
$(this).closest("tr").hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="radio" name="credit-card" value="fjxtnw" checked />
<strong>555555******4444</strong> (MasterCard)
<label>(default)</label>
<span id="fjxtnw" class="delete_pm"><label>delete</label></span>
</td>
</tr>
</table>
closest will give you the nearby parent with the matching selector.
hide will not remove the item from the DOM.If you want that also, you may chain the remove method call also.
$(".delete_pm").click(function () {
var _this=$(this);
_this.closest("tr").hide().remove();
});
Here is a working jsfiddle
I am having a table structure like this
<table>
<c forEach var="item" items="${manyItems}">
<tr>
<td id="item1"> ${item.data1} </td>
<td id="item2"> ${item.data2} </td>
<td> <button id="deleteButton"/> </td>
</tr>
</c:forEach>
</table>
Now I want to add a click event to the deleteButton
In my jquery is like this:
$(function() {
$('#deleteButton').click(function() {
var ele = $(this).parent();
/* fetch the other <td> siblings of the #deleteButton */
/* delete code goes here having an ajax query*/
});
});
This code is only deleting the 1st row of the table, but does not work on any other row.
I believe this is because we need to have distinct id's?
Kindly guide me to a good solution.
You are creating duplicate IDs, Identifiers in HTML must be unique and this is the expected behavior.
Use class, Here In example below I have converted deleteButton in to a CSS class so that we can use Class Selector (".class")
<button class="deleteButton"/>
Script
$('.deleteButton').click(function() {
var ele = $(this).parent();
});
Issue is the same ids for multiple elements in a single page. When this happens browser only looks for first instance of it and never goes ahead to look for another one, This is the reason one should understand that IDs should be unique per element.
change to class name instead:
<table>
<c forEach var="item" items="${manyItems}">
<tr>
<td class="item1"> ${item.data1} </td>
<td class="item2"> ${item.data2} </td>
<td> <button class="deleteButton"/> </td>
</tr>
</c:forEach>
</table>
and jquery:
$(function() {
$('.deleteButton').click(function() {
var ele = $(this).parent();
/* fetch the other <td> siblings of the .deleteButton */
/* delete code goes here having an ajax query*/
});
});
First think that, id is known unique, if u need to have click event for two button, u can use class for selecting the button, so try to follow the standards, id is unique selector and class is multiple selector.
I have a table with few rows. Each rows has header, data and hidden field. Data column can have either text or textarea.
<table id="knowledgeTreeTable" class="custom">
<tbody>
....................
<tr>
<th class="">What is the name of the party?</th>
<td class="">
<textarea id="ktField_7" class="ktEdit" type="text"></textarea>
</td>
<input id="ktField_7H" type="hidden" value="Unique contested">
</tr>
<tr>
<th class="">What is the name of the opposing party?</th>
<td class="">
<input id="ktField_8" class="ktEdit" type="text" style="width: 97%;">
</td>
<input id="ktField_8H" type="hidden" value="Query">
</tr>
......................
</tbody>
</table>
I am able to read the content of header and hidden field but not sure how to read data column as it can have two different types of element.
$("#knowledgeTreeTable tr").each(function() {
alert($('th', this).text());//OK
//alert($('td > [input, textarea]', this).val()); // This is not OK.
alert($('input', this).val());//OK
});
You can't group selectors like
td > [input, textarea]
Instead, use
td > input, td > textarea
Just as you would in a CSS selector, look for both:
alert($('td > input, td > textarea', this).val());
Although since you're using the same class for both, I'd be inclined to use:
alert($('td > .ktEdit', this).val());
Whenever you're trying to access a child element in a loop like this, you need to establish what the common factors between each element is. In this case they are different tags with different names, but they both have the ktEdit class, and both have type="text" (which I don't believe is actually applicable to textareas).
In this case, the common variable is the class name, so you can use that as your selector. As long as you target your parent loop correctly, it won't matter if you use that class on other elements throughout the page:
$("#knowledgeTreeTable tr").each(function() {
alert($('.ktEdit', this).val());
});
I have a tbody inside which there are href/input type text/ etc
I have a code to get all elements of tbody but how to disable it.
My tbody
<tbody id="FamilyHistory_3">
<tr>
<td class="tablecell">
<a id="FamilyHistory_3" name="316098" value="316098" onclick="javascript:save('FamilyHistory_3','test');" href="#">
<img style="border-style: none" src="../images/v10/arrow_doc.png">
</a> test
</td>
</tr>
<tr>
<td>
<table>
<tbody>
<tr>
<td></td>
<td class="tablecell">
<input type="checkbox" value="Yes" name="10627_316098">Yes
<input type="checkbox" checked="" value="No" name="10627_316098">No
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td height="2px"></td>
</tr>
</tbody>
Below is my code to get the content of tbody
function save(inputID,category){
var content= document.querySelectorAll('#tbodyID');
for(var i=0; i<content.length; i++){
// how to disable all the elements inside it
}
}
JSFiddle
document.querySelector('#tbodyID input').disabled = true;
You don't need jQuery for this.
For more than one:
JSFiddle
var l = document.querySelectorAll('#tbodyID input');
for (i = 0;i<l.length;i++)
{
l[i].disabled = true;
}
There's no need to loop, jquery can deal with groups of elements just using selectors.
Use the Jquery selectors and the prop function to add disabled="disabled" to each one.
You can also select multiple items using a comma separated list
$('#tbodyID input, #tbodyID select, ....').prop('disabled', true);
disabling an a tag will not prevent it from being clicked though. May be better to hide() these.
$('#tbodyID a').hide();
You might need to specify the types of all elements you want to disable. If you have jQuery, you can do that with something like this:
$('#tbodyID').find('a, input').prop('disabled', true);
Explanation
$('#tbodyID') : Select the element with id tbodyID
find('a, input') : Find all the a and input elements inside it
prop('disabled', true) : Set the disabled property of each element returned by the previous command
Based on your answer finally I accomplished my task using below code. I know you people have already answer but then also I am posting my answer with few addition.
Disable input
$('[id='+inputID+']').find('input').attr('disabled', true);
id of tbody
Disable click but clickable hand will be there but no request will be submitted to server
$('[id='+inputID+']').attr('onclick','').unbind('click');
id of anchor tag
Thanks,Pise