嘗試獲取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>