使用javascript单击按钮时如何发送行数据？

在本文中，我们将学习如何使用 JavaScript 在单击按钮时发送和访问行数据。

下面的示例包含一个简单的引导表。每个表格行 () 都有一个 id 和一个提交按钮。单击与行对应的按钮时，将使用警报显示该行的数据。

方法：

我们使用“event.target.parentNode.parentNode.id”获取按钮被点击的行的行ID。这里，“event.targent”返回触发事件（单击按钮）的元素，在本例中为 。 “event.target.parentNode”指的是的父节点，即。 “event.target.parentNode.parentNode()”指的是的父节点，即。因此，var rowId 存储了单击其按钮的行的 id。

现在我们要访问这个特定行中的数据。所有数据元素都有 class=”row-data”。 “document.getElementById(rowId).querySelectorAll(“.row-data”) ”返回一个由所有元素组成的数组，其中所有元素的 id 由 rowId 给出。该数组存储在 var “data” 变量中。我们可以使用 data[0].innerHTML (name) 等来访问数据。

解决方案：

    
        
    
  
    
        
        
            
                
                    
                    
                    
                    
                
  
                
                    
                    
                    
                    
                
  
                
                    
                    
                    
                    
                
  
                
                    
                    
                    
                    
                
            
        #NameAgeSubmit1Sara232John303Naman20
  
        
            function show() {
                var rowId = 
                    event.target.parentNode.parentNode.id;
              //this gives id of tr whose button was clicked
                var data = 
 document.getElementById(rowId).querySelectorAll(".row-data"); 
              /*returns array of all elements with 
              "row-data" class within the row with given id*/
  
                var name = data[0].innerHTML;
                var age = data[1].innerHTML;
  
                alert("Name: " + name + "\nAge: " + age);
            }
        
    

点击按钮前的输出：

单击第三个按钮后的输出：