获取用Java单击的行中HTML单元格的值 [英] Get Value of HTML cells in row clicked with Javascript

问题描述

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

I am populating a html table based on data stored in parse.com. So the table is dynamically populated, I am including editing options for the user to add, delete and edit a row. I have managed to incorporate delete and add to the table however, my problem is I need to get the data in the cells of the row on which I click the edit button... So what I want to do is when the user clicks on the edit button I'll open a dialog with the table row in it populated with the data in the row they have clicked, in this dialog they can change data and save. I've attached a screenshot of a sample table. So if the user clicks on the edit button on the second row, I need to obtain the data in each cell to populate the dialog.

这是我尝试过的:

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

我试图在警报中显示此消息，但没有显示警报，所以我认为这是错误的方式...

I've tried to display this in an alert but the alert doesn't display so I'm assuming this is way wrong...

如果有人可以帮助我，我将不胜感激.我是html/javascript的新手，在黑暗中感觉不知所措！

If anyone could help me I'd greatly appreciate it. I'm VERY new to html/javascript and I'm feeling my way around in the dark!

编辑 这是我要求的html:

EDIT Here is my html as requested:

<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>

进一步编辑

这是我填充表格的方式:

Here is how I populate my table:

 $('#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>');

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

So I add the buttons each time in each row.

其他修改

省略代码的道歉

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()中的代码是我最初发布的.

The code in the openDialog() is what I had originally posted.

推荐答案

表中的值仅在动态添加数据后才选择.获取td值

values in table are selected only after adding data dynamically. To get td values

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

希望这应该可行.

这篇关于获取用Java单击的行中HTML单元格的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！