How to Get the column value in a table using Javascript

**arkad** · 02-28-2012, 03:39 AM

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.

**xelawho** · 02-28-2012, 06:46 AM

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...

**wbport** · 02-28-2012, 12:37 PM

Do you know how to read the selected item on a dropdown list?

**wbport** · 02-28-2012, 04:48 PM

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.

**arkad** · 02-28-2012, 09:12 PM

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

**arkad** · 02-28-2012, 09:17 PM

i posted the link of my project, since im a new member, i needs modes approval. Im waiting to appear it.

**arkad** · 02-29-2012, 12:31 AM

Hello Sir, can you please post your suggested JS code, and i will study it. THANKS alot

**Ayşe** · 02-29-2012, 11:58 AM

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>

**arkad** · 02-29-2012, 07:55 PM

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

**arkad** · 02-29-2012, 08:40 PM

when i select USA country, it will display all rows which has USA value in the Country column. Is this possible?..

**Ayşe** · 03-01-2012, 09:49 AM

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>

**Ayşe** · 03-01-2012, 11:10 AM

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>

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

Thread Tools

Display

How to Get the column value in a table using Javascript

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions