onclick Scrollbottom inside "table"

Asked

Viewed 34 times

0

When clicking contact the form expands, however the user has to scroll the scroll to view it. I need to make sure that when I click automatically contact it is sent to the end of "table".

<table cellspacing="0" id="table1" cellpadding="0" border="0" width="100%">
  <tr>
    <td>
       <div style="width:100%; height:330px; overflow-x: hidden;">
         <table id="table2" cellspacing="0" cellpadding="0" border="0" width="100%" >
           <tr>
             <td>

<a role="button" onclick="ScrollToBottom()" class="btn btn-default btn-sm" style="display: block; width: 100%; border-radius: 0px;"  data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Contatar</a>
<div class="collapse" id="collapseExample">
  <form ....>
</div>
             </td>
           </tr>
         </table>  
       </div>
    </td>
  </tr>
</table>
javascript

  • to the end of the table? I don’t understand, your code is incomplete and you can’t understand exactly what happens and what should be

1 answer

0

Script to expand

    function toggleTable() {
    var lTable = document.getElementById("collapseTable");
    lTable.style.display = (lTable.style.display == "table") ? "none" : "table";
}

Html

The use of anchors allows the insertion of markings in certain points of a document, allowing the direct displacement to these points, through the creation of references.

The anchor creation feature is widely used as document index, making it easier to move the reader directly to a desired point.

A link can at the same time reference and be a tag. This practice is used on overly long pages allowing the user to move from the beginning to the end of the document or vice versa. As value of this attribute we must inform the name of the marking, preceded by the #sign, if this marking belongs to the same page of the reference. href="#Bottom"

Destination: The marking shall be the subject of a reference.

An anchor tag is defined using the attribute (name) that will receive as value the name by which this tag will be referenced. <a name="Bottom"></a>

By clicking on the link that refers to this marking, a jump will be made to this point of the page where this marking was inserted.

So put this mark in the exact spot you want

<table cellspacing="0" id="table1" cellpadding="0" border="0" width="100%">
  <tr>
    <td>
       <div style="width:100%; height:330px; overflow-x: hidden;">
         <table id="table2" cellspacing="0" cellpadding="0" border="0" width="100%" >
           <tr>
             <td>

<a role="button" onclick="toggleTable();" class="btn btn-default btn-sm" style="display: block; width: 100%; border-radius: 0px;"  data-toggle="collapse" href="#Bottom" aria-expanded="false" aria-controls="collapseExample">Contatar</a>
<div class="collapse" id="collapseExample">
<a name="Bottom"></a>
<table id="collapseTable" border="0" style="display:none">
<tr>
<td>
  <form>

  </form>
</td>
</tr>
</table>
</div>
             </td>
           </tr>
         </table>  
       </div>
    </td>
  </tr>
</table>

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.