如何通过 JQuery 获取 HTML 表格单元格值？ [复制]答案

【问题标题】：How to get HTML Table Cell Value through JQuery? [duplicate]如何通过 JQuery 获取 HTML 表格单元格值？ [复制]
【发布时间】：2014-08-03 06:09:13
【问题描述】：

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

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

【问题讨论】：

请提供 HTML

标签： javascript jquery html

【解决方案1】：

您尚未提供 HTML 代码，但也许这对您有所帮助。

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

在 #myTable 元素中单击元素 td 后，ID 为 #dialog 的元素将被单元格的内部 HTML 填充并像 jQueryUI 对话框一样显示。

JSFiddle

【讨论】：

很酷，感谢您的解决方案！我怎么可能用从表中获得的值添加一个句子？例如“我刚刚在”+ var（等，如您的示例单元格 11）
很简单。您只需在对话框中编辑内部 html。有 JSFiddle 编辑：jsfiddle.net/7ZCZM/11

【解决方案2】：

这只是一个例子，但也许对你有一点帮助：

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

【讨论】：

非常感谢您的帮助！

【解决方案3】：

例如这样：

$(".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/

【讨论】：

【解决方案4】：

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/

【讨论】：