获取使用Javascript单击的行中HTML单元格的值

Posted 2023-02-21

【中文标题】获取使用Javascript单击的行中HTML单元格的值

【英文标题】：Get Value of HTML cells in row clicked with Javascript

【发布时间】：2014-07-12 15:26:33

【问题描述】：

我正在根据 parse.com 中存储的数据填充一个 html 表。所以表格是动态填充的，我包括用户添加、删除和编辑行的编辑选项。我已经设法将删除并添加到表中，但是，我的问题是我需要在单击编辑按钮的行的单元格中获取数据... 所以我想要做的是当用户点击编辑按钮时，我将打开一个对话框，其中的表格行填充了他们点击的行中的数据，在这个对话框中他们可以更改数据并保存。我附上了一个示例表的屏幕截图。所以如果用户点击第二行的编辑按钮，我需要获取每个单元格中的数据来填充对话框。

这是我尝试过的：

    var par = $(this).parent().parent(); //table row
    var tdUuid = par.children("td:nth-child(1)");
    var tdProx = par.children("td:nth-child(2)");
    var tdOffer = par.children("td:nth-child(3)");

    alert(tdUuid.html()); //for testing

这是未定义的。

我也试过了：

var value = $(this).children().get(1).text();

我尝试在警报中显示此内容，但警报未显示，所以我认为这是错误的...

如果有人可以帮助我，我将不胜感激。我对 html/javascript 非常陌生，而且我在黑暗中摸索！

编辑 这是我要求的html：

<div id="EditDialog" title="Edit iBeacon">
            <p class ="editInfo">
                Please edit fields and click save
            </p>
            <table id ="editingTable" class ="beaconTable ">
                <thead>
                <tr>
                    <th>UUID</th>
                    <th>Proximity</th>
                    <th>Offer</th>
                </tr>
                 </thead>
                 <tbody></tbody>
            </table>
            <button id ="saveButton" class ="btnSave">Save</button> <button id ="cancelButton" class ="btnCan">Cancel</button> 

        </div>

        <div id= "tableContainerHolder">
            <div id = "tableContainer">
                <button id ="buttonAdd">Add iBeacon</button>
                <table id ="iBeaconTable" class ="beaconTable " >
                    <thead>
                        <tr>
                            <th>UUID</th>
                            <th>Proximity</th>
                            <th>Offer</th>   
                            <th>Editing Options</th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>
        </div>
        <script>
            $(function() 
                $("#EditDialog").dialog(
                    autoOpen: false
                );
            );
        </script>

进一步编辑

这是我填充表格的方式：

 $('#iBeaconTable').append('<tr><td id = "uuid">' + object.get('uuid') + '</td><td = "proxId">' + object.get('proximity') + '</td><td = "offerId">' + object.get('offer_content') + '</td><td><Button id = "btnEdit" onclick = "openDialog()">Edit</Button><Button id = "btnDelete" onclick = "Delete()">Delete</Button></td></tr>');

所以我每次都在每一行中添加按钮。

其他编辑

抱歉省略代码

function openDialog() 

    var par = $(this).parent().parent(); //table row
    var tdUuid = par.children("td:nth-child(1)");
    var tdProx = par.children("td:nth-child(2)");
    var tdOffer = par.children("td:nth-child(3)");

     $("#EditDialog").dialog("open");

    $('#editingTable').append('<tr><td id = "uuid">' +tdUuid.innerHTML+ '</td><td = "proxId">' + tdProx.html()+ '</td><td = "offerId">' +  tdOffer.html());

openDialog() 中的代码是我最初发布的。

【问题讨论】：

你也可以分享你的html吗？

所以this 是编辑按钮？？？提供更多代码上下文！

不确定这是否会解决这个问题，但var par = $(this).closest('tr'); 更简洁一些（并且面向未来 - 您可以将按钮嵌套在另一个 div 中，等等）.. .

没有html很难说，反正如果你使用jQuery最后一行应该是alert($(tdUuid).html());

您的 HTML 无效，ID 在文档上下文中必须是唯一的...

【参考方案1】：

只有在动态添加数据后才会选择表中的值。获取 td 值

var tr = $(this).closest('tr')
var tdUuid = $(tr).find('td').eq(0).text();
var tdProx = $(tr).find('td').eq(1).text();
var tdOffer = $(tr).find('td').eq(2).text();

希望这应该可行。

【讨论】：

感谢您的回复，不幸的是这不起作用...不是我自己标记了您，感谢您的帮助

你现在能检查一下吗.. 我更新了答案。我假设 td 中没有元素，例如

some value 。

一年后。只是想说这个答案确实对我有用。