如何获取通过innerHTML创建的按钮的name属性值

嘿，我懂你现在的困扰——通过innerHTML创建的按钮，想在DeletePlat函数里拿到它的name属性对吧？其实问题出在你之前没精准定位到按钮元素本身，咱们一步步来搞定它：

最省心的方案：直接在点击时传递name参数 #

既然你在创建按钮的时候已经有title变量（也就是按钮的name值），那完全可以在onclick事件里直接把这个值传进函数，省去后续查找的麻烦：

修改你生成列的代码：

colonne1.innerHTML = '<td align="center"><input id="' + button_id_is_id_plat + '" type="button" name="' + title + '" value="Supprimer" onclick="DeletePlat(' + button_id_is_id_plat + ', \'' + title + '\')"></td>';

注意这里给id和name属性加了双引号，避免如果title或button_id_is_id_plat里有特殊字符时，HTML结构解析出错。

然后在DeletePlat函数里直接接收这个参数：

function DeletePlat(buttonId, buttonName) {
  // 这里直接使用buttonName就是按钮的name属性值啦
  console.log('按钮name:', buttonName);
  // 你的其他处理逻辑...
}

更灵活的方案：传递按钮元素本身 #

如果不想提前传参，也可以把按钮自身作为参数传给函数，这样能直接获取它的所有属性：

修改生成列的代码：

colonne1.innerHTML = '<td align="center"><input id="' + button_id_is_id_plat + '" type="button" name="' + title + '" value="Supprimer" onclick="DeletePlat(this)"></td>';

然后在函数里直接操作按钮元素：

function DeletePlat(btn) {
  const buttonName = btn.name;
  console.log('按钮name:', buttonName);
  // 还能直接拿到按钮的id、value等其他属性
  console.log('按钮id:', btn.id);
}

这种方法更灵活，不管按钮有什么属性，都能直接通过btn对象获取。

针对你遍历表格的方案：精准找到按钮元素 #

如果你还是想用遍历表格的方式获取，那问题出在你之前操作的是单元格（cellule2），而单元格本身没有name属性，你需要从单元格里找到按钮元素：

var my_array = document.getElementById("plat_action");
var longueur = my_array.rows.length;
var i = 0; // 记得初始化i哦，你之前的代码里没看到初始化
while(i < longueur) {
  var cellule = my_array.rows[i].cells[0];
  var cellule2 = my_array.rows[i].cells[1];
  
  // 从单元格里找到按钮元素
  const button = cellule2.querySelector('input[type="button"]');
  if (button) {
    const buttonName = button.name;
    // 接下来执行你的处理逻辑，比如对比cellule的文本
    if (cellule.innerText.toString() === buttonName) { // 这里应该是对比按钮name和cellule的文本吧？你之前的条件可能有问题
      // 处理逻辑...
    }
  }
  
  i++; // 别忘了循环递增哦
}

小提醒 #

创建动态HTML时，尽量用引号包裹属性值（比如name="xxx"），避免因为变量里的空格、特殊字符导致HTML结构混乱；另外如果title里包含单引号，记得转义，或者用模板字符串（ES6+）来拼接HTML会更清晰：

colonne1.innerHTML = `<td align="center">
  <input id="${button_id_is_id_plat}" type="button" name="${title}" value="Supprimer" onclick="DeletePlat(this)">
</td>`;

模板字符串能让代码可读性更高，也不用手动处理引号转义的问题。

内容的提问来源于stack exchange，提问作者ta7foun