CODEWITHSUNDEEP
javascriptjqueryhtmljsfiddle
user222
user222

Reputation: 597

Passing values of table data to javascript function

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>

Upvotes: 0

Views: 2103

Answers (2)

Gjohn
Gjohn

Reputation: 1281

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.

Upvotes: 0

gilbert-v
gilbert-v

Reputation: 1305

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.

Upvotes: 1

Related Questions