如何通过JQuery获取HTML表格单元格值?

时间:2014-06-12 19:29:47

标签: javascript jquery html

您好我希望从HTML Tables Cell中获取值,然后在用户单击该单元格时将其显示到JQuery对话框窗口中如何实现此目的?这是我目前的代码

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

4 个答案:

答案 0 :(得分:2)

您尚未提供HTML代码,但这可能会对您有所帮助。

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

单击 #myTable 中的元素 td ,其中带有id #dialog 的元素将由单元格的内部HTML填充,并显示为jQueryUI对话框。

JSFiddle

答案 1 :(得分:1)

这只是一个例子,但也许它对你有所帮助:

<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
    });
});

答案 2 :(得分:1)

例如:

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

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>

演示:http://jsfiddle.net/R378q/

答案 3 :(得分:1)

<强> 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,
  });  
});
});

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