Get dataset item from html <a> element using jquery - javascript

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>

Related

Target closest Table Row when button inside of TD is clicked jQuery

So. I have this table:
<table>
<tr>
<td>Element1</td>
<td>Element1</td>
<td>Element1</td>
<td><a id="btn" href=#">Accept</a></td>
</tr>
<tr>
<td>Element2</td>
<td>Element2</td>
<td>Element2</td>
<td><a id="btn" href=#">Accept</a></td>
</tr>
</table>
What I want to do is: Button gets clicked, it gets hidden and the respective <tr> gets border: 1px solid black;.
I'm kinda new to jQuery and can't figure out how to select the 2nd parent of an element. Any help would be appreciated
your buttons are using the same id value. you have to use class
Also you don't need to use jQuery. please follow this code
const btns = document.querySelectorAll('.id');
btns.forEach((btn) => {
btn.addEventListener('click', (e) => {
e.preventDefault();
e.target.closest('tr').style.cssText = "border:1px solid black";
e.target.remove();
})
});
table {
border-collapse: collapse
}
<table>
<tr>
<td>Element1</td>
<td>Element1</td>
<td>Element1</td>
<td><a class="id" href=#">Accept</a></td>
</tr>
<tr>
<td>Element2</td>
<td>Element2</td>
<td>Element2</td>
<td><a class="id" href=#">Accept</a></td>
</tr>
</table>

How to get the first td value using jquery

I have create a table with following style. Now I want to get first td value as 1,2,3 using jQuery.
<html>
<head>
<style type='text/css'>
table {
counter-reset: rowNumber;
}
table tr {
counter-increment: rowNumber;
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
</style>
</head>
<body>
<table border="1" id="MyTable">
<tr>
<td></td> <td>blue</td>
</tr>
<tr>
<td></td><td>red</td>
</tr>
<tr>
<td></td><td>black</td>
</tr>
</table>
</body>
</html>
I tried with following script but it showing row counter as text. How to get the value of first td?
<script>
$("#MyTable").find('tr').each(function (i, el) {
$(this).find('td:eq(0)').each(function () {
console.log(window.getComputedStyle(this, ':before').content);
});
});
</script>
Based on this:
Generated content does not alter the document tree. In particular, it is not fed back to the document language processor.
So if you see the html that generated, you will see all td is empty while you see counter (1,2,3) in page. this is html generated:
But this is result:
So generated content does not alter the document tree and you can't access to value of it.
There are lots of alternative you can do it:
$("#MyTable").find('tr').each(function (i, el) {
debugger
$(this).find('td:eq(0)').each(function (index, el) {
$(this).html(i+1)
console.log($(this).html());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="MyTable">
<tbody>
<tr>
<td></td>
<td>blue</td>
</tr>
<tr>
<td></td>
<td>red</td>
</tr>
<tr>
<td></td>
<td>black</td>
</tr>
</tbody>
</table>
Update
You can rest number after each modification on your table:
function setnumber() {
$('#MyTable tbody tr').each(function (i) {
$($(this).find('td')[0]).html(i + 1);
});
}
$(".delete").click(function () {
$(this).closest('tr').remove();
setnumber();
});
setnumber();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1" id="MyTable">
<tbody>
<tr>
<td></td>
<td>blue</td>
<td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
</tr>
<tr>
<td></td>
<td>red</td>
<td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
</tr>
<tr>
<td></td>
<td>black</td>
<td><span class="delete"><i class="fas fa-trash"></i>delete</span></td>
</tr>
</tbody>
</table>
Probably, you want to put 1,2,3 in TDS on DOM.
You can do like this:
$("#MyTable").find('tr').each(function (i, el) { $(el).find("td").eq(0).text(i); });
https://codesandbox.io/s/jquery-playground-forked-pmtgc?file=/src/index.js
You can use child selector to select the child of tr
jQuery("body > table > tr:nth-child(1) > td:nth-child(1)").text();

Add different custom tables to DOM by click event with Jquery

I have the following table with buttons on a simple HTML.
I need the buttons to be able to remove the current table and draw a new table (with a different content) to the DOM without reloading the page.
I have a JQuery method for removing the current table element, however I struggle with adding another table.
How can a table be added efficiently?
<!DOCTYPE HTML>
<html>
<script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
<style>
.header-class{
font-size:25px;
font-family:cursive;
background-color:lightgray;
cursor:pointer;
}
.members {
font-family:helvetica;
}
.blips {
color:red;
}
.crudz {
color:blue;
}
.satin-flings {
color:rgb(213, 194, 0);
}
td {
padding-right:10px;
padding-left:10px;
border: 10px;
}
</style>
<body>
<button class="tableRevmoveButton"> Remove table </button>
<button class="tableAddButton"> Add table </button>
<button class="tableAddNewButton"> Add different table </button>
<div class="tabel">
<table class="itdev_people">
<tr class="header-class">
<td colspan="4">The Blips</td>
</tr>
<tr class="members blips">
<td>Rotton </td>
<td>Rob</td>
<td>ttt</td>
</tr>
<tr class="members blips">
<td>Effram</td>
<td>The Dumb Rabbot</td>
</tr>
<tr class="members blips">
<td>Effram</td>
<td>The Dumb Rabbot</td>
</tr>
<tr class="header-class">
<td colspan="2">The Crudz</td>
</tr>
<tr class="members crudz">
<td>Jason</td>
<td>"Sky" Halker</td>
</tr>
<tr class="members crudz">
<td>Sparky</td>
<td>That stupid Eagle</td>
</tr>
<tr class="header-class">
<td colspan="2">The Satin Flings</td>
</tr>
<tr class="members satin-flings">
<td>Josh-man</td>
<td>McDanielson-man III</td>
</tr>
<tr class="members satin-flings">
<td>Dominque</td>
<td>The Christmas Donkey</td>
</tr>
<tr class="header-class">
<td colspan="2">The Satin Flings</td>
</tr>
<tr class="members satin-flings">
<td>Josh-man</td>
<td>McDanielson-man III</td>
</tr>
<tr class="members satin-flings">
<td>Dominque</td>
<td>The Christmas Donkey</td>
</tr>
</table>
</div>
<script>
//Table action
$('.header-class').click(function() {
console.log('clicked');
if ($(this).hasClass('collapsed')) {
$(this)
.nextUntil('tr.header-class')
.find('td')
.parent()
.find('td > div')
.slideDown('fast', function() {
var $set = $(this);
$set.replaceWith($set.contents());
});
$(this).removeClass('collapsed');
} else {
$(this)
.nextUntil('tr.header-class')
.find('td')
.wrapInner('<div style="display: block;" />')
.parent()
.find('td > div')
.slideUp('fast');
$(this).addClass('collapsed');
}
});
//Table Remove Button action
$('.tableRevmoveButton').click(function() {
$('.tabel').remove();
console.log('Remove table');
});
//Table add Button action für add
$('.tableAddButton').click(function() {
$('body').append('.tabel');
console.log('Add table');
});
</script>
</body>
</html>
if you have class for table which i guess you are having .tabel then use this
$('.tableAddButton').click(function() {
$('body').addClass('.tabel');
console.log('Add table');
});
but if dont have a class and want to create table with html code in script then
$('.tableAddButton').click(function() {
$('body').append('<table><thead>...</thead>...</table>');
console.log('Add table');
});
or if you want only table in the body
$('.tableAddButton').click(function() {
$('body').html('<table><thead>...</thead>...</table>');
console.log('Add table');
});
It shouldn't be too difficult using the .append() JQuery function. When the button is clicked, select the tableDiv that you want to add the new table to, and then append table html.
$("#btn").click(function(){
$("#tableDiv").append("<table><tr><th>Appended table</th></tr></table>");
});

jQuery - Selecting the first <a> in the first <td> of a <tr>

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>

Why does JQuery show() function only work on one (rather than all) of elements with the selector?

JSFiddle.
In the following SSCCE, there is a <table> nested inside another <table>.
The question is about the click listener for #add button. Specifically, the last if/else block of the function. When you run this code, click the Add TextField button once (or more times), and you will see that the #remove button on which show() should be executed, is only shown for the first matched selector, and not both (or all) of them.
Ideally the Remove TextField should be shown for all the #remove selectors.
The question is why? How do I fix this?
$(document).on("click", "button#add", function() {
event.preventDefault();
var parentTable = $(this).parent().parent().parent().parent().parent().parent().parent().parent();
var lastTableRow = parentTable.children('tbody').children('tr:last');
//Adding the new row
parentTable.children('tbody').append(lastTableRow.clone());
//Reset lastRow variable
lastTableRow = parentTable.children('tbody').children('tr:last');
//Reset the fields
lastTableRow.find('table tbody tr td input').each(function() {
$(this).val('');
});
//update numberOfRows variable
var numberOfRows = parentTable.children('tbody').children('tr').length;
alert("numberOfRows:" + numberOfRows); //check
if (!(numberOfRows > 1)) {
$("#remove").hide();
} else {
$("#remove").show();
}
});
#outer-table {
padding: 20px;
border: 3px solid pink;
}
#inner-table {
border: 3px solid orange;
}
#remove {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="outer-table">
<tbody>
<tr>
<td>
<table id="inner-table">
<tbody>
<tr>
<td>
<p style="display:inline-block">Enter first complain:</p>
<input type="text" />
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<button id="add">Add Textfield</button>
<button id="remove">Remove Textfield</button>
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Table Footer</td>
</tr>
</tfoot>
</table>
That's because you're using id for a group of objects. id should be unique per document. You should use a class name instead.

Categories