This question already has answers here:
How can I select an element which does not contain a certain child element?
(8 answers)
Closed 4 years ago.
I'm using jQuery to conduct some action while clicking a certain 'tr', yet within that object I would like jQuery to ignore one of the children td which contains a url.. Any ideas how can this be done?
<tr class="parent_report>
<tr class="child1">Some text</tr>
<tr class="child2">Some text</tr>
<tr class="child3"><span>Some text</span></tr>
</tr>
And the jQuery:
$(".special_report, .new_report ,.parent_report").not("span").click(function(event){
event.preventDefault();
//do some action
So I would like to ignore the jQuery when clicking the link in child3 and not doing the action configured to jQuery
Any ideas?
Thanks
You are saying that any of the classes you selected can not be a span. You are not saying what is clicked....
So you need to do the check inside of the click that the action is not an anchor
$("tr").on("click", function (evt) {
if ($(evt.target).closest("a").length) {
return true
} else {
console.log("tr was clicked");
}
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
<td class="child3"><span>Some text</span></td>
</tr>
</tbody>
</table>
If you do not want any click on the td, than just ignore clicks on that td
$("tr").on("click", "td:not(:has(a))", function(evt) {
console.log("tr was clicked");
})
td {
padding: 1em;
border: 1px solid black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
<td class="child3"><span>Some text</span></td>
</tr>
</tbody>
</table>
I'd move your click events to the table cells for more intuitive code.
$("td").not(':has("a")').click(function () {
console.log("tr was clicked");
});
<style>
td {
padding: 10px;
background: pink;
}
a {
background: lightgreen;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
<td>baz</td>
<td class="child3"><span>Some text</span></td>
</tr>
</tbody>
</table>
Related
This question already has answers here:
JavaScript and getElementById for multiple elements with the same ID
(13 answers)
Iterating over result of getElementsByClassName using Array.forEach
(14 answers)
Closed 6 months ago.
I'm trying to change the value of colspan using the below code but its only working for January. It should work for both January and February. By clicking the button the value of the colspan attribute, from 2 to 1, of td with id "myTd".
<!DOCTYPE html>
<html>
<head>
<style>
table, th, td {
border: 1px solid black;
}
</style>
</head>
<body>
<p>Click the button to change the value of the colspan attribute, from 2 to 1, of td with id "myTd".</p>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td id="myTd" colspan="2">January</td>
<td>$100</td>
</tr>
<tr>
<td id="myTd" colspan="2">February</td>
<td>$100</td>
</tr>
</table>
<br>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.getElementById("myTd").colSpan = "1";
}
</script>
</body>
</html>
The cause of your issue is because you've repeated the same id on multiple elements, which is invalid. id must be unique within the DOM. Change these to common class attributes.
From there you can use querySelectorAll() and loop through the resulting collection to update their colspan:
document.querySelector('button').addEventListener('click', e => {
document.querySelectorAll(".myTd").forEach(el => el.colSpan = "1");
});
table,
th,
td {
border: 1px solid black;
}
<p>Click the button to change the value of the colspan attribute, from 2 to 1, of td with id "myTd".</p>
<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td class="myTd" colspan="2">January</td>
<td>$100</td>
</tr>
<tr>
<td class="myTd" colspan="2">February</td>
<td>$100</td>
</tr>
</table>
<br>
<button>Try it</button>
Note the use of addEventListener() in the above example. This is an unobtrusive event handler bound in JS code, not HTML. It's much better practice over using inline onclick attributes.
My goal is the checkbox will get selected even clicked outside checkbox. I mean it will check that checkbox even user clicks on td class="checktd". I already tried prop('checked',true) but this not works. Any idea how to do this?
Jquery:
<script type="text/javascript">
$(".checktd").on("click", function () {
$('.checkItem').prop('checked', true);
});
</script>
Html:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr>
<td class="checktd"><input type="checkbox" class="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr>
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>
This way you can "toggle", not only "check".
See that I included an IF inside, to check for currentTarget. That's because if you click on the checkbox itself it would "toggle" two times.
$(function () {
$(".checktd").on("click", function (e) {
if (this != e.target) { return; }
var check = $(this).find("input[type=checkbox]");
check .prop('checked', !check[0].checked);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
</style>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr>
<td class="checktd"><input type="checkbox" class="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr>
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>
This should be what you tried to achieve (note that i made the tr clickable instead of the td and i made it also possible to uncheck it again ( -> toggle) because i think this is more useful):
$(".checktr").on("click", function () {
var toggle = $(this).find('input').prop('checked');
toggle = !toggle
$(this).find('input').prop('checked', toggle);
});
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
text-align: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr class="checktr">
<td><input type="checkbox" class="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr class="checktr">
<td class="checktd"><input type="checkbox" name="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>
$('#content').on( "click", function() {
$(this).prop('checked', 'checked');
});
This should be in document.ready of jquery. This answer is in addition #Istiaque's answer.
Use this:
Basically, get the children .checkItem from the clicked TD
$(this).children('.checkItem').prop('checked', true);
$(".checktd").on("click", function() {
$(this).children('.checkItem').prop('checked', true);
});
.checktd {
cursor: pointer
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<style>
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
}
th,
td {
padding: 5px;
text-align: left;
}
</style>
<table style="width:40%">
<tr>
<th>Check</th>
<th>Name</th>
<th>Telephone</th>
</tr>
<tr>
<td class="checktd"><input type="checkbox" class="checkItem"></td>
<td>Bill Gates</td>
<td>55577854</td>
</tr>
<tr>
<td class="checktd"><input type="checkbox" class="checkItem"></td>
<td>Kevin Gates</td>
<td>544444</td>
</tr>
</table>
Rewrote my answer completely .
2 click handlers are used here. The second one finds the click on .checkItem and then stops the click event from propagating upward to its parent i.e. .checktd. The first one finds the click on .checktd, then holds the checkbox with class checkItem in variable $cb.Then it checks whether the checkbox is checked. If checked , then it is unchecked. If not then reverse thing takes place. If the click event takes place exactly on the checkbox, then the event propagation is stopped so that the checkbox behaves as it is supposed to do without the first click handler.
N.B: Your 2nd checkbox has name="checkItem", I think you also want to use class="checkItem", right ?
$(".checktd").on("click", function (e) {
var $cb=$(this).find('.checkItem');
if($cb.prop('checked')){
$cb.prop('checked', false);
}else{
$cb.prop('checked', true);
}
});
$(".checkItem").on("click", function (e) {
e.stopPropagation();
});
I've the below html table having multiple td elements. I'm stuck with this problem now. If any one of the td elements are having background color as red, that complete row should be highlighted in red, it means other td elments in that row should be highlighted.
Below is the sample html.
<table border="1" class="CSSTableGenerator">
<style>
.foo {
background-color: green;
}
.foo2 {
background-color: red;
}
</style>
<tr>
<th>Component</th>
<th>Properties</th>
<th>J02</th>
<th>W02</th>
</tr>
<td>OccoR1CutoverConfiguration</td>
<td>reservationCutoverSwitch</td>
<td class="trueValue foo">false</td>
<td class="trueValue foo">false</td>
<tr />
<tr />
<td>IntegrationConfiguration</td>
<td>exactTargetAppKey</td>
<td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
<td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
<tr />
<tr />
</table>
The above code highlights only td element holding SGEwbW94OkMwH7g0f4tSN5MAC504gSSG in red color. Is there a way we can highlight the complete row starting from IntegrationConfiguration to SGEwbW94OkMwH7g0f4tSN5MAC504gSSG using jquery?
first you check your table there have same problam fixed those , Problam is some you did't start some tr But you end tr .
then try this it will Add class in this tr how have td with class foo
$('td').hasClass('foo').(this).closest('td').addClass('foo');
The working code is the following fiddle
https://jsfiddle.net/sesn/c8dh6vy8/
Here is the jquery code
$(function(){
$('td').each(function(){
if($(this).css('background-color') == 'rgb(255, 0, 0)')
{
$('td',$(this).parent()).css({'background-color':'red'});
}
});
});
Filter tr elements based on hasClass over td elements.
$('tr').filter(function() {
return $(this).find('td').hasClass('foo2');
}).addClass('foo2')
.foo {
background-color: green;
}
.foo2 {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<table border="1" class="CSSTableGenerator">
<tr>
<th>Component</th>
<th>Properties</th>
<th>J02</th>
<th>W02</th>
</tr>
<td>OccoR1CutoverConfiguration</td>
<td>reservationCutoverSwitch</td>
<td class="trueValue foo">false</td>
<td class="trueValue foo">false</td>
<tr />
<tr />
<td>IntegrationConfiguration</td>
<td>exactTargetAppKey</td>
<td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
<td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
<tr />
<tr />
</table>
Fiddle Demo
First find the elements with the foo2 class, then navigate from those <td> elements to the ancestor <tr>:
$('td.foo2').closest('tr').addClass('foo2');
$('td.foo2').closest('tr').addClass('foo2');
.foo {
background-color: green;
}
.foo2,
.foo2 td {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1" class="CSSTableGenerator">
<tr>
<th>Component</th>
<th>Properties</th>
<th>J02</th>
<th>W02</th>
</tr>
<td>OccoR1CutoverConfiguration</td>
<td>reservationCutoverSwitch</td>
<td class="trueValue foo">false</td>
<td class="trueValue foo">false</td>
<tr />
<tr />
<td>IntegrationConfiguration</td>
<td>exactTargetAppKey</td>
<td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
<td class="falseValue foo2">SGEwbW94OkMwH7g0f4tSN5MAC504gSSG</td>
<tr />
<tr />
</table>
I understand your question like this:
If any td hasclass foo... AddClass foo
See Fiddle here.
Notice that I made corrections on your <tr> and </tr> tags.
$(document).ready(function(){
$(".foo").siblings().addClass("foo");
$(".foo2").siblings().addClass("foo2");
});
EDIT
If it is a possible case to have a trueValue AND falseValue in the same row...
Do this :
$(document).ready(function(){
$(".foo").siblings().addClass("foo");
$(".foo2").siblings().addClass("foo2").removeClass("foo");
});
I have a problem that I can't solve how much I try. By clicking on the Edit Customer button I wan't to get the value from the CustomerNr cell. My problem is that I don't know how to get the row index by clicking on a button and then pass it to my function so I can specifically get the CustomerNr on that row I pressed the button on. You can take a look at my jsfiddle link and note, this is the first time I code in Javascript/Jquery. I'm open for smart solutions.
Here you can see how far I came. I managed to select value from a specific cell.
function GetCellValues() {
var Row = document.getElementById("somerow");
var Cells = Row.getElementsByTagName("td");
alert(Cells[0].innerText);
}
I have managed to get the row index by clicking on on a td but I want to get it by pressing a button.
function myMethod(obj) {
alert(obj.parentNode.rowIndex); // parentNode is also used
}
I wan't to somehow combine this two functions, like in C#. (I'm a C# programmer)
function GetCellValues(e) {
//Something here
alert(Cells[0].Rows[e] innerText);
}
http://jsfiddle.net/6srjc7qL/
I've changed the id's of your buttons to classes, as you can't name two elements with the same id, then I looped through the elements... Working fiddle
You should avoid to use inline functions and pereferably do it like this, this might safe you a lot of time and keeps it better maintainability:
Javascript:
var a = document.getElementsByClassName('otherButton');
for (var i = 0; i<a.length;i++) {
a[i].addEventListener('click',function(){
var b = this.parentNode.parentNode.cells[0].textContent;
alert(b);
});
}
HTML:
<table id="somerow">
<tr>
<th>CustomerNr</th>
<th>Name</th>
<th>Contact</th>
</tr>
<tr >
<td>1</td>
<td>Cigarettes Inc</td>
<td>Rambo</td>
<td>
<button class="otherButton" >Edit Customer</button>
</td>
</tr>
<tr >
<td >22</td>
<td>Razor</td>
<td>David</td>
<td>
<button class="otherButton">Edit Customer</button>
</td>
</tr>
<tr>
<td>3</td>
<td>H&M</td>
<td>Samuel Adams</td>
<td>
<button class="otherButton" >Edit Customer</button>
</td>
</tr>
}
the button is inside the td which is inside the tr, so you need to go 2 nodes up. Try this:
function GetCellValues(obj) {
alert(obj.parentNode.parentNode.rowIndex);
}
HTML
<html>
<head>
<style>
table, td {
border: 1px solid black;
}
.selected {
background-color: yellow;
}
</style>
</head>
<body>
<center>
<table id="somerow">
<tr>
<th>CustomerNr</th>
<th>Name</th>
<th>Contact</th>
</tr>
<tr>
<td>1</td>
<td>Cigarettes Inc</td>
<td>Rambo</td>
<td>
<button id="otherButton" onclick="GetCellValues()">Edit Customer</button>
</td>
</tr>
<tr>
<td onclick="myMethod(this);">22</td>
<td>Razor</td>
<td>David</td>
<td>
<button id="otherButton" onclick="GetCellValues()">Edit Customer</button>
</td>
</tr>
<tr>
<td>3</td>
<td>H&M</td>
<td>Samuel Adams</td>
<td>
<button id="otherButton" onclick="GetCellValues()">Edit Customer</button>
</td>
</tr>
</center>
</body>
</html>
JS
function GetCellValues(elm) {
alert(elm.parentNode.parentNode.cells[0].textContent);
}
function myMethod(obj) {
alert(obj.parentNode.rowIndex);
}
I've created a resizable table columns code by following bz's demo
But when I create more than 30 columns, the code does not work. The table I'm creating is pretty simple:
<table class="resizable" border="1">
<tr>
<td name="col1" align="center">Column 1</td>
<td name="col2" align="center">Column 2</td>
<td name="col3" align="center">Column 3</td>
<td name="col4" align="center">Column 4</td>
<td name="col5" align="center">Column 5</td>
<td name="col6" align="center">Column 6</td>
</tr>
</table>
Does anyone have any ideas which line should I change to make the code work?
Why not doing it on your own? Make a Table resizeable is pretty simple:
First add this to your onLoad:
$(".gridTableSeparator").bind("mousedown", function () {
var that = $(this).parent();
$("body").bind("mousemove", function (event) {
that.attr("width", event.pageX - that.offset().left);
});
$("body").bind("mouseup", function (event) {
$(this).unbind("mousemove mouseup");
});
});
Your table Header should look like this:
<td>
<div class="gridTableSeparator"></div>
<div class="gridTableHeadline">Tableheadline</div>
</td>
And format the separator and the headline like this:
.gridTableSeparator
{
width: 3px;
right:-4px;
height:40px;
float:right;
position:relative;
cursor: e-resize;
}
.gridTableHeadline
{
line-height: 40px;
overflow: hidden;
}
benefits of doing it on your own is that you have the full control and can change the look and functionality for your needs. Otherwise it would be great if you can post a fiddle, so we can see what went wrong if you add more than 30 rows.