尝试获取jQuery UI对话框标题的动态值

Question

在下面的代码中，我的目标是在单击view按钮时检索catDesc 。 详细说来，当单击“ First Description标题下的view按钮时，我想获得“ First Description 。 单击“ Second Description标题下的view按钮时，我想获得“ Second Description 。 我计划在以下注释掉的代码etc) in the jQuery UI dialog's title`值中使用这些描述值（ First Description ，Second Description etc) in the jQuery UI dialog's ：

$('#wrapper').dialog({
        autoOpen: false,
        title: 'catDesc of clicked view button should be here !',
        maxHeight: 500,
        width: 1000,
        height: 400,
        modal: true,
        buttons: {
            "Print": function() {
                $(this).dialog("close");
            },
            Download: function() {
                $(this).dialog("close");
            }
        }
    });

为此，我应该如何修改以下代码行：

header += '<tr height="30"><td width="33%" align="left"><u><b>' + data[i].catDesc + '</b></u><br></td></tr><tr height="5px"></tr>';

这样，当单击标题内的查看按钮时，我可以获得标题的值？ 谢谢

 var data_ = { "webservice_status": { "status": "SUCCESS", "message": "" }, "tableData": [{ "type_id": 553, "catDesc": "First Description", "myDataDesc": "First unordered list element of first description", "toolTip": "First unordered list element of first description", "isViewable": "N" }, { "type_id": 554, "catDesc": "First Description", "myDataDesc": "Second unordered list element of first description", "toolTip": "Second unordered list element of first description", "isViewable": "N" }, { "type_id": 220, "catDesc": "Second Description", "myDataDesc": "First unordered list element of second description", "toolTip": "First unordered list element of second description", "isViewable": "Y" }, { "type_id": 201, "catDesc": "Second Description", "myDataDesc": "Second unordered list element of second description", "toolTip": "Second unordered list element of second description", "isViewable": "Y" }, { "type_id": 202, "catDesc": "Second Description", "myDataDesc": "3rd unordered list element of second description", "toolTip": "3rd unordered list element of second description", "isViewable": "Y" }, { "type_id": 255, "catDesc": "Second Description", "myDataDesc": "4th unordered list element of second description", "toolTip": "4th unordered list element of second description", "isViewable": "Y" }, { "type_id": 250, "catDesc": "Second Description", "myDataDesc": "5th unordered list element of second description", "toolTip": "5th unordered list element of second description", "isViewable": "Y" }, { "type_id": 300, "catDesc": "Third Description", "myDataDesc": "1st unordered list element of third description", "toolTip": "1st unordered list element of third description", "isViewable": "Y" }, { "type_id": 1, "catDesc": "Fourth Description", "myDataDesc": "1st unordered list element of 4th description", "toolTip": "1st unordered list element of 4th description", "isViewable": "Y" } ] } var json = data_.tableData; const data = json.reduce((result, current) => { const entry = result.find(({ catDesc }) => current.catDesc === catDesc) const { catDesc, myDataDesc, toolTip, isViewable } = current if (entry) { entry.myDataDesc.push(myDataDesc); entry.toolTip.push(toolTip); entry.isViewable.push(isViewable); } else { result.push({ catDesc, myDataDesc: [myDataDesc], toolTip: [toolTip], isViewable: [isViewable] }) } return result }, []) console.log(data); var outputtable = ""; for (var i = 0; i < data.length; i++) { var header = ""; header += '<tr height="30"><td width="33%" align="left"><u><b>' + data[i].catDesc + '</b></u><br></td></tr><tr height="5px"></tr>'; var contents = ""; for (var j = 0; j < data[i].myDataDesc.length; j++) { contents += '<tr><td title="' + data[i].toolTip[j] + '" width="33%" style="padding-left:40px;"><ul style="list-style-type: disc"><li>' + data[i].myDataDesc[j] + ' </li>'; contents += '<ul></td><td width="5%" align="left"><img src=""></td><td><input id="toHide" class=" hideClass" value="View" type="button"></td></tr>'; } outputtable += header + contents } $('#populateTable').append(outputtable); for (var a = 0; a < data.length; a++) { for (var b = 0; b < data[a].isViewable.length; b++) { console.log(data[a].isViewable[b]); if (data[a].isViewable[b] == "N") { $("#toHide").hide(); } } } $('.hideClass').bind('click', function() { alert("button clicked"); /*$('#wrapper').dialog({ autoOpen: false, title: 'catDesc of clicked view button should be here !', maxHeight: 500, width: 1000, height: 400, modal: true, buttons: { "Print": function() { $(this).dialog("close"); }, Download: function() { $(this).dialog("close"); } } }); $('#wrapper').dialog('open');*/ }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody id="populateTable"> </tbody> </table> <div id="wrapper"> <p>Some txt goes here</p> </div> 

我的失败尝试：

我尝试通过添加div标签并分配一个id来做到这一点，如下所示：

header += '<tr height="30"><td width="33%" align="left"><div headerId = "' + data[i].catDesc + '"><u><b>' + data[i].catDesc + '</b></u></div><br></td></tr><tr height="5px"></tr>';

并尝试在代码中像这样检索它（如JSFiddle所示） ：

var title = ($(this).attr('headerId'));

                     console.log("title test");
                     console.log(title);

但是我一直对console.log(title) undefined

Answer 1

向按钮添加一个title属性，即data[i].catDesc并在您的函数中使用该属性：

 var data_ = { "webservice_status": { "status": "SUCCESS", "message": "" }, "tableData": [{ "type_id": 553, "catDesc": "First Description", "myDataDesc": "First unordered list element of first description", "toolTip": "First unordered list element of first description", "isViewable": "N" }, { "type_id": 554, "catDesc": "First Description", "myDataDesc": "Second unordered list element of first description", "toolTip": "Second unordered list element of first description", "isViewable": "N" }, { "type_id": 220, "catDesc": "Second Description", "myDataDesc": "First unordered list element of second description", "toolTip": "First unordered list element of second description", "isViewable": "Y" }, { "type_id": 201, "catDesc": "Second Description", "myDataDesc": "Second unordered list element of second description", "toolTip": "Second unordered list element of second description", "isViewable": "Y" }, { "type_id": 202, "catDesc": "Second Description", "myDataDesc": "3rd unordered list element of second description", "toolTip": "3rd unordered list element of second description", "isViewable": "Y" }, { "type_id": 255, "catDesc": "Second Description", "myDataDesc": "4th unordered list element of second description", "toolTip": "4th unordered list element of second description", "isViewable": "Y" }, { "type_id": 250, "catDesc": "Second Description", "myDataDesc": "5th unordered list element of second description", "toolTip": "5th unordered list element of second description", "isViewable": "Y" }, { "type_id": 300, "catDesc": "Third Description", "myDataDesc": "1st unordered list element of third description", "toolTip": "1st unordered list element of third description", "isViewable": "Y" }, { "type_id": 1, "catDesc": "Fourth Description", "myDataDesc": "1st unordered list element of 4th description", "toolTip": "1st unordered list element of 4th description", "isViewable": "Y" } ] } var json = data_.tableData; const data = json.reduce((result, current) => { const entry = result.find(({ catDesc }) => current.catDesc === catDesc) const { catDesc, myDataDesc, toolTip, isViewable } = current if (entry) { entry.myDataDesc.push(myDataDesc); entry.toolTip.push(toolTip); entry.isViewable.push(isViewable); } else { result.push({ catDesc, myDataDesc: [myDataDesc], toolTip: [toolTip], isViewable: [isViewable] }) } return result }, []) console.log(data); var outputtable = ""; for (var i = 0; i < data.length; i++) { var header = ""; header += '<tr height="30"><td width="33%" align="left"><u><b>' + data[i].catDesc + '</b></u><br></td></tr><tr height="5px"></tr>'; var contents = ""; for (var j = 0; j < data[i].myDataDesc.length; j++) { contents += '<tr><td title="' + data[i].toolTip[j] + '" width="33%" style="padding-left:40px;"><ul style="list-style-type: disc"><li>' + data[i].myDataDesc[j] + ' </li>'; contents += '<ul></td><td width="5%" align="left"><img src=""></td><td><input id="toHide" class=" hideClass" value="View" title="' + data[i].catDesc + '" type="button"></td></tr>'; } outputtable += header + contents } $('#populateTable').append(outputtable); for (var a = 0; a < data.length; a++) { for (var b = 0; b < data[a].isViewable.length; b++) { console.log(data[a].isViewable[b]); if (data[a].isViewable[b] == "N") { $("#toHide").hide(); } } } $('.hideClass').bind('click', function() { alert(this.title); /*$('#wrapper').dialog({ autoOpen: false, title: 'catDesc of clicked view button should be here !', maxHeight: 500, width: 1000, height: 400, modal: true, buttons: { "Print": function() { $(this).dialog("close"); }, Download: function() { $(this).dialog("close"); } } }); $('#wrapper').dialog('open');*/ }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tbody id="populateTable"> </tbody> </table> <div id="wrapper"> <p>Some txt goes here</p> </div>