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

Question

在下面的代码中，我的目标是在单击catDesc按钮时检索view。详细说来，当单击view标题下的First Description按钮时，我想得到First Description。单击view标题下的Second Description按钮时，我想获取Second Description。我打算在以下注释掉的代码中使用这些描述值（First Description，第二描述etc) in the jQuery UI dialog's 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");
            }
        }
    });

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

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 here)所示：

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

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

但是我不断得到undefined的{​​{1}}

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>