2015-07-11 118 views
-1

嗨我有思想解決這個對數的問題,它會很好,如果回答wana與angularjs javascript。得到桌子上的座標位置

我的問題是我有這個表:http://jsfiddle.net/zdtvy1h1/2/

我怎樣才能獲得當前座標發生的任何點擊後。

要解釋我的問題多:http://jsfiddle.net/zdtvy1h1/2/

這是關於我的表,我想什麼照片:如果我點擊14獲得協調它和值瓦納是數14 ENG20912:00-13:00也如果我點擊23號得到ENG214 14:00-15:00

我希望我給你提供了一個很好的問題來理解它。

通知 1:這照片這只是一個例子,我需要把一些別的東西

通知的數目爲2:我使用的數據庫,以從中獲取該值

example

<div class="panel panel-Technical text-center"> 
    <div class="panel-heading"> 
     <h3 class="panel-title"> 
      <i class="fa fa-institution"> </i> 
      Monday 
     </h3> 
    </div> 
</div> 
<div class="table-responsive text-center"> 
    <table class="table table-bordered text-center"> 
     <thead> 
      <tr class="text-center"> 
       <th>#</th> 
       <th>ENG201</th> 
       <th>ENG209</th> 
       <th>ENG214</th> 
       <th>EBN204</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <th scope="row">9:00-10:00</th> 
       <td>1</td> 
       <td>2</td> 
       <td>3</td> 
       <td>4</td> 
      </tr> 
      <tr> 
       <th scope="row">10:00-11:00</th> 
        <td>5</td> 
       <td>6</td> 
       <td>7</td> 
       <td>8</td> 
      </tr>     
      <tr> 
       <th scope="row">11:00-12:00 </th> 
       <td>9</td> 
       <td>10</td> 
       <td>11</td> 
       <td>12</td> 
      <tr> 
       <th scope="row">12:00-13:00</th> 
       <td>13</td> 
       <td>14</td> 
       <td>15</td> 
       <td>16</td> 
      </tr> 
      <tr> 
       <th scope="row">13:00-14:00</th> 
       <td>17</td> 
       <td>18</td> 
       <td>19</td> 
       <td>20</td> 
      </tr> 
      <tr> 
       <th scope="row">14:00-15:00</th> 
       <td>21</td> 
       <td>22</td> 
       <td>23</td> 
       <td>24</td> 
      </tr> 
      <tr> 
       <th class="aaa" scope="row" >15:00-16:00</th> 
       <td>25</td> 
       <td>26</td> 
       <td>27</td> 
       <td>28</td> 
      </tr> 
      <tr> 
       <th scope="row">16:00-17:00</th> 
       <td>29</td> 
       <td>30</td> 
       <td>31</td> 
       <td>32</td> 
      </tr> 
     </tbody> 
    </table> 
</div> 
+0

你能後的表的HTML,請?編輯:謝謝:) –

+0

你關心使用jQuery嗎? –

+0

好吧,我編輯它:) – badr

回答

2

使用這個!小提琴:http://jsfiddle.net/zdtvy1h1/3/

$(document).ready(function() { 
    $('td').click(function() { 
     var subject = $("tr.text-center th").get($(this).index()); 
     alert($(this).parent().find('th[scope="row"]').text()+" "+$(subject).text()); 
    }); 
}); 

,首先搜索通過索引數子和$(this).index()不是尋找屬於點擊TR var subject = ...什麼的孩子在頭的主題。接下來它發現thscope=row是在相同的tr.find('th[scope="row"]')

但它都非常緊湊:)

享受!

編輯:

這本質上是相同的腳本,但現在你有變量subjecttime,你可以傳給你的AngularJS

$(document).ready(function() { 
    $('td').click(function() { 
     var subject = $("tr.text-center th").get($(this).index()); 
     subject = $(subject).text(); 
     var time = $(this).parent().find('th[scope="row"]').text(); 

     alert(time+" "+subject); 
    }); 
}); 
+0

謝謝soo soo soo多:)那麼好,它與我合作 – badr

0

既然你是包括jQuery的使用index()

$('tbody td').click(function(){ 
    var rowIndex = $(this).parent().index(); 
    var colIndex = $(this).index();  
}); 

時不帶參數使用它返回的元素的索引中它的兄弟姐妹

2

如果您使用NG重複使用對象的集合(每個代表一行數據),可以使用佈局表格ng-click來觸發一個函數,傳遞表示該行的對象。

像這樣:

<tr ng-repeat="row in vm.tableData" ng-click=vm.selectRow(row);> 
    <td ....> 
    <td ....> 
    <td ....> 
</tr> 

在您的控制器限定vm.tableData作爲包含數據對象的數組。 vm.selectRow是一個函數,它接受一個數據對象並執行你需要做的任何事情。