www.webdeveloper.com
Results 1 to 12 of 12

Thread: How to Get the column value in a table using Javascript

  1. #1
    Join Date
    Feb 2012
    Posts
    6

    How to Get the column value in a table using Javascript

    Hello everyone, sorry for noob question, new in javascript. Can you help me for my project or any idea for this. Here's the situation.
    In my webpage, I have drop down list of countries and below of is a table with data. Once the user select certain country, the table below will filter according to the selected country on the drop down list. Help appreciated. THanks a lot guyz.Looking forward for any help.

  2. #2
    Join Date
    Nov 2010
    Posts
    1,031
    give the td's ids that match the values of the dropdown list, then onchange, loop trough the tds and hide or show them depending on if they match the selected value

    or if that doesn't work, maybe show us a little of your page...

  3. #3
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    373
    Do you know how to read the selected item on a dropdown list?

  4. #4
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    373
    This is an example of a drop down, it reads pay periods per year depending on the dropdown description. Note ".options[sub].value" and ".selectedIndex".
    Code:
      var NoPeriods = document.tax2012.Period.options[document.tax2012.Period.selectedIndex].value;
    ...............
    <select name="Period">
              <option selected="SELECTED" value="1">Annual</option>
              <option value="2">Semi Annual</option>
              <option value="4">Quarterly</option>
              <option value="6">BiMonthly</option>
              <option value="12">Monthly</option>
              <option value="24">SemiMonthly</option>
              <option value="13">Every 4 weeks</option>
              <option value="26">BiWeekly</option>
              <option value="52">Weekly</option>
              <option value="260">Daily/Misc</option>
    </select>
    It's from tax12.html.

  5. #5
    Join Date
    Feb 2012
    Posts
    6
    Hello everyone, Thanks for your response. I really appreciated that. By the way this is my project looks, it has no javascript yet.

    http://tipinternetmarketing.info/

    I hope you can help me ..Thanks a lot. Godbless

  6. #6
    Join Date
    Feb 2012
    Posts
    6
    i posted the link of my project, since im a new member, i needs modes approval. Im waiting to appear it.

  7. #7
    Join Date
    Feb 2012
    Posts
    6
    Hello Sir, can you please post your suggested JS code, and i will study it. THANKS alot

  8. #8
    Join Date
    Sep 2007
    Posts
    315
    Code:
      
      
    <html>
    <head>
    <script type="text/javascript">
    // http://www.w3schools.com/jsref/prop_style_display.asp
    // http://www.w3schools.com/cssref/pr_class_display.asp
    // http://www.w3schools.com/jsref/prop_select_selectedindex.asp
    // http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_option_index
    
    function showhide() {
    var x=document.getElementById("mySelect").selectedIndex;
    var y=document.getElementById("mySelect").options;
    var val = y[x].value;
    alert(val);
    
    // http://www.w3schools.com/jsref/jsref_split.asp
    
    var A = val.split('');
    alert(A);
    var t = document.getElementById('mytable');
    for(var k =0; k < t.rows.length; k++) { 
    t.rows[k].style.display="none";
    }
    
    alert('table is not shown');
    
    for(var i = 0; i< A.length; i++) {
    var n = A[i];
    t.rows[n].style.display="block";
    }
    }
    </script>
    </head>
    <body>
    <select id="mySelect">
    <option value="02">istanbul</option>
    <option value="13">izmir</option>
    </select>
    
    <input type="button" value="filter" onclick="showhide()">
    
    <table id="mytable">
    <tr><td>...</td><td>istanbul</td></tr>
    <tr><td>...</td><td>izmir</td></tr>
    <tr><td>...</td><td>istanbul</td></tr>
    <tr><td>...</td><td>izmir</td></tr>
    </table>
    </body>
    </html>
    Last edited by Ayşe; 02-29-2012 at 12:29 PM.
    The Time Through Ages
    1. By the Time,
    2. Verily Man is in loss,
    3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

  9. #9
    Join Date
    Feb 2012
    Posts
    6
    hello sir, thank you for you response. I really appreciate it. By the way, just want to know what s the purpose of split(), i can't get it. Sorry for noob question. Thanks a lot

  10. #10
    Join Date
    Feb 2012
    Posts
    6
    when i select USA country, it will display all rows which has USA value in the Country column. Is this possible?..

  11. #11
    Join Date
    Sep 2007
    Posts
    315
    Your table has 7 rows.
    I wrote rows number in <option value="here"
    red numbers is rows number
    JAPAN is in 3. rows
    USA is in 1. and 2. rows
    <option value="12">USA</option>
    <option value="3">JAPAN</option>
    <option value="4">London</option>
    <option value="5">Canada</option>
    <option value="6">France</option>

    <option value="12">USA</option>
    Code:
      
    <script type="text/javascript">
    
    var s = '12';
    var A = s.split('');
    alert(A); 1,2
    alert(A[0]); // 1
    alert(A[1]); // 2
    
    </script>
    I display 1. and 2. rows
    Code:
      
    for(var i = 0; i< A.length; i++) {
    var n = A[i];
    t.rows[n].style.display="table-row";
    }
    http://www.w3schools.com/cssref/pr_class_display.asp
    table-row


    I try this. It is working in firefox 4.0b9 and Konqueror 4.5.5
    Try this:
    Code:
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Javascript Sort By Country Name</title>
    <script type="text/javascript">
    
    // http://www.w3schools.com/jsref/prop_style_display.asp
    // http://www.w3schools.com/cssref/pr_class_display.asp
    // http://www.w3schools.com/jsref/prop_select_selectedindex.asp
    // http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_option_index
    // http://www.w3schools.com/jsref/jsref_split.asp
    // http://www.webdeveloper.com/forum/showthread.php?t=257375
    
    function showhide() {
    var x=document.getElementById("mySelect").selectedIndex;
    var y=document.getElementById("mySelect").options;
    var val = y[x].value;
    //alert(val);
    
    var A = val.split('');
    //alert(A);
    var t = document.getElementById('tblId');
    for(var k =1; k < t.rows.length; k++) { 
    t.rows[k].style.display="none";
    }
    
    // table-row
    
    for(var i = 0; i< A.length; i++) {
    var n = A[i];
    t.rows[n].style.display="table-row";
    }
    }
    </script>
    
    <link rel="stylesheet" href="http://tipinternetmarketing.info/style.css">
    </head>
    <body>
    <br />
    <form>
    	<select id="mySelect">
    		<option value="12">USA</option>
    		<option value="3">JAPAN</option>
    		<option value="4">London</option>
    		<option value="5">Canada</option>
    		<option value="6">France</option>
    	</select>
    
    	<input type="button" onclick="showhide()" value="Filter">
    
    </form>
    <br />
    <table id="tblId">
    <tr>
    	<td class="tblHdr">No</td>
    	<td class="tblHdr">Ticker</td>
    	<td class="tblHdr">Company</td>
    	<td class="tblHdr">Sector</td>
    	<td class="tblHdr">Industry</td>
    	<td class="tblHdr">Exchange</td>
    	<td class="tblHdr">Country</td>
    	<td class="tblHdr">Data</td>
    	<td class="tblHdr">Available Dates</td>
    </tr>
    <tr>
    	<td>1</td>
    	<td>A</td>
    	<td>Agilent Technologies Inc.</td>
    	<td name="sctr"> Technology</td>
    	<td>Scientific & Technical Instruments</td>
    	<td>NYSE</td>
    	<td name="cntry">USA</td>
    	<td><a href = "market_list/stocks/A_5.zip">5Min</a></td>
    	<td>04/08/1997-02/24/2012</td> 
    </tr>
    <tr>
    	<td>2</td>
    	<td>AA</td>
    	<td>Alcoa Inc.</td>
    	<td>Basic Materials</td>
    	<td>Aluminum</td><td>NYSE</td>
    	<td name="cntry">USA</td><td><a href = "market_list/stocks/AA_5.zip">5Min</a></td>
    	<td>04/08/1997-02/24/2012</td>
    </tr>
    <tr>
    	<td>3</td>
    	<td>AAPL</td>
    	<td>Apple, Inc.</td>
    	<td>Technology</td>
    	<td>Personal Computers</td>
    	<td>NASD</td>
    	<td name="cntry">JAPAN</td>
    	<td><a href = "market_list/stocks/AAPL_5.zip">5Min</a></td>
    	<td>01/14/1997-02/24/2012</td>
    </tr>
    <tr>
    	<td>4</td>
    	<td>ABC</td>
    	<td>Amerisourcebergen Corp.</td>
    	<td>Services</td>
    	<td>Drugs Wholesale</td>
    	<td >NYSE</td>
    	<td name="cntry">London</td>
    	<td><a href = "market_list/stocks/ABC_5.zip">5Min</a></td>
    	<td>08/30/2001-02/24/2012</td>
    </tr>
    <tr>
    	<td>5</td>
    	<td>ABT</td>
    	<td>Abbott Laboratories</td>
    	<td>Healthcare</td>
    	<td>Drug Manufacturers - Major</td>
    	<td>NYSE</td>
    	<td name="cntry">Canada</td>
    	<td><a href = "market_list/stocks/ABT_5.zip">5Min</a></td>
    	<td>04/09/1997-02/24/2012</td>
    </tr>
    <tr>
    	<td>6</td>
    	<td>ABC</td>
    	<td>WEW Laboratories</td>
    	<td>Goldsmith</td>
    	<td>Drug Manufacturers - Major</td>
    	<td>NYSE</td>
    	<td name="cntry">France</td>
    	<td><a href = "market_list/stocks/ABT_5.zip">5Min</a></td>
    	<td>04/09/1997-02/24/2012</td>
    </tr>
    </table>
    </body>
    </html>
    I try this. it is working.
    Code:
      
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Javascript Sort By Country Name</title>
    
    <style type="text/css">
    table { width: 800px; }
    </style>
    
    <script type="text/javascript">
    
    // http://www.w3schools.com/jsref/prop_style_display.asp
    // http://www.w3schools.com/cssref/pr_class_display.asp
    // http://www.w3schools.com/jsref/prop_select_selectedindex.asp
    // http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_option_index
    // http://www.w3schools.com/jsref/jsref_split.asp
    // http://www.webdeveloper.com/forum/showthread.php?t=257375
    
    function showhide() {
    var x=document.getElementById("mySelect").selectedIndex;
    var y=document.getElementById("mySelect").options;
    var val = y[x].value;
    //alert(val);
    
    var t = document.getElementById('tblId');
    for(var k =1; k < t.rows.length; k++) { 
    if( t.rows[k].cells[6].innerHTML == val) { t.rows[k].style.display="table-row"; }
    else { t.rows[k].style.display="none"; }
    }
    //alert(document.body.innerHTML);
    }
    </script>
    
    <link rel="stylesheet" href="http://tipinternetmarketing.info/style.css">
    </head>
    <body>
    <br />
    <form>
    	<select id="mySelect">
    		<option value="USA">USA</option>
    		<option value="JAPAN">JAPAN</option>
    		<option value="London">London</option>
    		<option value="Canada">Canada</option>
    		<option value="France">France</option>
    	</select>
    
    	<input type="button" onclick="showhide()" value="Filter">
    
    </form>
    <br />
    <table id="tblId">
    <tr>
    	<td class="tblHdr">No</td>
    	<td class="tblHdr">Ticker</td>
    	<td class="tblHdr">Company</td>
    	<td class="tblHdr">Sector</td>
    	<td class="tblHdr">Industry</td>
    	<td class="tblHdr">Exchange</td>
    	<td class="tblHdr">Country</td>
    	<td class="tblHdr">Data</td>
    	<td class="tblHdr">Available Dates</td>
    </tr>
    <tr>
    	<td>1</td>
    	<td>A</td>
    	<td>Agilent Technologies Inc.</td>
    	<td name="sctr"> Technology</td>
    	<td>Scientific & Technical Instruments</td>
    	<td>NYSE</td>
    	<td name="cntry">USA</td>
    	<td><a href = "market_list/stocks/A_5.zip">5Min</a></td>
    	<td>04/08/1997-02/24/2012</td> 
    </tr>
    <tr>
    	<td>2</td>
    	<td>AA</td>
    	<td>Alcoa Inc.</td>
    	<td>Basic Materials</td>
    	<td>Aluminum</td><td>NYSE</td>
    	<td name="cntry">USA</td><td><a href = "market_list/stocks/AA_5.zip">5Min</a></td>
    	<td>04/08/1997-02/24/2012</td>
    </tr>
    <tr>
    	<td>3</td>
    	<td>AAPL</td>
    	<td>Apple, Inc.</td>
    	<td>Technology</td>
    	<td>Personal Computers</td>
    	<td>NASD</td>
    	<td name="cntry">JAPAN</td>
    	<td><a href = "market_list/stocks/AAPL_5.zip">5Min</a></td>
    	<td>01/14/1997-02/24/2012</td>
    </tr>
    <tr>
    	<td>4</td>
    	<td>ABC</td>
    	<td>Amerisourcebergen Corp.</td>
    	<td>Services</td>
    	<td>Drugs Wholesale</td>
    	<td >NYSE</td>
    	<td name="cntry">London</td>
    	<td><a href = "market_list/stocks/ABC_5.zip">5Min</a></td>
    	<td>08/30/2001-02/24/2012</td>
    </tr>
    <tr>
    	<td>5</td>
    	<td>ABT</td>
    	<td>Abbott Laboratories</td>
    	<td>Healthcare</td>
    	<td>Drug Manufacturers - Major</td>
    	<td>NYSE</td>
    	<td name="cntry">Canada</td>
    	<td><a href = "market_list/stocks/ABT_5.zip">5Min</a></td>
    	<td>04/09/1997-02/24/2012</td>
    </tr>
    <tr>
    	<td>6</td>
    	<td>ABC</td>
    	<td>WEW Laboratories</td>
    	<td>Goldsmith</td>
    	<td>Drug Manufacturers - Major</td>
    	<td>NYSE</td>
    	<td name="cntry">France</td>
    	<td><a href = "market_list/stocks/ABT_5.zip">5Min</a></td>
    	<td>04/09/1997-02/24/2012</td>
    </tr>
    </table>
    </body>
    </html>
    Last edited by Ayşe; 03-01-2012 at 10:37 AM.
    The Time Through Ages
    1. By the Time,
    2. Verily Man is in loss,
    3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

  12. #12
    Join Date
    Sep 2007
    Posts
    315
    http://www.w3schools.com/jsref/coll_table_rows.asp
    http://www.w3schools.com/jsref/tryit...ref_table_rows





    var rows = tbl.getElementsByTagName('tr');
    Code:
     
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>Javascript Sort By Country Name</title>
    <style type="text/css">
    table { width: 800px; }
    
    </style>
    <script type="text/javascript">
    
    // http://www.w3schools.com/jsref/prop_style_display.asp
    // http://www.w3schools.com/cssref/pr_class_display.asp
    // http://www.w3schools.com/jsref/prop_select_selectedindex.asp
    // http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_option_index
    // http://www.w3schools.com/jsref/jsref_split.asp
    // http://www.webdeveloper.com/forum/showthread.php?t=257375
    // http://www.ercani.com/bilisim/css-te-elemanlari-konumlandirma-floatpositiondisplay-ve-cerceveler.html
    
    function showhide() {
    var x=document.getElementById("mySelect").selectedIndex;
    var y=document.getElementById("mySelect").options;
    var val = y[x].value;
    //alert(val);
    
    var tbl = document.getElementById('tblId');
    var rows = tbl.getElementsByTagName('tr');
    for(var k =1; k < tbl.rows.length; k++) { 
    if( tbl.rows[k].cells[6].innerHTML == val) { tbl.rows[k].style.display="table-row"; }
    else { tbl.rows[k].style.display="none"; }
    }
    //alert(document.body.innerHTML);
    }
    </script>
    
    <link rel="stylesheet" href="http://tipinternetmarketing.info/style.css">
    </head>
    <body>
    <br />
    <form>
    	<select id="mySelect">
    		<option value="USA">USA</option>
    		<option value="JAPAN">JAPAN</option>
    		<option value="London">London</option>
    		<option value="Canada">Canada</option>
    		<option value="France">France</option>
    	</select>
    
    	<input type="button" onclick="showhide()" value="Filter">
    
    </form>
    <br />
    <table id="tblId">
    <tr>
    	<td class="tblHdr">No</td>
    	<td class="tblHdr">Ticker</td>
    	<td class="tblHdr">Company</td>
    	<td class="tblHdr">Sector</td>
    	<td class="tblHdr">Industry</td>
    	<td class="tblHdr">Exchange</td>
    	<td class="tblHdr">Country</td>
    	<td class="tblHdr">Data</td>
    	<td class="tblHdr">Available Dates</td>
    </tr>
    <tr>
    	<td>1</td>
    	<td>A</td>
    	<td>Agilent Technologies Inc.</td>
    	<td name="sctr"> Technology</td>
    	<td>Scientific & Technical Instruments</td>
    	<td>NYSE</td>
    	<td name="cntry">USA</td>
    	<td><a href = "market_list/stocks/A_5.zip">5Min</a></td>
    	<td>04/08/1997-02/24/2012</td> 
    </tr>
    <tr>
    	<td>2</td>
    	<td>AA</td>
    	<td>Alcoa Inc.</td>
    	<td>Basic Materials</td>
    	<td>Aluminum</td><td>NYSE</td>
    	<td name="cntry">USA</td><td><a href = "market_list/stocks/AA_5.zip">5Min</a></td>
    	<td>04/08/1997-02/24/2012</td>
    </tr>
    <tr>
    	<td>3</td>
    	<td>AAPL</td>
    	<td>Apple, Inc.</td>
    	<td>Technology</td>
    	<td>Personal Computers</td>
    	<td>NASD</td>
    	<td name="cntry">JAPAN</td>
    	<td><a href = "market_list/stocks/AAPL_5.zip">5Min</a></td>
    	<td>01/14/1997-02/24/2012</td>
    </tr>
    <tr>
    	<td>4</td>
    	<td>ABC</td>
    	<td>Amerisourcebergen Corp.</td>
    	<td>Services</td>
    	<td>Drugs Wholesale</td>
    	<td >NYSE</td>
    	<td name="cntry">London</td>
    	<td><a href = "market_list/stocks/ABC_5.zip">5Min</a></td>
    	<td>08/30/2001-02/24/2012</td>
    </tr>
    <tr>
    	<td>5</td>
    	<td>ABT</td>
    	<td>Abbott Laboratories</td>
    	<td>Healthcare</td>
    	<td>Drug Manufacturers - Major</td>
    	<td>NYSE</td>
    	<td name="cntry">Canada</td>
    	<td><a href = "market_list/stocks/ABT_5.zip">5Min</a></td>
    	<td>04/09/1997-02/24/2012</td>
    </tr>
    <tr>
    	<td>6</td>
    	<td>ABC</td>
    	<td>WEW Laboratories</td>
    	<td>Goldsmith</td>
    	<td>Drug Manufacturers - Major</td>
    	<td>NYSE</td>
    	<td name="cntry">France</td>
    	<td><a href = "market_list/stocks/ABT_5.zip">5Min</a></td>
    	<td>04/09/1997-02/24/2012</td>
    </tr>
    </table>
    </body>
    </html>
    Last edited by Ayşe; 03-01-2012 at 11:26 AM.
    The Time Through Ages
    1. By the Time,
    2. Verily Man is in loss,
    3. Except such as have Faith, and do righteous deeds, and (join together) in the mutual enjoining of Truth, and of Patience and Constancy.

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