将 Object 传递给 onclick 方法 html 的有效方法-解网

问：

我最近发现了一个问题，即不允许我将对象参数传递给方法。onclick()

我做了一些研究，这似乎是一个受欢迎的问题。我已经读过这个： javascript：将一个对象作为参数传递给字符串中的 onclick 函数，我试图在传递给 an 之前将对象字符串化，但这似乎不起作用。onclick()

我的代码：

        var object_info= {
            TypeID:11000,
            TypeValue:5,
            ValueID:12103,
            ValueValue:15,
            CorrectionID:11020,
            CorrectionValue:0,
            LabelStr:Analog_input_name[11000],
            TypeStr:InputATypeStr[5],
            DivId:"Test123",
        };

        Append_html_block(object_info);

功能：Append_html_block

function Append_html_block(object) {
    var generated_html = document.getElementById("custom_DIV");
    var stringifiedObj = JSON.stringify(object);

    generated_html .innerHTML += `
    <table class="sensor-values-table">
        <tr>
        <td class="top-item" style="width:90%;">${object.LabelStr}</td>
            <td>
                <button style="border:none;background-color:inherit;" onclick="Expand_selection(${stringifiedObj})">
       
                </button>
            </td>
        </tr>

    </table>
<br>
`;
}

逻辑很简单：我创建了一个对象，我将其传递给函数。在这个函数中，我有一个按钮。如果单击此按钮，我想执行特定操作，为了执行这些操作，我必须知道有关对象的所有信息，因此我需要传递对象变量。Append_html_block

我没有设法找到一个清晰而简单的解决方案来将 ojbect 变量传递给 .也许有人可以建议一种简洁明了的方法？提前致谢！onclick()

JavaScript HTML 对象

function Append_html_block(object) { // try appendHtmlBlock instead (Camel Case
    var generated_html = document.getElementById("custom_DIV");
    var encodedObj = encodeURIComponent(JSON.stringify(object));

    generated_html .innerHTML += `
    <table class="sensor-values-table">
        <tr>
        <td class="top-item" style="width:90%;">${object.LabelStr}</td>
            <td>
                <button style="border:none;background-color:inherit;" onclick="Expand_selection(${encodedObj})">
       
                </button>
            </td>
        </tr>

    </table>
<br>
`;
}

然后在您的函数中（可能是）：Expand_selectionexpandedSelection

function Expand_selection(encodedObject) {
  var object = JSON.parse(decodeURIComponent(encodedObject))
  console.log(object) // should work now
  // Do other stuff.
}

希望这能奏效，如果它确实:)👍请告诉我

答案参考：@João Pimentel Ferreira 的这个答案

document.addEventListener(`click`, handle);
const object_info = {
  TypeID: 11000,
  TypeValue: 5,
  ValueID: 12103,
  ValueValue: 15,
  CorrectionID: 11020,
  CorrectionValue: 0,
  LabelStr: `EXAMPLE-Analog_input_name[11000]`,
  TypeStr: `EXAMPLE-InputATypeStr[5]`,
  DivId: 'Test123',
};

Append_html_block(object_info);

function handle(evt) {
  if (evt.target.dataset.expand) {
    evt.target.closest(`td`).querySelector(`pre`).classList.toggle(`hidden`);
  }
}

function Append_html_block(object) {
  var stringifiedObj = JSON.stringify(object, null, 2);
  document.querySelector(`#generated`).insertAdjacentHTML(`beforeend`,
    `<table class="sensor-values-table">
      <tr>
        <td>${object.LabelStr}</td>
        <td>
          <button data-expand="1">Expand/Hide</button>
          <pre class="hidden">${stringifiedObj}</pre>
        </td>
      </tr>
   </table>`);
}

.hidden {
  display: none;
}

td {
  vertical-align: top;
}

<div id="generated"></div>

const objctInfo = [{
    TypeID: 11000,
    TypeValue: 5,
    ValueID: 12103,
    ValueValue: 15,
    CorrectionID: 11020,
    CorrectionValue: 0,
    LabelStr: 1,
    TypeStr: 5,
    DivId: "Test123",
  },
  {
    TypeID: 11001,
    TypeValue: 5,
    ValueID: 12103,
    ValueValue: 15,
    CorrectionID: 11020,
    CorrectionValue: 0,
    LabelStr: 2,
    TypeStr: 5,
    DivId: "Test124",
  },
];
objctInfo.forEach(Append_html_block);

function Append_html_block(obj) { 
    var generated_html = document.getElementById("custom_DIV");

    generated_html .innerHTML += `
    <table class="sensor-values-table" border=1>
        <tr>
        <td class="top-item" style="width:90%;">${obj.LabelStr}</td>
            <td>
                <button style="border:none;background-color:inherit;" onclick="Expand_selection(${obj.TypeID})">
        click me
                </button>
            </td>
        </tr>

    </table>
<br>
`;
}

function Expand_selection(id){
  const obj = objctInfo.find(obj => obj.TypeID === parseInt(id));
  console.log(obj);
}

<div id="custom_DIV"></div>

将 Object 传递给 onclick 方法 html 的有效方法

Efficient way to pass an Object to onclick method html

评论

评论

评论

评论