PDA

View Full Version : 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.



<!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 .. :p


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