"Trading logs" page

1. Add "myClick" event for each table row (I am lazy as it should be added just for some cells ... you will see)

<tr id="tr_1" name="tr_1" class="wrap displayTransfer " onclick="myClick(this)">

2. Add one more column for each row

<tr id="tr_1" name="tr_1" class="wrap" onclick="myClick(this)">
    <td>No one</td>
    <td>none </td>
    <td>133875</td>
    <td>Rainbow candy</td>
    <td>29704</td>
        <td onmouseover="Tip('<b><font color=#772222>Item Transfer Log</font></b><br />created by No one on 15/02/17<br>', WIDTH, 340, FADEIN, '300', DELAY, 10 ,BGCOLOR,'#FFCC00', FONTFACE, 'Arial, Helvetica, sans-serif', FONTSIZE, '8pt',JUMPHORZ,'false',JUMPVERT,'true',OPACITY,80)" onmouseout="UnTip()" bgcolor="#FCE074" align="center">0</td>
        <td>15/02/17 09:04:07</td>
  <!-- this is the content from the Tip() function ... from here -->
  <td><div style="max-height: 200px;width: 400px; overflow: auto; display: none"><b><font color="#772222">Item Transfer Log</font></b><br>created by No one on 15/02/17<br></div></td>
  <!-- this is the content from the Tip() function ... untill here-->
</tr>

3. Add script at the end of page to support the feature

<script type="text/javascript">function changeClass(obj){if ( obj.className.indexOf(' displayTransfer ')>=0 ){obj.className = obj.className.replace( ' displayTransfer ', '' );}else obj.className += ' displayTransfer ';}function myClick(str) {var TRs=str.getElementsByTagName('td');var aObj = TRs[TRs.length-1].getElementsByTagName('div')[0]; aObj.style.display = (aObj.style.display == '') ? 'none' : ''; aObj.scrollTop = aObj.scrollHeight; changeClass(str);}</script>