How to get HTML Table Cell Value through JQuery?

Question

Hi I'm looking to get the value from a HTML Tables Cell and then display it into a JQuery Dialog Window when the user has clicked in that cell How can I achieve this ? Here's my code currently

<script>
$(function() {
    $( ".dialog" ).click(function(){   
        $('#dialog').dialog({
            resizable:true,
            modal:true,
        });
    });
</script>

please provide the HTML – Brian Stephens Jun 12 '14 at 19:33 — Brian Stephens, Jun 12 '14 at 19:33

score 2 · Accepted Answer · answered Jun 12 '14 at 19:48

2

You have not provided HTML code, but maybe this help you.

    $(function() {
        $("#myTable td").click(function() {
            $('#dialog').html($(this).html()).dialog({
                resizable:true,
                modal:true,
            });
        }); 
    });

After clicking on element td in #myTable element with id #dialog will be filled by cell's inner HTML and showed like jQueryUI dialog.

JSFiddle

answered Jun 12 '14 at 19:48

lubosmato

51
5

Cool thank you for the solution ! How could I possibly add a sentence with the value that has been gained from the table ? e.g "I was just in" + var(etc as in your example cell 11) – Jun 12 '14 at 19:50
It is simple. You just edit inner html in dialog. There is JSFiddle edit: http://jsfiddle.net/7ZCZM/11/ – lubosmato Jun 12 '14 at 20:48

score 1 · Answer 2 · answered Jun 12 '14 at 19:40

This is just an example, but maybe it helps you a little:

<table class="mytable">
    <tr>
        <td>row 1, cell 1</td>
        <td>row 1, cell 2</td>
    </tr>
    <tr>
        <td>row 2, cell 1</td>
        <td>row 2, cell 2</td>
    </tr>
</table>
<div class="dialog">this is the dialog</div>


$('td', '.mytable').on('click', function(){
    var tdval = $(this).text();

    $('.dialog').text(tdval).dialog({
        resizable: true,
        modal: true,
        autoOpen: true
    });
});

awesome thank you for the help that has done the trick ! – Jun 12 '14 at 19:50 — , Jun 12 '14 at 19:50

score 1 · Answer 3 · answered Jun 12 '14 at 19:44

For example like this:

$(".dialog").click(function () {
    var $cell = $(this);
    $('#dialog').dialog({
        resizable: true,
        modal: true,
        open: function () {
            $(this).find('.ui-dialog-content').html($cell.html());
        }
    });
});

Where html:

<div id="dialog" class="ui-dialog">
    <div class="ui-dialog-titlebar">
        <div class="ui-dialog-title"></div>
        <div class="ui-dialog-titlebar-close"></div>
    </div>
    <div class="ui-dialog-content"></div>
</div>

Demo: http://jsfiddle.net/R378q/

score 1 · Answer 4 · answered Jun 12 '14 at 19:44

HTML

<div id="dialog" title="Basic dialog"></div>

<table border="1">
 <tr><td>1</td><td>10</td></tr>
 <tr><td>2</td><td>11</td></tr>
 <tr><td>3</td><td>12</td></tr>
</table>

JS:

$(function() {
$('td').click(function(){
  var valor = $(this).html();
  $("#dialog").html(valor);   
  $('#dialog').dialog({
        resizable:true,
        modal:true,
  });  
});
});

How to get HTML Table Cell Value through JQuery?

4 Answers4

Demo: http://jsfiddle.net/R378q/

Jsfiddle: http://jsfiddle.net/Mr36T/1/