www.webdeveloper.com
Results 1 to 2 of 2

Thread: Programming table onClick Event

  1. #1
    Join Date
    Apr 2007
    Posts
    3

    Programming table onClick Event

    how to program a table with hyperlink, when click should display information or content on another table without redrawing the entire screen

  2. #2
    Join Date
    Mar 2006
    Posts
    591
    Ok here is an example (from www.w3schools.com) using an XML File as datasource.
    But the idea is the same. You click a record in a table and another table is filled with its details.
    From this example you can get an idea how to do the javascript.
    Code:
    <script type="text/javascript">
    function testclick(field)
    {
    var row=field.rowIndex
    xmldso_list.recordset.absoluteposition=row
    td_title.innerHTML=xmldso_list.recordset("TITLE")
    td_artist.innerHTML=xmldso_list.recordset("ARTIST")
    td_year.innerHTML=xmldso_list.recordset("YEAR")
    td_country.innerHTML=xmldso_list.recordset("COUNTRY")
    td_company.innerHTML=xmldso_list.recordset("COMPANY")
    td_price.innerHTML=xmldso_list.recordset("PRICE")
    }
    </script>
    
    <xml id="xmldso_list" src="cd_catalog.xml"></xml>
    
    <p><b>Click on one of the CDs in the list:</b></p>
    
    <table datasrc="#xmldso_list" border="1">
    <thead>
    <tr align="left">
    <th>Title</th>
    <th>Artist</th>
    <th>Country</th>
    <th>Company</th>
    <th>Price</th>
    <th>Year</th>
    </tr>
    </thead>
    <tr align="left" onclick="testclick(this)">
    <td><div datafld="TITLE" /></td>
    <td><div datafld="ARTIST" /></td>
    <td><div datafld="COUNTRY" /></td>
    <td><div datafld="COMPANY" /></td>
    <td align="right"><div datafld="PRICE" /></td>
    <td><div datafld="YEAR" /></td>
    </tr>
    </table>
    <br><br>
    <table border="1" bgcolor="yellow">
    <tr align="left"><th>Title:  </th><td id="td_title"></td></tr>
    <tr align="left"><th>Artist: </th><td id="td_artist"></td></tr>
    <tr align="left"><th>Year:   </th><td id="td_year"></td></tr>
    <tr align="left"><th>Country:</th><td id="td_country"></td></tr>
    <tr align="left"><th>Company:</th><td id="td_company"></td></tr>
    <tr align="left"><th>Price:  </th><td id="td_price"></td></tr>
    </table>
    The XML File can be found at http://www.w3schools.com/xml/cd_catalog.xml

    Hope this helps

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles