to retrieve some element within specific table

**y1k2h3** · 11-23-2006, 03:58 AM

hi guys, i got an problem again.

How to get <select> elements from within a specific table of a html page that contains >2 tables which also containing <select> elements. I have the id of those specific tables that I want to retrieve the <select>.

I tried using document.getElementsByTagName("select"); but then all the <select> regardless of the tables will be returned.
Will innertext be a good choice??

Any kind and smart pro can help this poor ting.

**y1k2h3** · 11-23-2006, 04:04 AM

forget one important point.

i will implement some style change for all <select> within that page. In short, <select> in the specify table will be different from the others.

**codeexploiter** · 11-23-2006, 12:01 PM

You can refer the following code for your question. We can access an element from JavaScript using a name or a id (some other methods are also there).

The below code uses name as the identifier to access an element. If you have multiple Select in your web page then give different name for each of them and access only those which are required for your purpose.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript">
function Navigate() {
    soft = document.form1.software.selectedIndex;
    softval = document.form1.software.options[soft].value;
    if (softval == "x")
        alert("Select a software");
    else 
   {
   	alert("Youve selected a software which is : "+ softval);
   	return true;   
   } 	   
}
</script>
</head>

<body>
<form name="form1">
<select name="software" onChange="Navigate();">
<option VALUE="x" SELECTED>Select a Product
<option VALUE="Linux">Linux
<option VALUE="Windows XP">Windows XP
<option VALUE="OS/2">OS/2
</select>
</form>
</body>
</html>

**y1k2h3** · 11-24-2006, 01:22 AM

not this..

but thanks 4 helping

**codeexploiter** · 11-24-2006, 03:39 AM

You meant you have a some Select elements within a number of HTML tables and you want to access a particular element which is within so many HTML tables, right?

The method I furnished above does same that but in my source code i haven't used any HTML tables whether you use tables or not that is one of the method to access an element.

If that is not the case then you can rephrase your question in a better manner that would help to get answers from others too.

**y1k2h3** · 11-24-2006, 07:00 AM

perhaps a js function is worth a thousand words

This function will be placed on the <body onLoad="normalizeDDWidth();">
NOTE: Orginally, there is no parameters for the function, I recoded it.

But because, the getElementsByTagName("select") will get all the <select> from the screen including those under searchTable (which I don't want to have) and applies the 3mouse events and 14em style. In another words, all the <select> of ANY searchTable will NOT HAVE 'forOnMouseOver', 'forOnMouseOut', 'forOnBlur'. And the remaining <select> (not belong to any searchTable) will HAVE width either '14em' or 'auto', plus the 3 special created mouseEvent.

Hope it is clearly now ..

HTML Code:

function normalizeDDWidth(tableId, isSearchTable){

    if(isSearchTable == false){
        var a = document.getElementsByTagName("select");
          for(var i=0; i<a.length; i++){
              var selectObj = a[i];
              var selectObjId = selectObj.id;
              var selectedVal = selectObj.options[selectObj.selectedIndex].value;
                  if(selectedVal != ''){//&& this.offsetWidth <= 120
                      selectObj.style.width = "auto";
                  }
                  else{
                      selectObj.style.width = "14em";
                  }

              selectObj.onmouseover = forOnMouseOver;

              selectObj.onmouseout = forOnMouseOut;

              selectObj.onblur = forOnBlur;

          }//end for
    }
    else{//end isSearchTable == true, all DD's width & textfield are hardcoded here
      var textFieldLen = "22";
        if(tableId == "customersearchTbl"){
            document.all.txtBrand.style.width = "14em";
            document.all.txtServiceType.style.width = "19em";
            document.all.txtCustomerClass.style.width = "19em";
            document.all.txtTopSubIndicator.style.width = "19em";
        }
        else if(tableId == "txnsearchTbl"){
            textFieldLen = "32";
            document.all.brandId.style.width = "27em";
            document.all.channel.style.width = "27em";
            document.all.contactMode.style.width = "27em";
            document.all.contactType.style.width = "27em";
            document.all.txnGroup.style.width = "27em";
            document.all.txnType.style.width = "27em";
            document.all.customerClass.style.width = "16em";
            document.all.topSubIndicator.style.width = "16em";
            document.all.priority.style.width = "12em";
            document.all.status.style.width = "12em";
        }
        else if(tableId == "massassignmentsearchTbl"){
            textFieldLen = "32";
            document.all.brand_id.style.width = "27em";
            document.all.customerClass.style.width = "16em";
            document.all.topSubIndicator.style.width = "16em";
            document.all.channel.style.width = "27em";
            document.all.contactMode.style.width = "27em";
            document.all.contactType.style.width = "27em";
            document.all.txnGroup.style.width = "27em";
            document.all.txnType.style.width = "27em";
            document.all.concernType.style.width = "27em";
            document.all.assignedUserId.style.width = "29em";
            document.all.priority.style.width = "29em";
        }
        else if(tableId == "bulkresolutionsearchTbl"){
            textFieldLen = "32";
            document.all.brand_id.style.width = "27em";
            document.all.channel.style.width = "27em";
            document.all.contactMode.style.width = "27em";
            document.all.contactType.style.width = "27em";
            document.all.txnGroup.style.width = "27em";
            document.all.txnType.style.width = "27em";
            document.all.concernType.style.width = "27em";
            document.all.assignedUserId.style.width = "29em";
            document.all.priority.style.width = "29em";
        }
        
        normalizeTextWidth(textFieldLen);
    }

}//end normalizeDDWidth()

**codeexploiter** · 11-24-2006, 09:00 AM

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>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function test()
{
	var  a = document.getElementsByTagName("select");
	alert('You have '+a.length+' selects in the page');
	for(var i=0; i<a.length; i++)
	{
		var selectObj = a[i];
	      var selectObjId = selectObj.id;
		if(selectObjId == "search1" || selectObjId == "search2")
		{
			alert('This is an item you don\'t want to manipulate, so skipping it...');
			continue;
		}
		else
		{
			var selectedVal = selectObj.options[selectObj.selectedIndex].value;
			alert(i + ' select has a selected value of ' +selectedVal);	
		}
	}
}
</script>
</head>

<body>
<form name="f">
  <table width="200" border="1">
    <tr>
      <td><select name="select">
          <option value="1" selected="selected">One</option>
          <option value="2">Two</option>
          <option value="3">Three</option>
      </select></td>
    </tr>
  </table>
  <p>&nbsp;</p>
  <table width="200" border="1">
    <tr>
      <td><select name="select2" id="search1">
        <option value="a" selected="selected">A</option>
        <option value="b">B</option>
        <option value="c">C</option>
      </select></td>
    </tr>
  </table>
  <p>&nbsp;</p>
  <table width="200" border="1">
    <tr>
      <td><select name="select3">
        <option value="apple" selected="selected">Apple</option>
        <option value="banana">Banana</option>
        <option value="choclate">Choclate</option>
      </select></td>
    </tr>
  </table>
  <p>&nbsp;</p>
  <table width="200" border="1">
    <tr>
      <td><select name="select4" id="search2">
        <option value="pizza" selected="selected">Pizza</option>
        <option value="burgar">Burger</option>
        <option value="cutlet">Cutlet</option>
      </select></td>
    </tr>
  </table>
<br><input type=button onclick="test();" value="click">
</form>
</body>
</html>

Check the above furnished code. I've noted the important item in red color. Once you run this one you'll understand how you can skip the unnecessary selects while performing an operation.

Thread: to retrieve some element within specific table

Thread Tools

Search Thread

to retrieve some element within specific table

Explain using function

Bookmarks

Bookmarks

Posting Permissions