Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New Coder
    Join Date
    May 2012
    Posts
    47
    Thanks
    3
    Thanked 0 Times in 0 Posts

    How to get the current row clicked in javascript

    Hi ,

    I have a html table with some rows. Each row has a 'remove row' button in the end as <td>.
    Now I want that corresponding row to be deleted if the 'remove row' button is clicked.
    Let us consider the table name is "mytable"

    The code is like :
    Code:
    <td> <input type = 'button' value = 'remove row' onclick = remRow() name = remove_i > </td>
    
    function remRow()
    {
    
      document.getElementById("mytable").deleteRow(3);
    
    }
    Right now, I passed hard-coded value '3' to deleteRow in order to delete the third row. But how can I dynamically get the row number as and when a row is clicked and delete it.

    Please help. Thanks.

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Give the button an id (cannot start with a number, has to be a letter or underscore).

    onclick = "remRow(this.id);"

    function remRow(id){
    .. add code to isolate the number..
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,930
    Thanks
    56
    Thanked 552 Times in 549 Posts
    Code:
    <td><input type = 'button' value = 'remove row' onclick = "remRow(this)" name = remove_i ></td>
    
    <script type="text/javascript">
    function remRow(cell){
      document.getElementById("mytable").deleteRow(cell.parentNode.parentNode.rowIndex);
    }
    </script>

  • #4
    Senior Coder Logic Ali's Avatar
    Join Date
    Sep 2010
    Location
    London
    Posts
    1,028
    Thanks
    0
    Thanked 207 Times in 202 Posts
    Give your table the ID 'myTable', then put this below it:
    Code:
    <script type='text/javascript'>
    
    ( function( id )
    {
      var elem = document.getElementById( id ),
          el = elem.addEventListener;
          
      elem[ el ? 'addEventListener' : 'attachEvent' ]( el ? 'click' : 'onclick', f, false );
     
      function f( evt )
      {
        var srcElem = evt.target || evt.srcElement;  
      
        if( srcElem.type && srcElem.type == 'button' && srcElem.value.toLowerCase() == 'remove row' )
        {  
          while( srcElem && srcElem.nodeName != 'TR' )
            srcElem = srcElem.parentNode;
      
          if( srcElem )
            srcElem.parentNode.removeChild( srcElem );  
        }
      }
    })( 'myTable' );
      
    </script>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •