$('#maintable tr').click(function (event) {
});
<table>
<tr>
<td>
<INPUT TYPE='Checkbox'/>
</td><td>
abc
</td><td>
xyz
</td>
</tr>
</table>
I have to click on td where td does not contain a checkbox. How should i do it?
I used $('#maintable tr:not(input[type='checkbox'])').click(function (event) {
but it does not work.
$('#maintable tr td:not(:has(:checkbox))').click(function (event) {
Fiddle Demo
Read
:not()
:has()
Related
I want the table to be searched only in the H3 tag, not TD tag.
And if a result is found, its TR should be hidden
-h3 is a Child tag under TD.
for Example:
<tr>
<td>
<h3>Hier</h3>
<div></div>
</td>
</tr>
<script>
$(document).ready(function(){
$("#myInput").on("keyup", function() {
const value = $(this).val().toLowerCase();
$("#myTable tr").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
console.log(value);
});
});
</script>
Thank you For Help
The main issue in your code is because you're searching through the text of the tr as a whole. You need to call find('h3') and then compare to the text in that element.
Also note that filter() is intended to do just that; filter a collection of elements and return a subset of them. You shouldn't call toggle() within it. Instead call hide(), filter to find matches, then show() them.
jQuery($ => {
$("#search").on('input', e => {
const value = $(e.target).val().toLowerCase().trim();
$("table tr").hide()
.filter((i, tr) => $(tr).find('h3').text().toLowerCase().indexOf(value) > -1).show();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<input type="text" name="search" id="search" />
<table>
<tr>
<td>
<h3>Foo</h3>
<div></div>
</td>
</tr>
<tr>
<td>
<h3>Foo bar</h3>
<div></div>
</td>
</tr>
<tr>
<td>
<h3>Hier</h3>
<div></div>
</td>
</tr>
</table>
I'm using JQuery for creating dynamic table row based on user insertion.
My HTML:
<table id="list">
<thead>
<tr>
<th>first header</th>
<th>second header</th>
<th>third header</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="text" name="first" /></td>
<td><input type="text" name="second" id="second" /></td>
<td><button class="alert hollow button" href="#">X</button> </td>
</tr>
</tbody>
</table>
And JavaScript:
$('#list tr:last td:nth-last-child(2) input[name=second]').keyup(function (event) {
if ($(this).val().length > 4 && $('#list tr:last td:nth-last-child(2) input[name=second]').val().length > 4) {
$('#list tbody').append('<tr>
<td><input type="text" name="first" /></td>
<td><input type="text" name="second" id="second" /></td>
<td><button class="alert hollow button" href="#">X</button></td>
</tr>');
}
});
The above code only works for the first row and the inserted row has no JS code-behind.
You haven't given complete code, but i suspect this is your issue..
Replace this
$('#list tr:last td:nth-last-child(2) input[name=second]').keyup(function (event)
with this
$('#list').on('keyup', 'tr:last td:nth-last-child(2) input[name=second]', function (event)
You are probably not using proper event delegation, and you're trying to bind a keyup event on an element that doesn't exist yet (you say the rows are added dynamically). Instead we bind the keyup to the table that is part of the initial document, and say what happends when a child that meets X criteria has a keyup event fired
Your function does not bind to elements that don't exist on page load, use on for dynamically generated elements
$(document).on('keyup', '#list tr:last td:nth-last-child(2) input[name=second]', function (event) {
I have the following table structure in my code
<tr>
<td>Text 1 </td>
<td>Text 2 </td>
<td> <span class="edit" onclick="EditAccountInfo(id1)" /> </td>
</tr>
<tr>
<td>Text 1 </td>
<td>Text 2 </td>
<td> <span class="edit" onclick="EditAccountInfo(id2)" /> </td>
</tr>
On clicking the span in the <td>, I want to highlight the selected row (<tr>). I am using the following code in the javascript function
function EditAccountInfo(id)
{
$(this).closest('tr').css("background-color", "red");
}
I am not getting any errors and $(this).closest('tr') returns a valid object, but the background color style is not getting applied to the <tr>.
What am i doing wrong?
this is the window because you're using inline event handlers. I would recommend a more unobtrusive approach:
<span class="edit" data-account-id="id1" />
$(document).on('click', '.edit', function() {
var $tr = $(this).closest('tr');
var id = $(this).data('account-id');
//...
});
$('#my-table').on('click', '.edit', function () {
$(this).closest('tr').css('backgroundColor','red');
});
Try
$(document).ready(function () {
$('td').click(function(){
$(this).parent().css("background","red");
});
});
I have a table where each row contains document name and there's a checkbox at the start of each row. Some checkboxes are disabled. I want to add text-decoration:line-through to that row so that user can easily identify that, that row can't be selected because checkbox is disabled. How can this be done using JavaScript or jQuery?
In below example the row with Doc name 2 should be line-through.
<tr>
<td>
<input type="checkbox" name="doclist" id="someId" value="someId" onchange="updateList('someId')">Doc name 1
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="doclist" id="AnotherId" value="AnotherId" onchange="updateList('AnotherId')" disabled>Doc name 2
</td>
</tr>
I tried the below.
$('input[type="checkbox"]').filter(function() {
var disabledRow = this.disabled;
disabledRow.addClass("lineThrough");
});
CSS
.lineThrough{
text-decoration:line-through;
}
DEMO
$('table tr td input[type="checkbox"]').each(function(){
if($(this).prop('disabled')){
$(this).parents('tr').css('text-decoration','line-through');
}
});
if you want to work with class
$('table tr td input[type="checkbox"]').each(function () {
if ($(this).prop('disabled')) {
$(this).parents('tr').addClass('lineThrough');
}
});
As Suggested by UweB
.closest('tr') is faster than .parents('tr')
$('table tr td input[type="checkbox"]').each(function () {
if ($(this).prop('disabled')) {
$(this).closest('tr').addClass('lineThrough');
}
});
$('input[type="checkbox"]:disabled').parent().addClass('lineThrough');
I have this:
<table id="myTable" style="width: 650px;">
<thead>
<tr style="font-weight: bold;">
<td>Name</td>
<td>Price</td>
<td>Supplier</td>
<td>Amount</td>
<td>Add</td>
</tr>
</thead>
<tbody>
<tr>
<td>Fish</td>
<td>299</td>
<td>BlueHouse</td>
<td>
<form action="method">
<input type="hidden" name="product_id" value="1" />
<input class="hideme" type="text" name="amount" value"" />
</td>
<td>
<input class="hidden" type="button" name="Add" />
</form>
</td>
</tr>
</tbody>
</table>
With the JS:
$(document).ready(function(){
$('#myTable > tbody tr').live('click', function(){
$(this).toggleClass('highlight');
});
CSS:
.highlight{
background: #CCC;
}
.hideme{
display: none;
}
Which works like when you click on one of the 's thats inside , then it will highlight it by toggling the CSS class "highlight".
Now what I would like to do also is showing the input fields that has the class "hideme".
First I thought to do $('.hideme').show(), but since there's more 's than one, this wouldnt work. And i would like it to show the input fields for the current toggled .
So when you click again on the tr to toggle 'off' (so it doesnt have the highlight class), i would like to have the input fields to hide again.
Hope you understood, otherwise just comment.
How can i do this?
Add '$(this).find('.hideme').toggle(); to the tr click event.
$('#myTable > tbody tr').live('click', function(){
$(this).toggleClass('highlight');
$(this).find('.hideme').toggle();
});
jsfiddle - http://jsfiddle.net/pdbQH/1/
$(document).ready(function(){
$('#myTable > tbody tr').live('click', function(){
$(this).toggleClass('highlight');
$(this).find('input[type=text]').toggleClass('hideme');
});
UPDATE To avoid the toggle when you focus on the INPUT
$('#myTable > tbody tr').live('click', function(event){
if(event.target.tagName == 'INPUT') return false;
$(this).toggleClass('highlight');
$(this).find('.hideme').toggle();
});