Jquery - Setting value of <td> - javascript

I currently have a table and in 1 column a Delete link, if the user clicks this link it fires an onClick which basically flags that item to be deleted and hide the TR.
It works fine, but I am just wondering if there is a better way .....
$(document).on('click', '.deleteCell', function (e) {
//Belt and braces - only do this for <td> elements
var target = $(e.target);
if (!target.is('td')) {return;}
var h = this.innerHTML;
var newH = h.replace("CsUpdated", "CsDeleted");
newH = newH.replace("CsAdded", "CsDeleted");
this.innerHTML = newH;
//We clicked on a TD so get the row TR.
var theRow = $(this).closest('tr');
theRow.hide();
});
I just think there must be a better way than the string manipulation I am doing with the replace? Is there?
I've tried these but with no luck...
$(this).attr('value', 'CsDeleted');
$(target).attr('value', 'CsDeleted');
$(this).val('CsDeleted');
$(target).val('CsDeleted');
Thanks

td has no value use .text() or .html()

td doesnt have a value attribute.
Use
$("td").html() // to fetch html
$("td").html("<span> Hello World </span>") // to set html
$("td").text() // to fetch plain text
$("td").text("Hello World") // to set plain text

You could use any of the following to set the cell contents
.html() or .text() or .prependor .append and more
However .val() only works on inputs that have the value="...." attribute. If you want to prop the Cell with some data use .data("key","value") which can be accessed at any point by calling .data("key");

Try this one,
$(function(){
$('.delete').click(function(){
$(this).closest('tr').remove();
});
});

You may use custom data-- attributes on any html element ( see this MDN article and the reference ). These are accessible through jquery's attr method and have no influence on rendering.
Code PoC:
$(document).on('click', 'td.deleteCell', function (e) {
//Belt and braces - only do this for <td> elements
$(this)
.removeAttr('data-CsUpdated')
.removeAttr('data-CsAdded')
.attr('CsDeleted', '1')
;
//We clicked on a TD so get the row TR.
$(this).closest('tr').hide();
});
In case the values given in your code are mutually exclusive, this simplifies to
$(document).on('click', 'td.deleteCell', function (e) {
//Belt and braces - only do this for <td> elements
$(this).attr('Cs', 'Deleted');
// attr 'Cs' contained 'Added' or 'Updated'
// This scheme requires modifications at other places in your original code !
;
//We clicked on a TD so get the row TR.
$(this).closest('tr').hide();
});
Update
As the OP actually wants to modify the value of a child input element, the handler reduces to:
$(document).on('click', 'td.deleteCell', function (e) {
$('input', $(this)).val('CsDeleted');
// more specific selector may be needed depending on possible cell contents
$(this).closest('tr').hide();
});

Related

How to access paragraph inside table td using jquery

I am having an issue accessing a paragraph inside a table td using jquery.
What I want to do is to hide the paragraph inside table td if the value is X for example.
This is my code. The value is being select but the hiding is not working.
var Privileges = jQuery('.woocommerce-checkout #customer_details
.woocommerce-billing-fields #billing_country');
var select = this.value;
Privileges.change(function () {
if ($(this).val() == 'RO') {
$( "#wc-local-pickup-plus-toggle-default-handling" ).show();
}
else $('#wc-local-pickup-plus-toggle-default-handling').hide();
});
Here is the inspected element image. I have no idea why its not working.
Thank You.
$("table td").children().find('p').hide();
If you added the element dynamically use the following:
Privileges.on('change', function(){
// your code here
});
Its looking like the problem in your code is here:
if ($(this).val() == 'RO')
try changing this to
if ($(this).find(':selected').val() == 'RO')
To summarize, the listener is added to the select box, so in the listener, 'this' refers to the select element. Which doesn't have a value.
$(this).find(':selected') finds any sub element that has the "selected" property, which in this cas we know will be an option, which should have a value.

javascript variable for jquery script

I dont know Javascript at all, so sorry for asking a question like this...
This is what I have:
$(document).ready(function(){$("#more0").click(function(){$("#update0").slideToggle("normal");});});
$(document).ready(function(){$("#more1").click(function(){$("#update1").slideToggle("normal");});});
$(document).ready(function(){$("#more2").click(function(){$("#update2").slideToggle("normal");});});
$(document).ready(function(){$("#more3").click(function(){$("#update3").slideToggle("normal");});});
$(document).ready(function(){$("#more4").click(function(){$("#update4").slideToggle("normal");});});
$(document).ready(function(){$("#more5").click(function(){$("#update5").slideToggle("normal");});});
$(document).ready(function(){$("#more6").click(function(){$("#update6").slideToggle("normal");});});
$(document).ready(function(){$("#more7").click(function(){$("#update7").slideToggle("normal");});});
$(document).ready(function(){$("#more8").click(function(){$("#update8").slideToggle("normal");});});
$(document).ready(function(){$("#more9").click(function(){$("#update9").slideToggle("normal");});});
$(document).ready(function(){$("#more10").click(function(){$("#update10").slideToggle("normal");});});
And So On.. Until #more30 and #update30...
So... Right now, my pages has 30 lines :)
Is there a way to do it less complicated?
Thanks!
Use attribute selector ^= . The [attribute^=value] selector is used to select elements whose attribute value begins with a specified value.
$(document).ready(function(){
$("[id^='more']").click(function(){
$("#update" + $(this).attr('id').slice(4)).slideToggle("normal");
});
});
Try to use attribute starts with selector to select all the elements having id starts with more , then extract the numerical value from it using the regular expression and concatenate it with update to form the required element's id and proceed,
$(document).ready(function(){
$("[id^='more']").click(function(){
var index = $(this).attr('id').match(/\d+/)[0];
$("#update" + index).slideToggle("normal");
});
});
use attribute start with selector
$(document).ready(function(){
$("[id^='more']").click(function(){
$("[id^='update']").slideToggle("normal");
});
});
//select all elements that contain 'more' in their id attribute.
$('[id^=more]').click(function(){
//get the actual full id of the clicked element.
var thisId = $(this).attr("id");
//get the last 2 characters (the number) from the clicked elem id
var elemNo= thisId.substr(thisId.length-2);
//check if last two chars are actually a number
if(parseInt(elemNo))
{
var updateId = "#update"+elemNo;//combine the "#update" id name with number e.g.5
}
else
{
//if not, then take only the last char
elemNo= thisId.substr(thisId.length-1);
var updateId = "#update"+elemNo;
}
//now use the generate id for the slide element and apply toggle.
$(updateId).slideToggle("normal");
});
Well first of all, you could replace the multiple ready event handler registrations with just one, e.g
$(document).ready(
$("#more0").click(function(){$("#update0").slideToggle("normal");});
//...
);
Then, since your buttons/links has pretty much the same functionality, I would recommend merging these into a single click event handler registration as such:
$(document).ready(
$(".generic-js-hook-class").click(function(){
var toggleContainer = $(this).data('toggleContainer');
$(toggleContainer).slideToggle("normal");
});
);
The above solution uses HTML Data Attributes to store information on which element to toggle and requires you to change the corresponding HTML like so:
<div class=".generic-js-hook-class" data-toggle-container="#relatedContainer">Click me</div>
<div id="relatedContainer>Toggle me</div>
I would recommend you to use Custom Data Attributes (data-*). Here You can store which element to toggle in the data attributes which can be fetched and used latter.
JavaScript, In event-handler you can use .data() to fetch those values.
$(document).ready(function () {
$(".more").click(function () {
$($(this).data('slide')).slideToggle("normal");
});
});
HTML
<div class="more" data-slide="#update1">more1</div>
<div class="more" data-slide="#update2">more2</div>
<div id="update1">update1</div>
<div id="update2">update2</div>
DEMO

jQuery: closest / parent not working

I have a basic HTML table with a button in each row.
By click on the button I want to alert the text from the second TD in the same TR.
For some reason the below does not work and either returns nothing or null (depending on whether I try .text() or .html() ). parent instead of closest failed as well.
Can someone tell me what I am doing wrong here ?
(My table has the ID "myTable" and all TRs are in a TBODY, if needed.)
Example TR:
<tr><td style="width:30%"><strong>Row 1:</strong></td><td id="fldRow1" style="width:60%">test text</td><td><button type="button" id="copyRow1" onclick="copyOutput()">Copy</button></td></tr>
JS function:
function copyOutput() {
var output = $(this).closest('tr').find('td:eq(1)').text();
alert(output);
}
Many thanks for any help with this, Tim.
thisin you code not refer to the current element it refers to the window object.
HTML
Change
onclick="copyOutput()"
to
onclick="copyOutput(this)" //pass refer of the current element
js
function copyOutput(el) { //el get current element clicked
var output = $(el).closest('tr').find('td:eq(1)').text();
alert(output);
}

changing the value of a child input

I am having troubles in changing the value of a hidden <input> after dropping a sortable element
Here's my JSFiddle
I Am trying to change the value of the hidden <input> that is inside the block <div> when i drop the from the container
i have tried this but with no luck
$('.block1').on("sortreceive", function (event, ui) {
var $list = $(this);
$(this).children().first("input").val = 'Something';
if ($list.children().length > 2) {
$(ui.sender).sortable('cancel');
}
});
jQuery val is a method. So try this
$(this).children().first("input").val("Something");
Assuming the $(this).children().first("input") expression returns a valid object for your DOM
Try
//use .first() only if there are multiple input elements under `this` and you want to set the value to first item
$(this).find("input").first().val('Something');
You can use a combination of .find() and :hidden
$(this).find('input:hidden').val('Something');
Please note that .val = 'Something' is not correct, you should use .val('Something');
Demo here

How do I get the value of td using hierarchy?

<tr>
<td>#</td>
<td>2009</td>
<td><a class="delete_this">Click</a></td>
</tr>
I want to use jquery and get the text of 2nd (second) "td" when clicking the anchor. I want the "td" in the same tr as the anchor...
How do I do this?
So far I have
$(document).ready(function(){
$(".delete_this').click(function(){
var myNUmber = $(this).parent()....///And this i should write the code to get the text for second td in tr where the anchor belongs to
})
})
Here's a few ways:
$(this).parent().siblings("td:eq(1)").text()
If your looking for the cell before you can do it this way:
$(this).parent().prev().text()
var myNUmber = $(this).parent().siblings().get(1).text();
Details are here
$('.delete_this').closest('tr').children(':eq(1)') .text();
1) Get the .delete_this A tag
2) Get the parent TR
3) Get the 2nd TD
4) Get the Text of the 2nd TD
Your better adding just 1 click event by using .live rather than adding multiple click handlers, if you had a large table this will impact performance (think 100 separate bound events).
Also remember to prefix class selectors with nodeName if you can (here you are sure all delete_this are anchors)
$('a.delete_this').live('click', function(){
var myNUmber = $(this).parent().siblings().get(1).text();
});

Categories