2014-12-06 89 views
4

我有一個問題,我解決不了多少問題。通過點擊編輯客戶按鈕我不想從CustomerNr單元中獲取值。我的問題是,我不知道如何通過單擊按鈕來獲取行索引,然後將其傳遞給我的函數,以便我可以明確地獲取該行上的CustomerNr,我按下了該按鈕。你可以看看我的jsfiddle鏈接,並注意,這是我第一次使用Javascript/Jquery編碼。我願意提供智能解決方案。如何通過單擊按鈕獲取單元格值

在這裏你可以看到我有多遠。我設法從特定的單元格中選擇值。

function GetCellValues() { 
    var Row = document.getElementById("somerow"); 
    var Cells = Row.getElementsByTagName("td"); 
    alert(Cells[0].innerText); 

} 

我設法通過點擊一個TD獲得行索引,但我想通過按下一個按鈕來得到它。

function myMethod(obj) { 
    alert(obj.parentNode.rowIndex); // parentNode is also used 
} 

我不想以某種方式結合這兩個函數,就像在C#中。 (我是一個C#程序員)

function GetCellValues(e) { 
    //Something here 
    alert(Cells[0].Rows[e] innerText); 

} 

http://jsfiddle.net/6srjc7qL/

+1

可以觸發傳遞給處理程序,然後使用parentNode達到td和tr:http://jsfiddle.net/6srjc7qL/3/ – dandavis 2014-12-06 23:53:58

+1

@dandavis是的按鈕位於​​之間的單元格 – 2014-12-06 23:55:08

回答

3

我已經改變了的ID是你的按鈕上課,因爲你不能命名具有相同ID的兩個元素,然後我通過元素循環... Working fiddle

您應該避免使用內聯函數和perefer巧妙地像這樣做,這可能安全,你大量的時間,並保持它更好的可維護性:

的Javascript:

var a = document.getElementsByClassName('otherButton'); 

for (var i = 0; i<a.length;i++) { 
    a[i].addEventListener('click',function(){ 

    var b = this.parentNode.parentNode.cells[0].textContent; 
    alert(b); 


    }); 


} 

HTML:

<table id="somerow"> 
     <tr> 
      <th>CustomerNr</th> 
      <th>Name</th> 
      <th>Contact</th> 
     </tr> 
     <tr > 
      <td>1</td> 
      <td>Cigarettes Inc</td> 
      <td>Rambo</td> 
      <td> 
       <button class="otherButton" >Edit Customer</button> 
      </td> 
     </tr> 
     <tr > 
      <td >22</td> 
      <td>Razor</td> 
      <td>David</td> 
      <td> 
       <button class="otherButton">Edit Customer</button> 
      </td> 
     </tr> 
     <tr> 
      <td>3</td> 
      <td>H&M</td> 
      <td>Samuel Adams</td> 
      <td> 
       <button class="otherButton" >Edit Customer</button> 
      </td> 
     </tr> 

} 
2

按鈕是作爲TR裏面,所以你需要去2個節點組成的TD內。試試這個:

​​
+0

這是行不通的,如果不修改代碼最好想要傳遞一個元素,現在,obj將是未定義的。看到我的小提琴正確工作的例子 – dandavis 2014-12-07 00:01:31

1

HTML

<html> 

    <head> 
     <style> 
      table, td { 
       border: 1px solid black; 
      } 
      .selected { 
       background-color: yellow; 
      } 
     </style> 
    </head> 

    <body> 
     <center> 
      <table id="somerow"> 
       <tr> 
        <th>CustomerNr</th> 
        <th>Name</th> 
        <th>Contact</th> 
       </tr> 
       <tr> 
        <td>1</td> 
        <td>Cigarettes Inc</td> 
        <td>Rambo</td> 
        <td> 
         <button id="otherButton" onclick="GetCellValues()">Edit Customer</button> 
        </td> 
       </tr> 
       <tr> 
        <td onclick="myMethod(this);">22</td> 
        <td>Razor</td> 
        <td>David</td> 
        <td> 
         <button id="otherButton" onclick="GetCellValues()">Edit Customer</button> 
        </td> 
       </tr> 
       <tr> 
        <td>3</td> 
        <td>H&M</td> 
        <td>Samuel Adams</td> 
        <td> 
         <button id="otherButton" onclick="GetCellValues()">Edit Customer</button> 
        </td> 
       </tr> 
     </center> 
    </body> 

</html> 

JS

function GetCellValues(elm) { 
    alert(elm.parentNode.parentNode.cells[0].textContent); 
} 

function myMethod(obj) { 
    alert(obj.parentNode.rowIndex); 
} 
相關問題