Question

嗨，我有思考解决这个对数的问题，如果答案是使用angularjs javascript，那将会太好了。

我的问题是我有这张表：http://jsfiddle.net/zdtvy1h1/2/

如何在点击后获取当前坐标位置。

更多地解释我的问题：http://jsfiddle.net/zdtvy1h1/2/

这是关于我的桌子和我想要的照片：如果我点击14获取它的坐标，数字14的值wana是ENG209和12: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>

Answer 1

如果使用带有对象集合的ng-repeat来布局表格（每个对象代表一行数据），您可以使用ng-click触发一个函数，传入代表该行的对象。

这样的事情：

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

在您的控制器中，将vm.tableData定义为包含数据的对象数组。 vm.selectRow是一个接收数据对象并执行任何操作的函数。

Answer 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 = ...。接下来，它会找到th scope=row，tr与.find('th[scope="row"]')相同。

但它非常紧凑：）

享受！

修改

这基本上是相同的脚本，但现在您可以将变量subject和time传递给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); }); });

Answer 3

由于您使用index()

包含jQuery

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

如果没有参数使用它会返回其兄弟姐妹中元素的索引

得到桌子上的坐标位置

3 个答案: