AJAX TABLE：如何通过 onclick in 表格上的按钮调用函数？ json

Posted 2023-05-07

【中文标题】AJAX TABLE：如何通过 onclick in 表格上的按钮调用函数？ json

【英文标题】：AJAX TABLE : how to call a function by onclick in button on the table ? json

【发布时间】：2020-05-18 12:26:20

【问题描述】：

我需要通过单击传递该位置的 id 作为参数的按钮来调用该函数，但我没有得到这种方式，我该如何使用这种语法来做到这一点？

    function populateTable(data)
    var table = document.getElementById('table-sector')
    for (var i = 0; i < data.length; i++)  
      var row = ` <tr><td>$data[i].nome</td>
                      <td>$data[i].sigla</td>
                      <td>$data[i].ramal</td>
                      <td>$data[i].email</td>
                      <td><button onclick="populateInfo($data[i]._id) "type="button" class="btn btn-primary" " data-toggle="modal"
                      data-target="#info">+</button></td>
                      </td>
                  </tr>`



      table.innerhtml+= row

    
  

function populateInfo(data)

       console.log(data)

  

【问题讨论】：

抱歉我没听懂

【参考方案1】：

尝试将onclick="populateInfo($data[i]._id) " 更改为：

onclick="populateInfo('` + data[i]._id + `')"

它为我打印了数据。 简单地说，您的 HTML 代码以反引号开始，因此在变量前后各放一个，后跟一个加号以连接字符串。

EDIT 正如你所说的问题没有解决，我建议简化测试以进行调试。尝试运行这个 sn-p。如果您的代码仍然无法正常工作，问题将出在您传递的数据输入。 如果是这种情况，请在浏览器中按 CTRL SHIFT E，转到控制台并尝试再次运行代码。浏览器会告诉你错误是什么以及在哪里。

<div id="table-sector"></div>
<div id="output"></div>

<script>
	
    function populateTable(data)
    var table = document.getElementById('table-sector');
    for (var i = 0; i < data.length; i++)  
      var row = ` <tr>
                      <td><button onclick="populateInfo('` + data[i] + `')  "type="button" class="btn btn-primary" " data-toggle="modal"
                      data-target="#info">+</button></td>
                      </td>
                  </tr>`



      table.innerHTML+= row;

    
  

	function populateInfo(data)
	
		   document.getElementById("output").innerHTML += data;
		   console.log(data)

	
	
	populateTable([1,2,3,4,5]);
</script>

【讨论】：

SyntaxError: unexpected token: identifier ... 我试过 onclick="populateInfo('` + data[i]_id `+ ')" 但它就像一个字符串

你好 Hugo，我已经详细说明了答案。希望这可以帮助。尝试运行 sn-p。另外，在我原来的答案中，我打错了一个点，也许这就是问题所在。祝你好运。

您好哈维尔，感谢您的回答......当我使用它时，我得到了像字符串这样的对象的值。比我以前的要好，但我需要这个位置上的对象来填充下一个表（例如：data.name、data._id、data.phone ...）。我尝试使用“var data = JSON.parse(data)”，但它没有用！你能告诉我我要做什么吗？顺便说一句，谢谢！

【参考方案2】：

问题在于使用字符串模板。当您使用字符串模板创建元素时，不可能将对象参数传递给事件处理程序，因为一切都是字符串。 （除非您将数据设为全局变量并将模板更改为 populateInfo(data[$i]._id)，这不是一个好习惯。）相反，您应该从字符串创建元素，将其具体化，然后附加事件处理程序，如下所示：

const data = [
  nome: "jhon",
  sigla: "doe",
  ramal: "ramal",
  email: "jhondoe@mail"
, 
  nome: "jhon1",
  sigla: "doe1",
  ramal: "ramal1",
  email: "jhondoe1@mail"
];

function populateTable(data) 
  var table = document.getElementById('table-sector')
  for (let i = 0; i < data.length; i++)  // using let instead of var is a must

    var row = ` <tr><td>$data[i].nome</td>
                      <td>$data[i].sigla</td>
                      <td>$data[i].ramal</td>
                      <td>$data[i].email</td>
                      <td><button  "type="button" class="btn btn-primary" " data-toggle="modal"
                      data-target="#info">+</button></td>
                      </td>
                  </tr>`
    const tr = createElement(row);
    const button = tr.querySelector("button");
    button.addEventListener("click", () => populateInfo(data[i]));
    table.appendChild(tr);

  


function populateInfo(data) 
  console.log(data);


function createElement(str) 
  var frag = document.createDocumentFragment();
  var elem = document.createElement('table');
  elem.innerHTML = str;

  while (elem.childNodes[0]) 
    frag.appendChild(elem.childNodes[0]);
  
  return frag;


populateTable(data);

<div>
  <table id="table-sector"></table>
</div>

createElement函数取自here