javascript - Jquery 数据表隐藏列但访问其值

Question

我想隐藏数据表的第一列，即 IID 但我想访问它的值以更新数据库中的数据。这是代码

var details = [];
            for (var m = 0; m < retrievedParsedValue.Table3.length; m++) {

                var buttonColumn = "<b><div style='cursor: pointer;' onClick=" + 'getDataForSMPS(this);' + ">Action</div></b>";

                details.push([retrievedParsedValue.Table3[m]['IID'], retrievedParsedValue.Table3[m]['RJ_FACILITY_ID'], retrievedParsedValue.Table3[m]['SMPS_AVAILABLE'], retrievedParsedValue.Table3[m]['NO_OF_SMPS_ONSITE'], retrievedParsedValue.Table3[m]['SMPS_MAKE'], retrievedParsedValue.Table3[m]['SMPS_CAPACITY'], retrievedParsedValue.Table3[m]['CONTROLLER_MODEL'], retrievedParsedValue.Table3[m]['RECT_MODULE_MODEL'], retrievedParsedValue.Table3[m]['HEALTHY_RECTIFIER_COUNT'], retrievedParsedValue.Table3[m]['BACKPLANE_RECTIFIER_SLOT'], retrievedParsedValue.Table3[m]['RECT_CAPACITY'], retrievedParsedValue.Table3[m]['SMPS_STATUS'], retrievedParsedValue.Table3[m]['NO_OF_FAULTY_MODULES'], retrievedParsedValue.Table3[m]['DC_LOAD'], retrievedParsedValue.Table3[m]['SMPS_OTHER_REMARKS'], buttonColumn]);
            }

            $('#grdSMPSRCOM').DataTable({
                destroy: true,
                data: details,
                "scrollX": true,
                columns: [
                    { title: "IID" },
                    { title: "RJ Facility ID" },
                    { title: "SMPS Available" },
                    { title: "NO of SMPS OnSite" },
                    { title: "SMPS Make" },
                    { title: "SMPS Capacity" },
                    { title: "Controller Model" },
                    { title: "Rect Module Model" },
                    { title: "Healthy Rectifier Count" },
                    { title: "Backplane Rectifier Slot" },
                    { title: "Rect Capacity" },
                    { title: "SMPS Status" },
                    { title: "No Of Faulty Modules" },
                    { title: "DC Load" },
                    { title: "SMPS Other Remarks" },
                    { title: "Validate" }
                ],
                "bDestroy": true
            });

如何隐藏它但访问它的值。

Answer 1

如何简单地将它的值添加到属性中，在这种情况下，例如buttonColumn。

        for (var m = 0; m < retrievedParsedValue.Table3.length; m++) {

            var buttonColumn = "<b><div data-iid='" + [retrievedParsedValue.Table3[m]['IID'] + "' style='cursor: pointer;' onClick=" + 'getDataForSMPS(this);' + ">Action</div></b>";

            details.push(retrievedParsedValue.Table3[m]['RJ_FACILITY_ID'], retrievedParsedValue.Table3[m]['SMPS_AVAILABLE'], retrievedParsedValue.Table3[m]['NO_OF_SMPS_ONSITE'], retrievedParsedValue.Table3[m]['SMPS_MAKE'], retrievedParsedValue.Table3[m]['SMPS_CAPACITY'], retrievedParsedValue.Table3[m]['CONTROLLER_MODEL'], retrievedParsedValue.Table3[m]['RECT_MODULE_MODEL'], retrievedParsedValue.Table3[m]['HEALTHY_RECTIFIER_COUNT'], retrievedParsedValue.Table3[m]['BACKPLANE_RECTIFIER_SLOT'], retrievedParsedValue.Table3[m]['RECT_CAPACITY'], retrievedParsedValue.Table3[m]['SMPS_STATUS'], retrievedParsedValue.Table3[m]['NO_OF_FAULTY_MODULES'], retrievedParsedValue.Table3[m]['DC_LOAD'], retrievedParsedValue.Table3[m]['SMPS_OTHER_REMARKS'], buttonColumn]);
        }

然后像这样访问它

//using [data-iid] attribute through parent
console.log(document.querySelector('.parent [data-iid]').dataset.iid);

//using click
function getDataForSMPS(el) {
  alert(el.dataset.iid);
}

<div class='parent'>
  <b><div data-iid='246' style='cursor: pointer;' onClick="getDataForSMPS(this);">Action (click me)</div></b>
</div>

---

如果您仍然需要初始列，这可能是一个替代方案。

        for (var m = 0; m < retrievedParsedValue.Table3.length; m++) {

            var iid = "<div data-iid='" + [retrievedParsedValue.Table3[m]['IID'] + "'></div>";

            var buttonColumn = "<b><div style='cursor: pointer;' onClick=" + 'getDataForSMPS(this);' + ">Action</div></b>";

            details.push(iid, retrievedParsedValue.Table3[m]['RJ_FACILITY_ID'], retrievedParsedValue.Table3[m]['SMPS_AVAILABLE'], retrievedParsedValue.Table3[m]['NO_OF_SMPS_ONSITE'], retrievedParsedValue.Table3[m]['SMPS_MAKE'], retrievedParsedValue.Table3[m]['SMPS_CAPACITY'], retrievedParsedValue.Table3[m]['CONTROLLER_MODEL'], retrievedParsedValue.Table3[m]['RECT_MODULE_MODEL'], retrievedParsedValue.Table3[m]['HEALTHY_RECTIFIER_COUNT'], retrievedParsedValue.Table3[m]['BACKPLANE_RECTIFIER_SLOT'], retrievedParsedValue.Table3[m]['RECT_CAPACITY'], retrievedParsedValue.Table3[m]['SMPS_STATUS'], retrievedParsedValue.Table3[m]['NO_OF_FAULTY_MODULES'], retrievedParsedValue.Table3[m]['DC_LOAD'], retrievedParsedValue.Table3[m]['SMPS_OTHER_REMARKS'], buttonColumn]);
        }