Passing values of table data to javascript function

Question

I want to pass values of table row td to the javascript function onclick on the tooltip.

Please find the fiddle http://jsfiddle.net/0w9yo8x6/16/

When i mouse over on image in the row, tooltip is shown and when clicked on test on the tooltip, javascript function is invoked.I want to pass the value of the row to the javascript function whenever we click on the tooltip.Please suggest.

We can achieve this using td onclick event , but my scenario is different.when clicked on the tooltip the row on which we clicked that corresponding value should pass to javascript function.

<table class="tooltipTable" style="position:absolute;">
    <tr><td> <span onclick="test()">test</span></td></tr>
</table>

<br/><br><br>
<table border="1">
<tr>
<td>Data1 <img class="one" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>

<tr>
<td>Data2 <img class="one" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>

<tr>
<td>Data3 <img class="one" src="http://ssl.gstatic.com/gb/images/b_5dae6e31.png" width="15" height="15" alt="" />
</td>
</tr>
</table>

So when you click the tooltip, you want a function executed? — gilbert-v
– gilbert-v, Commented Dec 4, 2014 at 20:56

gilbert-v · Accepted Answer · 2014-12-04 21:14:36Z

1

I'm guessing this is what you're talking about.

var display = function() { 
  var tooltip = [Create Tooltip Element];
  // Style tooltip etc.
  tooltip.addEventListener("click", function() {
    test(this.parentNode.innerHTML); // Test parent's inner HTML.
  }, false);
}

Hope this helps, let me know if I've misunderstood.

edited Dec 4, 2014 at 21:14

answered Dec 4, 2014 at 21:08

gilbert-v

1,3051 gold badge11 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user222 Over a year ago

I want to pass the value Data1/Data2/Data3 on which ever the row i click through tooltip to the javascript function test().Please see jsfiddle.net/0w9yo8x6/16 .When mouse over on the image in the table tooltip is displayed, and when clicked on test it invokes javascript function test(), i want the <td> value to be printed in javascript function test(). thanks. @user3412847

gilbert-v Over a year ago

Updated answer, would you like me to create a fiddle?

Gjohn · Accepted Answer · 2014-12-04 21:31:25Z

I believe this is what you are looking for I took the liberty of modifying your HTML a little bit. I added an id to the test and the display spans in your tooltip table. Here is the javascript tooltip

$(function() { 
var rowData;
$(document).tooltip({
    items: "img, [data-title]",
    content: function () {
        var element = $(this);
        if (element.is("img"))
         {
             rowdata = element.attr("data-title");
             $(document).off('click', '#test');
             $(document).on('click', '#test', function() {
                 test(rowdata);
             });

             $(document).off('click', '#display');
             $(document).on('click', '#display', function() {
                 display(rowdata);
             });
         }

        return $(this).prop('title');
    },
    show: null, 
    close: function (event, ui) {
        ui.tooltip.hover(

        function () {
            $(this).stop(true).fadeTo(1000, 1);
        },

        function () {
            $(this).stop(true).fadeOut(200, function () {
                $(this).remove();
            })
        });
    },
    position: {
        my: "left",
        at: "right"
    }
});
});

There are improvements you can make to the javascript but the essential idea is captured in the logic.

Collectives™ on Stack Overflow

Passing values of table data to javascript function

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related