Question

我在表格的每一行中都有一组按钮。当我单击某个按钮时，我想知道被单击按钮所在的行号。

我每次在现有表中添加一行，每行中都有一个按钮。我试图将每个按钮放入数组中，所以当我单击其中的一个按钮时，我将从数组中获得索引号。没成功

var btns[];
var btn=document.createElement("BUTTON");
    btn.innerHTML="Edit";
    btns.push(btn);
    cell1.appendChild(btns[btn_num]);
    btn_num=btn_num+1;

我希望获得行号，因此我可以编辑表中的特定行。

Answer 1

一种可能的方法是：对于每个添加的按钮，您可以添加HTML属性 id 等于表格行。除此之外，您还可以将HTML属性 onclick =“ onClickButton（this.id）” 添加到创建的按钮中。因此，当单击按钮时，您可以使用以下脚本获取id值：

<script>
    function onClickButton(e) {
        console.log(e);
    }
</script>

Answer 2

您不需要在内存 var btns 中存储按钮。我看到了几种实用的方法来做到这一点：

使用班级名称创建按钮

 
<button class="btn-edit" onclick="BtnEditClick(this)">Edit</button>
<button class="btn-edit" onclick="BtnEditClick(this)">Edit</button>
<button class="btn-edit" onclick="BtnEditClick(this)">Edit</button>

  <script>
    function BtnEditClick(clickedElement){
      var btns = document.getElementsByClassName("btn-edit")
      var result = -1
      for(var i=0;i<btns.length; i++) {
        if(clickedElement == btns[i]){
          result = i
        }
      }

      if(result != -1)
        alert("found " + result)
      else
        alert("not found")
    }
  </script>

使用html5中的data-attr引用值

<button class="btn-edit" data-index="0" onclick="BtnEditClick(this)">Edit</button>
  <button class="btn-edit" data-index="1" onclick="BtnEditClick(this)">Edit</button>
  <button class="btn-edit" data-index="2" onclick="BtnEditClick(this)">Edit</button>

  <script>
    function BtnEditClick(clickedElement){
      var index = clickedElement.getAttribute("data-index")
      alert("click index: " + index)
    }
  </script>

将索引直接传递给函数

<button class="btn-edit" data-index="0" onclick="BtnEditClick(0)">Edit</button>
  <button class="btn-edit" data-index="1" onclick="BtnEditClick(1)">Edit</button>
  <button class="btn-edit" data-index="2" onclick="BtnEditClick(2)">Edit</button>

  <script>
    function BtnEditClick(index){
      alert("clicked on item:" + index)
    }
  </script>

是的，还有其他几种方法。大部分时间，我都会使用第二种方法来获取元素（被点击的按钮对象），然后从data-attr中读取所需的数据（您可以定义所需的任何data-attr，例如data-index，数据ID）。这非常方便，您会发现它很有用，因为有时您可能需要的数据不仅仅是列表中元素的索引。希望对您有帮助

我想知道我在表格中按下的按钮的值

2 个答案: