JS – Table cell function onclick

@Reikan_HeiwaOct 17.2016

Hi, its my first post here, I am not great in JS (I am better in html and css)
I want to create one effect:
Let me explain it.
I have random table and when I click on one of cells, I want to get some kind of comment below table and normally that cell become highlighted.
I can draw image of you don’t understand what I mean (image with step 1, step 2 , etc…)
I hope thats its based on JS

to post a comment

JavaScript

12 Comments(s) _↴

@SempervivumOct 17.2016 — #Try this:

Add a data attribute to your table cells containing the comment:
[code=html]<td dat-comment="your comment for this cell>[/code]Create a container where the comment is displayed in and give it an ID:
[code=html]<span id="tablecomment"></span>[/code]Then place the following script below the table and that container:

[CODE]      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script>
 $("table td").on("click", function() {
 var comment = $(this).attr("data-comment");
 $("#tablecomment").text(comment);
 });
 </script>[/CODE]

This is only suitable for comments being relativelay short. For longer comments one would have to use a different solution.

@SempervivumOct 17.2016 — #Try this:

Add a data attribute to your table cells containing the comment:
[code=html]<td data-comment="your comment for this cell">[/code]Create a container where the comment is displayed in and give it an ID:
[code=html]<span id="tablecomment"></span>[/code]Then place the following script below the table and that container:

[CODE]      <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 <script>
 $("table td").on("click", function() {
 var comment = $(this).attr("data-comment");
 $("#tablecomment").text(comment);
 });
 </script>[/CODE]

This is only suitable for comments being relativelay short. For longer comments one would have to use a different solution.

@Reikan_HeiwaauthorOct 17.2016 — #I tried but nothing displays

I added those codes on right places but nothing happends.

Maybe I have to do something in css ?

@SempervivumOct 17.2016 — #I didn't test it yet. Is your page online? Then post the URL. This doesn't need any modifications in the CSS.

@Reikan_HeiwaauthorOct 17.2016 — #Its not online, but in few days it should be online (Had plan to make this work and then to edit some small details and to launch it after that).

@SempervivumOct 17.2016 — #In the meantime I tested it and this works fine:

[CODE]        <table>
 <tr>
 <td data-comment="your comment 1">Cell 1</td>
 <td data-comment="your comment 2">Cell 2</td>
 </tr>
 </table>
 <span id="tablecomment"></span>
 <script>
 $("table td").on("click", function() {
 var comment = $(this).attr("data-comment");
 $("#tablecomment").text(comment);
 });
 </script>[/CODE]

@SempervivumOct 17.2016 — #Sorry, my first posting #2 was faulty. I tried to edit it but created a new posting #3 instead. This is correct:[code=html]<td data-comment="your comment for this cell">[/code]

@SempervivumOct 17.2016 — #that cell become highlighted.[/QUOTE]Quite easy to add this:

[CODE]        $("table td").on("click", function() {
 var comment = $(this).attr("data-comment");
 $("#tablecomment").text(comment);
 $(this).css("background-color", "lightblue");
 });
 [/CODE]

@Reikan_HeiwaauthorOct 17.2016 — #It works now, only have one question left ?

When I click at one cell it highlights as it should but when I click somewhere around highlight wont dissapear, even If I click on another cell then I have two cells highlighted.

I hope you understand what I mean

@SempervivumOct 17.2016 — #Can be fixed easily. This removes the highlighting when a different cell is clicked:

[CODE]            $("table td").on("click", function() {
 var comment = $(this).attr("data-comment");
 $("#tablecomment").text(comment);
 $("table td").css("background-color", "transparent");
 $(this).css("background-color", "lightblue");
 });
 [/CODE]

Removing the highlighting by clicking elsewhere is possible. Will look into.

@SempervivumOct 17.2016 — #This removes the highlighting and the comment when clicking elsewhere:

[CODE]            $("body").on("click", function (event) {
 $("table td").css("background-color", "transparent");
 $("#tablecomment").text("");
 var tg = $(event.target);
 if (tg.prop("tagName") == "TD") {
 var comment = tg.attr("data-comment");
 $("#tablecomment").text(comment);
 tg.css("background-color", "lightblue");
 }
 });
 [/CODE]

Better use a class to identify a table cell

@Reikan_HeiwaauthorOct 18.2016 — #Thank you a lot ?

It wokrs perfectly (normally I edited it a bit normally)

Also in #JavaScript _↴

content of document.write to be printed in the same page displaying the calender problem need some help with pictures...

Success!

Help @Reikan_Heiwa spread the word by sharing this article on Twitter...

Tweet This

JS – Table cell function onclick

12 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

JS – Table cell function onclick

12 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

12 Comments(s) _↴

Also in #JavaScript _↴