$("td:not(:has(input))").each(function ( index,element){
console.log(index);
console.log(element);
console.log($(this).text())});
td {
border: 1px solid black;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
<tr>
<td><input type="text">test3</td>
<td><input type="text">test4</td>
</tr>
</table>
I want to select all td which contain no son node input,that is to say,what i expect is as below:
<td>test1</td>
<td>test2</td>
It's verified by jquery's select expression td:not(:has(input)) ,it works fine.
There is a famous webpage You Don't Need jQuery! and a book Beyond jQuery.
You Don't Need jQuery!
Let's try with pure javascript.
Can we fulfill the work with pure js?
There's no :has selector alternative in native JS, you could do this by looping through all the td's and check manually:
document.querySelectorAll("td").forEach(function(element) {
if (!element.querySelector('input')) {
console.log(element.innerText);
}
});
td {
border: 1px solid black;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>test1</td>
<td>test2</td>
</tr>
<tr>
<td><input type="text">test3</td>
<td><input type="text">test4</td>
</tr>
</table>
Related
I have an element within a table in html:
<td><a id="href0" href="#" data-productid="0">Product 1</a></td>
and i need to get the value of the "data-productid" attribute
at the moment i have this code:
$(document).ready(function(){
$('#href0').click(function(event) {
event.preventDefault()
console.log(this.dataset.productid)
return false;
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td><a id="href0" href="#" data-productid="0">Product 1</a></td>
and nothing is being printed in the console.
I am using handlebars
We managed to establish you are using Handlebars templating
What MIGHT then be the case is your links are inserted dynamically when you compile the handlebars.
If that is the case you need to delegate and then this question is a duplicate of Event binding on dynamically created elements?
$(document).ready(function(){
// document or the nearest STATIC container
$(document).on('click','[data-productid]',function(event) {
event.preventDefault()
console.log(this.dataset.productid)
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<td><a id="href0" href="#" data-productid="0">Product 1</a></td>
<td><a id="href0" href="#" data-productid="1">Product 2</a></td>
You dont need to the a in the td at all (or even the id on the a or the td) - simply apply the click handler to the td and have the data attribute on that so that when it is clicked - the console will log the data attribute.
$(document).ready(function(){
$('td').click(function() {
let id = $(this).attr('data-productid');
console.log('The product id is ' +id)
})
});
table {
border-collapse: collapse
}
td {
border:solid 1px #d4d4d4;
padding: 10px 20px;
border-collapse: collapse
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td data-productid="1">Product 1</td>
<td data-productid="2">Product 2</td>
</tr>
<tr>
<td data-productid="3">Product 3</td>
<td data-productid="4">Product 4</td>
</tr>
</table>
If you absolutely must have the a - then its the same as above - just applied to the different element
$(document).ready(function(){
$('a').click(function(event) {
event.preventDefault();
let id = $(this).attr('data-productid');
console.log('The product id is ' +id)
})
});
table {
border-collapse: collapse
}
td {
border:solid 1px #d4d4d4;
padding: 10px 20px;
border-collapse: collapse
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr>
<td>Product 1</td>
<td>Product 2</td>
</tr>
<tr>
<td>Product 3</td>
<td>Product 4</td>
</tr>
</table>
var tr0HTML = $('<tr id="exp_line1"></tr>').appendTo(tbody);
What could the best possible way to use .css or any other jQuery to style this element based on the condition?
All I could see is that the change has been implemented to whole page not for the particular scenario!
Update: I want to style borders to the table which has 3 different types of rows. Rows are being displayed if the data is provided.
If I have understood your question... Something as simple as this should work:
tr.type-1 td{
border: 2px solid hotpink;
}
tr.type-2 td{
border: 2px solid purple;
}
tr.type-3 td{
border: 2px solid black;
}
<table>
<tbody>
<tr class="type-1">
<td>Type 1</td>
</tr>
<tr class="type-2">
<td>Type 2</td>
</tr>
<tr class="type-3">
<td>Type 3</td>
</tr>
</tbody>
</table>
Your jQuery code would look like this: $('<tr id="exp_line1" class='type-1'></tr>').appendTo(tbody)
I have the following markup:
<tr>
<td>
<a>foo</a>
</td>
<td>bar</td>
<td>
<a class="delete-btn">delete</a>
</td>
</tr>
I've already hooked up a click event handler using jquery $(".delete-btn") the problem is that inside the click event handler I need the text of the first element (foo).
I'm already getting the value I need with this call:
$(this).closest("tr").children().first().children().first("a")
but I feel it's too verbose. Is there a better way to accomplish this?
I don't like this either, but... it's exactly what you're looking for:
$(this).closest("tr").find("> td:first-child > a");
You can make use of jQuery's :first pseudo-selector.
In this instance, your entire selector would be:
$('tr td:first a:first') (for the first <tr> only)
$('tr').find('td:first a:first') (for every <tr>)
Example:
$(document).ready(function(){
$('.delete-btn').click(function(){
$('tr').find('td:first a:first').hide();
})
});
table, tr, td {
border: 1px solid rgb(191,191,191);
border-collapse: collapse;
}
td {
padding: 12px;
}
.delete-btn {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td><a>foo</a></td>
<td>bar</td>
<td><a class="delete-btn">delete</a></td>
</tr>
<tr>
<td><a>foo</a></td>
<td>bar</td>
<td><a>baz</a></td>
</tr>
</table>
Please am a newbie in programming, I really need your help in this. Please how can I hide an HTML table then display it with a button using.JavaScript?
Use document.querySelector to get the elements and the hidden attribute to show and hide the table. Use an event listener and listen for the click event on the button:
var table = document.querySelector("table");
table.hidden = true;
document.querySelector("button").addEventListener("click", function(event) {
table.hidden = false;
});
table {
text-align: center;
border-collapse: collapse;
}
td,
th {
padding: 0 5px;
border: 1px solid black;
}
<table>
<tr>
<th>Day</th>
<th>Rain</th>
</tr>
<tr>
<td>1</td>
<td>50 mm</td>
</tr>
<tr>
<td>2</td>
<td>21 mm</td>
</tr>
<tr>
<td>3</td>
<td>5 mm</td>
</tr>
</table>
<button>Show</button>
You can use a library called jQuery to do this extremely easily.
In your <head>, put <script src="code.jquery.com/jquery-latest.js></script>
Give your <table> an id, like this: <table id="myTable">
Add one button like this: <button onclick="$('#myTable').hide();">Hide</button>
And another like this: <button onclick="$('#myTable').show();">Show</button>
This will allow you to toggle the table's visibility.
I started writing this before #metarmask posted - his/her answer is much better, so you should probably take his/her advice.
I'm using Twitter's Bootstrap, which includes a neat hover effect for table rows, and I would like to add the clickability that users will expect when a row lights up. Is there any foolproof way to do this?
Yes I've done my research, but every solution is extremely awkward and flawed at best. Any help would be most appreciated.
The HTML
<table id="example">
<tr>
<th> </th>
<th>Name</th>
<th>Description</th>
<th>Price</th>
</tr>
<tr>
<td>Edit</td>
<td>Apples</td>
<td>Blah blah blah blah</td>
<td>10.23</td>
</tr>
<tr>
<td>Edit</td>
<td>Bananas</td>
<td>Blah blah blah blah</td>
<td>11.45</td>
</tr>
<tr>
<td>Edit</td>
<td>Oranges</td>
<td>Blah blah blah blah</td>
<td>12.56</td>
</tr>
</table>
The CSS
table#example {
border-collapse: collapse;
}
#example tr {
background-color: #eee;
border-top: 1px solid #fff;
}
#example tr:hover {
background-color: #ccc;
}
#example th {
background-color: #fff;
}
#example th, #example td {
padding: 3px 5px;
}
#example td:hover {
cursor: pointer;
}
The jQuery
$(document).ready(function() {
$('#example tr').click(function() {
var href = $(this).find("a").attr("href");
if(href) {
window.location = href;
}
});
});
I got the code HERE
Although my Google-skills are pretty awesome this is something most people should find...
http://www.electrictoolbox.com/jquey-make-entire-table-row-clickable/
But, to make it a lot easier... What about simply giving the row an id and assigning a link to that id with jQuery?
<table>
<tr id='link1'>
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
<tr id='link2'>
<td>two-one</td>
<td>two-two</td>
<td>two-three</td>
<td>two-four</td>
</tr>
</table>
and
$("#link1").click(function(){
window.location = "http://stackoverflow.com/questions/12115550/html-clickable-table-rows";
});
$("#link2").click(function(){
window.location = "http:///stackoverflow.com";
});
also see this: http://jsfiddle.net/avrZG/
Without jQuery:
<table>
<tr id='link1' onclick="document.location='http://stackoverflow.com/about';">
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
<tr id='link2' onclick="document.location='http://stackoverflow.com/help';">
<td>two-one</td>
<td>two-two</td>
<td>two-three</td>
<td>two-four</td>
</tr>
</table>
It is not very clear what you are trying to do but you probably want the following. Adding a tabindex to the tr elements will work in most browsers and make it possible to set focus on a row via mouse click or keyboard tab.
<table>
<tr id='link1' tabindex="100">
<td>one</td>
<td>two</td>
<td>three</td>
<td>four</td>
</tr>
<tr id='link2' tabindex="101">
<td>two-one</td>
<td>two-two</td>
<td>two-three</td>
<td>two-four</td>
</tr>
</table>