Here is my HTML code.
How can I get the value of the data attribute when click the cell?
<td id = "orderIds" data-cids="213,431">orders</td>
What should I use to trigger an event when I click on the <td> cell?
Please check below mentioned solution.
$('td').click(function(){
alert($(this).data('cids'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td id = "orderIds" data-cids="213,431">orders</td>
<td data-cids="23,43">12</td>
<td data-cids="21,41">23</td>
<td data-cids="13,31">34</td>
</tr>
</table>
you need clicked cell data attribute so use of this will do the needful. use following snippet and it should work.
$('td').click(function(){
var data = $(this).data('cids');
})
Bind a click event handler by selecting cell using the has-attribute selector(optional) and get data attribute value using data() method.
$('td[data-cids]').click(function() {
console.log($(this).data('cids'));
// or use `this.dataset.cids`
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td data-cids="213,431">orders</td>
<td data-cids="123,234">orders</td>
</tr>
</table>
With pure js...
orderIds.onclick=function(){
console.log(this.dataset.cids)
}
you can also use $('#orderIds) with jQuery
Related
I need to obtain the value of the checkbox when "expand" is clicked, I have tried the following this looks clumsy and when the DOM is modified then it may render undefined instead of the expect value CBVALUE
<tr>
<td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
<td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
<td class="third"><a class="option s" id="option_0">Expand</a> </td>
<td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr>
$('.option').click(function(e) {
e.preventDefault();
alert($(this).parent().prev().prev().children().first().val()); //should alert as CBVALUE
});
Is there an easier solution than traversing with relative elements?
You can try below logic where find parent tr and then find checkbox to read value
$(function(){
$('.option').on('click', function(e) {
e.preventDefault();
var value = $(this).closest('tr').find('input:checkbox').val();
alert(value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
<td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
<td class="third"><a class="option s" id="option_0">Expand</a> </td>
<td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr>
</table>
Try $.parents() instead:
$(this).parents('tr').find('input[type=checkbox]').val()
You can use jQuery's $(...).siblings() method and pass it a selector:
$('.option').click(function(e) {
e.preventDefault();
alert($(this).siblings("#r0[type='checkbox']").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td class="first"><input class="selects" type="checkbox" value="CBVALUE" id="r0"></td>
<td class="second"><a target="_blank" href="rGjgODop0">Somevalue</a></td>
<td class="third"><a class="option s" id="option_0">Expand</a> </td>
<td class="fourth">2018-08-31T08:25:09.617Z</td>
</tr>
for me, .find() method seems to return an array of checkbox objects, I need to add [0] to the end to be able to apply .val() method, otherwise I got 'on' all times. Example:
var value = $(this).closest('tr').find('input:checkbox')[0].val()
Yo can do by using filtering. See this demo link
$(this).closest('td').parent().find('input[type=checkbox]').val()
I have a some table data that looks like this:
<td class="homebranch">
This is some Text!
<span class="location">Texas</span>
</td>
How can I use jQuery to remove the text (This is some Text) but keep the span class?
You can set the html to the elements that should remain.
$(".homebranch").each(function() {
$(this).html($(".location", this));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="homebranch">
This is some Text!
<span class="location">Texas</span>
</td>
</tr>
<tr>
<td class="homebranch">
This is some Text!
<span class="location">Another Texas</span>
</td>
</tr>
<table>
You need to access the text node that is the first child of the td and set the nodeValue to "". In order to do this, you must extract the td from the JQuery wrapped set by passing [0] to the set. This returns a regular DOM node, that you can then call firstChild on to get to the text node.
$("td.homebranch")[0].firstChild.nodeValue = "";
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="homebranch">
This is some Text!
<span class="location">Texas</span>
</td>
</tr>
<table>
I have the following code:
<td class="bedrag">
#_ATT{Factuur bedrag}
</td>
<td class="paid">
#_ATT{Betaald}{Ja|Nee}
</td>
In the td paid the option can be given for Yes or No. I would like change the background of bedrag depending on what was chosen in the td paid. I figured the best way to go was to addClass using Javascript. So I googled around for a while and found this piece of code:
jQuery('a:contains("Sponsored")').closest('.post-item').addClass('sponz');
I changed it to fit my needs:
$('.paid:contains("Nee")').closest('.bedrag').addClass('sponz');
But that didn't work. So I tried the following code:
$('.paid:contains("Nee")').addClass('sponz');
This adds the class sponz to the td paid. But I want to add it to bedrag. So I then tried this:
('.bedrag:has(.paid:contains("Nee"))').addClass('sponz');
But this also didn't work.
Anyone know how to get this code working so that it will add sponz the the td bedrag when a user selects the option Nee? thanks in advance!
closest() isn't quite what you need as that looks for parents. .bedrag is a sibling of .paid, so you need to use prev() instead:
$('.paid:contains("Nee")').prev('.bedrag').addClass('sponz');
.sponz { color: #C00; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class="bedrag">bedrag 1</td>
<td class="paid">Nee</td>
</tr>
<tr>
<td class="bedrag">bedrag 2</td>
<td class="paid">Ja</td>
</tr>
<tr>
<td class="bedrag">bedrag 3</td>
<td class="paid">Nee</td>
</tr>
</table>
Can't you just do an if?
if ($('.paid:contains("Nee")').length !== 0) { // there's at least an element
// add class to the right element
}
i have a table with a few rows. i want to access the cells with the value that are in the same row as the anchor that triggers the function populateRow();
(i hope i explained it in a clear way).
any idea how to do that?
<tr>
<td>
some value
</td>
<td>
update
</td>
</tr>
<tr>
<td>
another value
</td>
<td>
update
</td>
</tr>
The populateRow() function would need to know which anchor was clicked, so you'd need to either pass this to it to give it a reference to said anchor:
onclick="populateRow(this);"
function populateRow(anchor) {
var row = $(anchor).closest("tr");
var firstCellValue = row.find("td").first().text();
}
...and from there use .closest() to navigate up the DOM to the containing tr element.
Or, better, bind the click event handler with jQuery rather than putting it inline on every row:
$(document).ready(function() {
$("#idOfYourTable").on("click", "a", function(e) {
var row = $(this).closest("tr");
var firstCellValue = row.find("td").first().text();
console.log(firstCellValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="idOfYourTable">
<tr>
<td>Value 1</td>
<td>
update
</td>
</tr>
<tr>
<td>Value 2</td>
<td>
update
</td>
</tr>
</table>
(Click the "Run..." button to see it working.)
I don't know what is that populateRow() function for, but if you want to get value on the first td of the same tr, then you can try testing this:
onclick="alert($(this).closest('tr').find('td:first').text())"
if you want to pass it in populateRow() function, you can:
onclick="populateRow($(this).closest('tr').find('td:first').text())"
Or ...
It would be more neat if you pass the element then process it later inside your function:
onclick="populateRow(this)"
function populateRow(elm) {
var val = $(elm).closest('tr').find('td:first').text();
alert(val);
}
Hope this helps. Good luck!
Try to set my td value from my JavaScript JSON. But it dun seems to work when I inspect the element. However the html works just not the value. Not sure what is the problem. Tried changing the id to class too but it didnt work as well.
$(document).ready(function(){
$(".login_a").click(function(){
var test = $(this).attr('data-id');
var topost = 'getMilestoneDetail.php='+test;
var returnResults = $.getJSON('getMilestoneDetail.php?id='+test,function(data)
{
$("#td_projectName").html(data.projectName);
$("#budget_amt").html(data.budget);
$("#milestone_1").html(data.mileStone1);
$("#percentage_1").html(data.percentage1);
$("#percentage_1").val(data.percentage1);
});
});
</script>
<div id="login_form">
<table border=1>
<tr>
<th> Project Name </th>
<td id="td_projectName">
</td>
</tr>
<tr>
<th> Budget</th>
<td id="budget_amt">
</td>
</tr>
<tr>
<th>Stages</th>
<th>Payment Percentage</th>
</tr>
<tr>
<td id="milestone_1">
</td>
<td id="percentage_1">
</td>
</tr>
VAL is not a valid attribute of a TD, and that is why you cannot set it. If you want to store some data as an attribute of the node, the use setAttribute to store it. Example:
Straight JS:
document.getElementById('percentage_1').setAttribute('bob', 'your uncle');
Or using jQuery:
$('#percentage_1').attr('bob', 'your uncle');
You would use getAttribute, or .attr, to get the value later, e.g.
var bob = document.getElementById('percentage_1').getAttribute('bob');
or
$('#percentage_1').attr('bob');
Note that non-standard attributes won't validate and may be frowned on, but are common fixtures in web applications. You can use jQuery's .data method to properly set data on a node if you are unconcerned with older browser support.
The .val(value) method is primarily used to set the values of form elements such as input, select and textarea.
You can use a hidden field to keep the value or you can use .text() method to get the text of td.
<td id="percentage_1">
<input type="hidden" id="percentage_1_val" />
</td>
$("#percentage_1_val").val(data.percentage1);
Get the value.
$("#percentage_1_val").val();
// or you can use $("#percentage_1").text();