Jquery - Change table cell values based on table row classAdd table row in jQueryHow to change the href for a hyperlink using jQueryHow to change an element's class with JavaScript?Space between two rows in a table?Change the selected value of a drop-down list with jQueryHow can I select an element with multiple classes in jQuery?jQuery: count number of rows in a tableGet class list for element with jQueryjQuery how to find an element based on a data-attribute value?JQuery alternate colors of *groups of rows* in a table
What does it mean to describe someone as a butt steak?
Memorizing the Keyboard
What to put in ESTA if staying in US for a few days before going on to Canada
Stopping power of mountain vs road bike
Is "remove commented out code" correct English?
What killed these X2 caps?
What reasons are there for a Capitalist to oppose a 100% inheritance tax?
Does a druid starting with a bow start with no arrows?
Is it legal for company to use my work email to pretend I still work there?
Can a virus destroy the BIOS of a modern computer?
Can one be a co-translator of a book, if he does not know the language that the book is translated into?
How much of data wrangling is a data scientist's job?
In a spin, are both wings stalled?
Why was the shrinking from 8″ made only to 5.25″ and not smaller (4″ or less)?
Reserved de-dupe rules
Took a trip to a parallel universe, need help deciphering
1960's book about a plague that kills all white people
Intersection of two sorted vectors in C++
Brothers & sisters
Why is Collection not simply treated as Collection<?>
Forgetting the musical notes while performing in concert
AES: Why is it a good practice to use only the first 16bytes of a hash for encryption?
When a company launches a new product do they "come out" with a new product or do they "come up" with a new product?
I would say: "You are another teacher", but she is a woman and I am a man
Jquery - Change table cell values based on table row class
Add table row in jQueryHow to change the href for a hyperlink using jQueryHow to change an element's class with JavaScript?Space between two rows in a table?Change the selected value of a drop-down list with jQueryHow can I select an element with multiple classes in jQuery?jQuery: count number of rows in a tableGet class list for element with jQueryjQuery how to find an element based on a data-attribute value?JQuery alternate colors of *groups of rows* in a table
.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;
I have a table displays opening hours for various locations and looks somewhat like the following structure;
<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class=""tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>
What I would like to be able to do is change the value of all table cells with the class "tcDayTimes" within the row the class "loc2", I have gotten close with the following jquery but its replacing the values for every cell with that class no matter what table row its in.
<script type="text/javascript">
$('.tblServices > tbody > tr.loc2').each(
$('td.tcDayTimes').html("24 hours")
Can some provide some advice as to where I am going wrong?
Thanks in advance
jquery html
asked Mar 8 at 0:21
IcantCodeIcantCode
74
add a comment |
I have a table displays opening hours for various locations and looks somewhat like the following structure;
<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class=""tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>
What I would like to be able to do is change the value of all table cells with the class "tcDayTimes" within the row the class "loc2", I have gotten close with the following jquery but its replacing the values for every cell with that class no matter what table row its in.
<script type="text/javascript">
$('.tblServices > tbody > tr.loc2').each(
$('td.tcDayTimes').html("24 hours")
Can some provide some advice as to where I am going wrong?
Thanks in advance
jquery html
asked Mar 8 at 0:21
IcantCodeIcantCode
74
I don't think that's how you use.each()api.jquery.com/jquery.each
– Aniket G
Mar 8 at 0:23
add a comment |
I have a table displays opening hours for various locations and looks somewhat like the following structure;
<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class=""tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>
What I would like to be able to do is change the value of all table cells with the class "tcDayTimes" within the row the class "loc2", I have gotten close with the following jquery but its replacing the values for every cell with that class no matter what table row its in.
<script type="text/javascript">
$('.tblServices > tbody > tr.loc2').each(
$('td.tcDayTimes').html("24 hours")
Can some provide some advice as to where I am going wrong?
Thanks in advance
jquery html
asked Mar 8 at 0:21
IcantCodeIcantCode
74
I have a table displays opening hours for various locations and looks somewhat like the following structure;
<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class=""tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>
What I would like to be able to do is change the value of all table cells with the class "tcDayTimes" within the row the class "loc2", I have gotten close with the following jquery but its replacing the values for every cell with that class no matter what table row its in.
<script type="text/javascript">
$('.tblServices > tbody > tr.loc2').each(
$('td.tcDayTimes').html("24 hours")
Can some provide some advice as to where I am going wrong?
Thanks in advance
jquery html
jquery html
asked Mar 8 at 0:21
IcantCodeIcantCode
74
asked Mar 8 at 0:21
IcantCodeIcantCode
74
asked Mar 8 at 0:21
IcantCodeIcantCode
74
asked Mar 8 at 0:21
IcantCodeIcantCode
74
asked Mar 8 at 0:21
IcantCodeIcantCode
74
74
I don't think that's how you use.each()api.jquery.com/jquery.each
– Aniket G
Mar 8 at 0:23
add a comment |
I don't think that's how you use.each()api.jquery.com/jquery.each
– Aniket G
Mar 8 at 0:23
I don't think that's how you use
.each() api.jquery.com/jquery.each– Aniket G
Mar 8 at 0:23
I don't think that's how you use
.each() api.jquery.com/jquery.each– Aniket G
Mar 8 at 0:23
add a comment |
2 Answers
2
active
oldest
votes
You have a typo in your html, but otherwise...
$('.tblServices > tbody > tr.loc2').each(function()
$('td.tcDayTimes', this).html("24 hours")
);
Where this is the tr you are iterating over. The second argument to the $() is the context.
OR
$('.tblServices > tbody > tr.loc2 td.tcDayTimes').html("24 hours");
answered Mar 8 at 0:23
TaplarTaplar
18k21529
add a comment |
jQuery
You were close. In your selector, you need to add > .tcDayTimes, which stores the items into a NodeList. Then use .html() to change the html of all those elements.
$(".tblServices > tbody > .loc2 > .tcDayTimes").html("24 hours");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name ">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>Vanilla Javascript
You can also use the following method to do this in vanilla javascript. This basically uses .querySelectorAll() to select the values you wanted and store them into a NodeList (like an array). Then you can use .innerHTML to set the html of those elements.
var elements = document.querySelectorAll(".tblServices > tbody > .loc2 > .tcDayTimes");
elements.forEach(e =>
e.innerHTML = "24 hours";
);<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name ">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>You dont need the >. You can just have .tblServices tbody .loc2 .tcDayTimes, but it makes it look neater, and I would keep it there if I were you.
answered Mar 8 at 0:27
Aniket GAniket G
2,6661630
Thanks for your help, this is helpful
– IcantCode
Mar 8 at 1:06
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55054939%2fjquery-change-table-cell-values-based-on-table-row-class%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
You have a typo in your html, but otherwise...
$('.tblServices > tbody > tr.loc2').each(function()
$('td.tcDayTimes', this).html("24 hours")
);
Where this is the tr you are iterating over. The second argument to the $() is the context.
OR
$('.tblServices > tbody > tr.loc2 td.tcDayTimes').html("24 hours");
answered Mar 8 at 0:23
TaplarTaplar
18k21529
add a comment |
You have a typo in your html, but otherwise...
$('.tblServices > tbody > tr.loc2').each(function()
$('td.tcDayTimes', this).html("24 hours")
);
Where this is the tr you are iterating over. The second argument to the $() is the context.
OR
$('.tblServices > tbody > tr.loc2 td.tcDayTimes').html("24 hours");
answered Mar 8 at 0:23
TaplarTaplar
18k21529
add a comment |
You have a typo in your html, but otherwise...
$('.tblServices > tbody > tr.loc2').each(function()
$('td.tcDayTimes', this).html("24 hours")
);
Where this is the tr you are iterating over. The second argument to the $() is the context.
OR
$('.tblServices > tbody > tr.loc2 td.tcDayTimes').html("24 hours");
answered Mar 8 at 0:23
TaplarTaplar
18k21529
You have a typo in your html, but otherwise...
$('.tblServices > tbody > tr.loc2').each(function()
$('td.tcDayTimes', this).html("24 hours")
);
Where this is the tr you are iterating over. The second argument to the $() is the context.
OR
$('.tblServices > tbody > tr.loc2 td.tcDayTimes').html("24 hours");
answered Mar 8 at 0:23
TaplarTaplar
18k21529
answered Mar 8 at 0:23
TaplarTaplar
18k21529
answered Mar 8 at 0:23
TaplarTaplar
18k21529
answered Mar 8 at 0:23
TaplarTaplar
18k21529
18k21529
add a comment |
add a comment |
jQuery
You were close. In your selector, you need to add > .tcDayTimes, which stores the items into a NodeList. Then use .html() to change the html of all those elements.
$(".tblServices > tbody > .loc2 > .tcDayTimes").html("24 hours");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name ">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>Vanilla Javascript
You can also use the following method to do this in vanilla javascript. This basically uses .querySelectorAll() to select the values you wanted and store them into a NodeList (like an array). Then you can use .innerHTML to set the html of those elements.
var elements = document.querySelectorAll(".tblServices > tbody > .loc2 > .tcDayTimes");
elements.forEach(e =>
e.innerHTML = "24 hours";
);<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name ">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>You dont need the >. You can just have .tblServices tbody .loc2 .tcDayTimes, but it makes it look neater, and I would keep it there if I were you.
answered Mar 8 at 0:27
Aniket GAniket G
2,6661630
Thanks for your help, this is helpful
– IcantCode
Mar 8 at 1:06
add a comment |
jQuery
You were close. In your selector, you need to add > .tcDayTimes, which stores the items into a NodeList. Then use .html() to change the html of all those elements.
$(".tblServices > tbody > .loc2 > .tcDayTimes").html("24 hours");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name ">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>Vanilla Javascript
You can also use the following method to do this in vanilla javascript. This basically uses .querySelectorAll() to select the values you wanted and store them into a NodeList (like an array). Then you can use .innerHTML to set the html of those elements.
var elements = document.querySelectorAll(".tblServices > tbody > .loc2 > .tcDayTimes");
elements.forEach(e =>
e.innerHTML = "24 hours";
);<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name ">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>You dont need the >. You can just have .tblServices tbody .loc2 .tcDayTimes, but it makes it look neater, and I would keep it there if I were you.
answered Mar 8 at 0:27
Aniket GAniket G
2,6661630
Thanks for your help, this is helpful
– IcantCode
Mar 8 at 1:06
add a comment |
jQuery
You were close. In your selector, you need to add > .tcDayTimes, which stores the items into a NodeList. Then use .html() to change the html of all those elements.
$(".tblServices > tbody > .loc2 > .tcDayTimes").html("24 hours");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name ">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>Vanilla Javascript
You can also use the following method to do this in vanilla javascript. This basically uses .querySelectorAll() to select the values you wanted and store them into a NodeList (like an array). Then you can use .innerHTML to set the html of those elements.
var elements = document.querySelectorAll(".tblServices > tbody > .loc2 > .tcDayTimes");
elements.forEach(e =>
e.innerHTML = "24 hours";
);<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name ">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>You dont need the >. You can just have .tblServices tbody .loc2 .tcDayTimes, but it makes it look neater, and I would keep it there if I were you.
answered Mar 8 at 0:27
Aniket GAniket G
2,6661630
jQuery
You were close. In your selector, you need to add > .tcDayTimes, which stores the items into a NodeList. Then use .html() to change the html of all those elements.
$(".tblServices > tbody > .loc2 > .tcDayTimes").html("24 hours");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name ">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>Vanilla Javascript
You can also use the following method to do this in vanilla javascript. This basically uses .querySelectorAll() to select the values you wanted and store them into a NodeList (like an array). Then you can use .innerHTML to set the html of those elements.
var elements = document.querySelectorAll(".tblServices > tbody > .loc2 > .tcDayTimes");
elements.forEach(e =>
e.innerHTML = "24 hours";
);<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name ">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>You dont need the >. You can just have .tblServices tbody .loc2 .tcDayTimes, but it makes it look neater, and I would keep it there if I were you.
$(".tblServices > tbody > .loc2 > .tcDayTimes").html("24 hours");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name ">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>$(".tblServices > tbody > .loc2 > .tcDayTimes").html("24 hours");<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name ">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>var elements = document.querySelectorAll(".tblServices > tbody > .loc2 > .tcDayTimes");
elements.forEach(e =>
e.innerHTML = "24 hours";
);<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name ">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>var elements = document.querySelectorAll(".tblServices > tbody > .loc2 > .tcDayTimes");
elements.forEach(e =>
e.innerHTML = "24 hours";
);<table class="tblServices">
<tbody>
<tr class="name loc1">
<td class="name">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
<tr class="name loc2">
<td class="name ">loc1</td>
<td class="tcDayTimes">9-5</td>
<td class="tcDayTimes">9-5</td>
</tr>
</tbody>
</table>answered Mar 8 at 0:27
Aniket GAniket G
2,6661630
edited Mar 8 at 0:34
answered Mar 8 at 0:27
Aniket GAniket G
2,6661630
answered Mar 8 at 0:27
Aniket GAniket G
2,6661630
answered Mar 8 at 0:27
Aniket GAniket G
2,6661630
2,6661630
Thanks for your help, this is helpful
– IcantCode
Mar 8 at 1:06
add a comment |
Thanks for your help, this is helpful
– IcantCode
Mar 8 at 1:06
Thanks for your help, this is helpful
– IcantCode
Mar 8 at 1:06
Thanks for your help, this is helpful
– IcantCode
Mar 8 at 1:06
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55054939%2fjquery-change-table-cell-values-based-on-table-row-class%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I don't think that's how you use
.each()api.jquery.com/jquery.each– Aniket G
Mar 8 at 0:23