HTML / JS - 获得点击的行

时间:2016-12-05 20:26:05

标签: javascript

我有一个表,每行都有一个超链接。单击链接时,将调用聚合数据的URL。我需要将点击的行/记录传递给此URL,但不确定如何获取单击的行。

这里有一些示例代码

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td><a href="#" onclick="aggregate()">Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td><a href="#" onclick="aggregate()">Eve</a></td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

<script>
    function aggregate(){
       //get clicked row, pass as parameter 
    };
</script>

我是否需要在表单中包装每一行并执行表单提交?

谢谢

4 个答案:

答案 0 :(得分:3)

this传递给函数以使用t.parentNode.parentNode获取行并对其执行某些操作

<td><a href="#" onclick="aggregate(this)">Jill</td>

<table style="width:100%">
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td><a href="#" onclick="aggregate(this)">Jill</td>
    <td>Smith</td> 
    <td>50</td>
  </tr>
  <tr>
    <td><a href="#" onclick="aggregate(this)">Eve</a></td>
    <td>Jackson</td> 
    <td>94</td>
  </tr>
</table>

<script>
    function aggregate(t){
       //get clicked row, pass as parameter 
      t.parentNode.parentNode.remove();
    };
</script>

答案 1 :(得分:1)

认为应该这样做。获取单击的元素,并遍历每个父项,直到标记名匹配,并将该匹配作为行var返回。

function aggregate(ev){
    var el = ev.currentTarget,
        row = (function() {
            while ((el = el.parentElement) && !el.tagName === 'tr');
            return el;
        })();

    // Do stuff with "row" ....
}

答案 2 :(得分:0)

在你的函数中传递事件并检查事件的目标。

http://api.jquery.com/event.target/

 <!DOCTYPE html>
<html lang="en">
  <head>
    <script type="text/javascript">
      function check_me(event) {
        event.preventDefault();
        alert("Hello World!")
      }
    </script>
  </head>
  <body>
    <a  onclick="check_me(event);">Click Me!</button>
  </body>
</html>

答案 3 :(得分:0)

您可以将ID添加到所有表格数据,并使用您的javascript程序访问<td>

<td id='record-1'><a htef="...?row=record-1">link</a><td>


<script>

function tty() {

  document.getElementById('record-1').
  // do what ever you want to do this your row
}