I am new to bootstrap. What can I do to see all the contents of my page when screens are smaller. My table in Activities panel doesn't adjust with the screen size.I have a div named MiddleDiv where I append 1 or more tables on the fly.
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-xs-12">
<div class="panel panel-primary">
<div class="panel-heading">Activities</div>
<div class="panel-body">
<div class="table-responsive" id="MiddleDiv">
<table width="100%" style="margin-bottom:10px" id="Table_1" class="TableBlankClass table">
<tbody>
<tr class="bg-success">
<td style="font-weight:bold" id="ActivityCompany_1" colspan="3">Company(Bill to): TD General Insurance Company</td>
<td style="font-weight:bold" id="ActivityClient_1" colspan="6">Client: Test Adjsuter</td>
</tr>
<tr>
<td colspan="3">
<table width="100%">
<tbody>
<tr>
<td><button class="btn btn-danger btn-xs" id="ActivityDel_1" onclick="DelActivity('Table_1')" type="button">Del</button></td>
<td class="ActivitiesHeading">Activity</td>
<td>
<select onchange="GetRate('Table_1')" id="ActivityTypeDropDown_1" style="width:200px;" class="form-control TableSelectClass">
<option value="- Select One -" selected="">- Select One -</option>
<option value="Accomodation">Accomodation</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
<td class="ActivitiesHeading">Comments</td>
<td colspan="2" class="ActivitiesHeading"><textarea rows="1" style="width: 275px; height: 35px;" class="form-control" id="ActivityComments_1"></textarea></td>
<td class="ActivitiesHeading">Status<span id="ActivitySpan_1"></span></td>
<td colspan="2" class="ActivitiesHeading">
<select onchange="CalculateActivities(); CreateRemoveReasonButton('Table_1');" id="ActivityStatusDropDown_1" style="width:200px;" class="form-control">
<option value="24859" selected="">Waiting To Process Payer Invoice</option>
</select>
</td>
</tr>
<tr>
<td class="ActivitiesHeading">Rate</td>
<td class="ActivitiesHeading">Qty</td>
<td class="ActivitiesHeading">Discount</td>
<td class="ActivitiesHeading">Discount %</td>
<td class="ActivitiesHeading">Reason For Discount</td>
<td class="ActivitiesHeading">Tax Applicable</td>
<td class="ActivitiesHeading">Taxes</td>
<td class="ActivitiesHeading">SubTotal</td>
<td class="ActivitiesHeading">Gross Total</td>
</tr>
<tr>
<td><input type="text" onblur="if (this.value=='') {this.value = 0;}" value="0" onkeyup="CalculateActivities()" id="ActivityRate_1" class="form-control TableNumericClass"></td>
<td><input type="text" onblur="if (this.value=='' || this.value=='0') {this.value = 1;}" value="1" onkeyup="CalculateActivities()" id="ActivityQty_1" class="form-control TableNumericClass"></td>
<td><input type="text" onblur="if (this.value=='0') {this.value = '';}" value="" onkeyup="CalculateActivities()" id="ActivityDiscount_1" class="form-control TableDiscountClass"></td>
<td><input type="text" onblur="if (this.value=='0') {this.value = '';}" value="" onkeyup="CalculateActivities()" id="ActivityDiscountPercentage_1" class="form-control TableDiscountClass"></td>
<td>
<select id="ReasonForDiscountDropDown_1" class="form-control">
<option value="- Select One -" selected="">- Select One -</option>
<option value="Late Report Delivery">Late Report Delivery</option>
<option value="Incorrect File Management">Incorrect File Management</option>
<option value="Client Satisfaction">Client Satisfaction</option>
<option value="Other - See Service Notes">Other - See Service Notes</option>
</select>
</td>
<td>
<select onchange="CalculateActivities()" id="ActivityTaxApplicable_1" class="form-control">
<option value="Yes" selected="">Yes</option>
<option value="No">No</option>
</select>
</td>
<td><img width="15" height="15" title="<body> <table width="150px" border="0" cellspacing="1" cellpadding="1"> <tr> <td class="ToolTipTableClass">Tax1 :</td> <td class="ToolTipTableClass">0.00</td> </tr> <tr> <td class="ToolTipTableClass">Tax2 :</td> <td class="ToolTipTableClass" >0.00</td> </tr> </table> </body>" src="/files/404048/93171/Info-32.png" id="ActivityTaxesAmount_1" class="TaxesClass" data-original-title="<body> <table width="150px" border="0" cellspacing="1" cellpadding="1"> <tr> <td class="ToolTipTableClass">Tax1 :</td> <td class="ToolTipTableClass"></td> </tr> <tr> <td class="ToolTipTableClass">Tax2 :</td> <td class="ToolTipTableClass" ></td> </tr> </table> </body>"></td>
<td id="ActivitySubTotal_1">100.00</td>
<td id="ActivityGrossTotal_1">100.00</td>
</tr>
<tr>
<td class="ActivitiesHeading">Measure</td>
<td colspan="2" class="ActivitiesHeading">GAP Code</td>
<td colspan="3" class="ActivitiesHeading">Other Description</td>
<td colspan="3" class="ActivitiesHeading"> </td>
</tr>
<tr>
<td>
<select id="ActivityMeasure_1" class="form-control">
<option selected="" value="- Select One -">- Select One -</option>
</select>
</td>
<td colspan="2">
<select id="ActivityGAPCode_1" class="form-control">
<option value="00000" selected=""><-Select One-></option>
</select>
</td>
<td colspan="3"><input type="text" id="ActivityOtherDescription_1" class="form-control"></td>
<td colspan="3">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 col-xs-12">
<div class="panel panel-primary">
<div class="panel-heading">Total</div>
<div class="panel-body">
<div class="table-responsive">
<table width="100%" class="table">
<tbody>
<tr>
<td class="HeadingTD">SubTotal</td>
<td id="AllSubTotal"></td>
<td class="HeadingTD">Discount</td>
<td id="AllDiscount"></td>
<td class="HeadingTD">Tax</td>
<td id="AllTax"></td>
<td class="HeadingTD">Gross Total</td>
<td id="AllGrossTotal"></td>
</tr>
<tr>
<td colspan="2" id="AddItemTD"></td>
<td colspan="2" id="SubmitActivitiesTD"></td>
<td colspan="2" id="VoidInvoiceTD"></td>
<td colspan="2" align="right"><button class="btn btn-primary btn-sm" onclick="window.parent.close()" type="button">Close</button></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
I can see you are just wrapping traditional HTML tables with some bootstrap classes expecting them to be responsive.
It's a good start but you need to rethink how you construct your tables when you use bootstrap.
Bootstrap uses their "Grid System" http://getbootstrap.com/css/#grid
The grid system doesn't use tables at all. It uses divs with specific classes on them achieve the layout you are looking for. Until you fully use the bootstrap grid system you will not truly see a responsive design.
Take the time to learn the bootstrap grid system.
A bit of a side note and personal opinion: Looking at your form design (which looks great btw) you might not like the result of a responsive design. All of the form fields will end up stacking on top of each other. This form design really only works horizontally. If it were vertically aligned it might get very confusing. If it were me, I might design the form to fit interfaces as small as a tablet but not mobile.
Related
I've created this table that's well formatted in chrome but in ie8 the < td> tag ignores the percentages that i've setted, then if i add table-layout:fixed as someone suggested ie8 ignores the proportion and set them to 25-25-25-25 in the field CAP Via etc...
If i remove the doctype it works (i can't remove it because i need it for something else)
<!DOCTYPE HTML>
<html style ="height: 100%">
<body>
<table cellpadding=4 align=center width=772 border=1 style="border-collapse:collapse;">
<tr>
<td valign=top colspan=4>
<center>
<b>INFORMAZIONI CLIENTE</b>
</center>
</td>
</tr>
<tr>
<td align"left" valign=top colspan=4>
Nome e Cognome del Cliente/Azienda:<br>
<input type="Text" align="LEFT" size="120">
</td>
</tr>
<tr>
<td align"left" valign=top colspan=4>
Via:
<br>
<input type="Text" align="LEFT" size="120">
</td>
</tr>
<tr>
<td align"left" valign=top style="width:1%;">
CAP:
<br>
<input type="Text"align="LEFT" size="4">
</td>
<td align"left" valign=top style="width:1%;">
Città :
<br>
<input type="Text" align="LEFT" size="65">
</td>
<td align"left" valign=top style="width:1%;">
Prov:
<br>
<input type="Text" align="LEFT" size="2">
</td>
<td align"left" valign=top style="width:99%;">
Data:
<br>
<input type="Text" align="LEFT" size="1" > / <input type="Text" align="LEFT" size="1" ><nobr> / <input type="Text" align="LEFT" size="4">
</td>
</tr>
<tr>
<td align"left" valign=top colspan=4>
Info aggiuntive
<br>
<input type="Text" align="LEFT" size="120">
</td>
</tr>
</table>
</body>
</html>
I am trying to find the text from the Select Elements "[New List]". The HTML code behind this is :
<div id="pageBody">
<div class="grid">
<div class="col_12 bgColor column">
<form method="POST" action="pickListEdit.cfm" name="formMain" id="formMain">
<input type="hidden" id="usrAction" name="usrAction" value="NONE"/>
<input type="hidden" id="listtype" name="listtype" value="ACCTS"/>
<input type="hidden" id="listmodified" name="listmodified" value="0"/>
<table cellpadding="0" cellspacing="0" border="0" width="620">
<tbody>
<tr class="alt first last">
<td>
<table cellpadding="0" cellspacing="0" border="0" width="360">
<tbody>
<tr class="alt first">
<td width="150" align="right" class="critH2">
<td height="1" align="left">
<select name="listkey" size="1" onchange="formSubmit('GET');"class="selectfont">
<option value="0">[New List]</option>
</select>
</td>
</tr>
<tr class="alt last">
</tbody>
</table>
</td>
<td width="10"/>
<td width="10"/>
<td valign="top">
</tr>
</tbody>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="600">
</form>
</div>
</div>
</div>
</div>
</body>
The C# code that I am using is :
var AccPic = Driver.Instance.FindElement(By.ClassName("selectfont"));
var selectelement = new SelectElement(AccPic);
selectelement.SelectByText(AP);
The problem is it is unable to find the field name. What I need to do is find the element [New List] and select it. Can someone please help.
Assuming it's the only option tag on the page:
var newList = Driver.Instance.FindElement(By.TagName("option"));
var selectedElement = new SelectElement(newlist);
I have this HTML:
<div class="DivHeaderSizes" data-subgroup="1">
<img style="display:none" class="help-size-img-colorbox" data-subgroup="1_Man" src="Man.gif">
<div class="subgroup-description">Jogging</div>
<div class="help-size-link cboxElement" data-subgroup="1_Man">Tutorial</div>
</div>
<div style="float: left;" class="DivSizeElement">
<table data-size="41" class="SizeElement" style="display: none;">
<tbody>
<tr>
<td class="td-label-size">
<span class="label-size" data-size="41">41</span>
</td>
<td class="td-label-textbox">
<input name="ctl00$CthBody$sizelist$TxtSize_41" type="text" maxlength="4" id="CthBody_sizelist_TxtSize_41" class="txt-Size" data-price="19.50" data-size="41" data-available="0" data-subgroup="1" style="width:30px;">
</td>
</tr>
</tbody>
</table>
</div>
<div style="float: left;" class="DivSizeElement">
<table data-size="42" class="SizeElement" style="display: none;">
<tbody>
<tr>
<td class="td-label-size">
<span class="label-size" data-size="42">42</span>
</td>
<td class="td-label-textbox">
<input name="ctl00$CthBody$sizelist$TxtSize_S" type="text" maxlength="4" id="CthBody_sizelist_TxtSize_S" class="txt-Size" data-price="19.50" data-size="42" data-available="0" data-subgroup="1" style="width:30px;">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Using Selenium with C# and starting from input element with name
ctl00$CthBody$sizelist$TxtSize_41
I want the XPath expression to get the text "Jogging". Thanks.
If the context node is input[#name='ctl00$CthBody$sizelist$TxtSize_41'], then the following XPath will select the div containing "Jogging":
(preceding::div[#class='subgroup-description'])[1]
Or you could use:
ancestor::div[1]/preceding-sibling::div[1]/div[#class='subgroup-description']
I am working on a ONLINE Order System using visual studio as framework and asp classic and vb.net as languages combined with html and javascript. I want to make input fields of a HTML form readonly and editable on the bases of selected value of a drop down list.My code is
<table border="0" width="61.2%" align=center><tr ><td colspan=2 id="bg_page_title" align="center" valign="middle"><strong>
Product Edit Wizard
</td></tr>
<tr>
<td align="right" width="50%"><b>Product Name:</b></td>
<tr>
<td align="right" width="50%"><b>What You Want To Do:</b></td>
<td width="50%">
<select name="what_change" id="ma" onChange="changetextbox()" >
<option value="0"> Select Option</option>
<option value="1" > Bonus Changed</option>
<option value="2" > Price Changed</option>
<option value="3" > Product Discontinue</option>
<option value="4" > Product Re-Open</option>
</select>
</td></tr> <tr id=Tr1>
<td align="right" width="50%" ><b>Ex-Fact Price:</b></td>
<td width="50%">
<tr id=Tr1>
<td align="right" width="50%" ><b>Ex-Fact Price:</b></td>
<td width="50%">
<input type="text" id="ma" name="f_price" value="<%=rs("f_price")%>" > </td>
</tr>
<tr id=Tr2>
<td align="right" width="50%" ><b>Ex-Dist Price:</b></td>
<td width="50%" ><input type="text" id="ma" name="d_price" value="<%=rs("d_price")%>" > </td>
</tr>
<tr id=Tr3>
<td align="right" width="50%" ><b>Bonus Flat Rate:</b></td>
<td width="50%" ><input type="text" id="ma" name="bonus_rate" value=" <%=rs("bonus_rate")%>" </td>
</tr>
<tr id=Tr4>
<td align="right" width="50%" ><b>Bonus Scheme:</b></td>
<td width="50%" ><input type="text" id="ma" name="bonus_sch" value=" <%=rs("bonus_sch")%>" > </td></tr>
<tr id=Tr5>
<td align="right" width="50%" ><b>Bonus Units:</b></td>
<td width="50%" ><input type="text" id="ma" name="bonus_units" value="<%=rs("bonus_units")%>" > </td></tr>
I want to do that when user select 'bonus change" only relevant fields of bonus will editable and others will remain readonly. and when user select "price change" only relevant fields of price will be editable and other will change to readonly. Kindly guide me to solve my problem.
Thanx
First of all change your id's into a unique one(No elements should share the same id).
Simply add a corresponding classes on every input based on what class may be applicable for them. For example:
Class '1' is for Bonus Change
Class '2' is for Price Change
and so on...
<input type="text" id="ma" name="d_price" value="<%=rs("d_price")%>" class="1 2">
Then using JQuery:
$("#ma").change(function(){ // "ma": the id of your drop down(select)
var cls = $(this).val();
$('input').attr('disabled','disabled');
$('.'+cls).removeAttr('disabled');
});
at first change ids of input fields, id must be unique, use Jquery to do that, something like this
$(document).ready(function(){
$("#select_box_id").change(function(){
$("input[type='text']").attr('disabled','disabled');
$(".ma"+$(this).val()).removeAttr('disabled');
})
})
<table border="0" width="61.2%" align=center><tr ><td colspan=2 id="bg_page_title" align="center" valign="middle"><strong>
Product Edit Wizard
</td></tr>
<tr>
<td align="right" width="50%"><b>Product Name:</b></td>
<tr>
<td align="right" width="50%"><b>What You Want To Do:</b></td>
<td width="50%">
<select name="what_change" id="select_box_id" onChange="changetextbox()" >
<option value="0"> Select Option</option>
<option value="1" > Bonus Changed</option>
<option value="2" > Price Changed</option>
<option value="3" > Product Discontinue</option>
<option value="4" > Product Re-Open</option>
</select>
</td></tr> <tr id="Tr1">
<td align="right" width="50%" ><b>Ex-Fact Price:</b></td>
<td width="50%">
<tr id="Tr1">
<td align="right" width="50%" ><b>Ex-Fact Price:</b></td>
<td width="50%">
<input type="text" class="ma2" name="f_price" value="" /> </td>
</tr>
<tr id="Tr2">
<td align="right" width="50%" ><b>Ex-Dist Price:</b></td>
<td width="50%" ><input type="text" class="ma2" name="d_price" value="" /> </td>
</tr>
<tr id="Tr3">
<td align="right" width="50%" ><b>Bonus Flat Rate:</b></td>
<td width="50%" ><input type="text" class="ma1" name="bonus_rate" value=""/> </td>
</tr>
<tr id="Tr4">
<td align="right" width="50%" ><b>Bonus Scheme:</b></td>
<td width="50%" ><input type="text" class="ma1" name="bonus_sch" value="" /> </td></tr>
<tr id="Tr5">
<td align="right" width="50%" ><b>Bonus Units:</b></td>
<td width="50%" ><input type="text" class="ma1" name="bonus_units" value=""/> </td></tr>
I am trying to find the text and if the text is found then click the Edit link which is in the td tag.... but when you look at the page source I dont see how to determine any recommendation or suggestions to achieve?
for an example:
in my page html source (see below) in the td i have text called Title1 once I found the text then I want to find a way to click on the Edit link (which is a hyperlink)
here is what i have done so far
//here is my code
IWebDriver driver = new OpenQA.Selenium.IE.InternetExplorerDriver();
string url ="http://site.com";
driver.Navigate().GoToUrl(url);
string pagesource = driver.PageSource;
//html page source:
<!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" xml:lang="en" lang="en">
<head id="ctl00_PageHead">
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Employee </title>
<body id="ctl00_PageBody">
<form name="aspnetForm" method="post" action="login.aspx" id="aspnetForm" class="container">
<div>
</div>
<div>
</div>
<table class="global-table" cellpadding="0" cellspacing="0">
<tr class="body">
<td>
<div id="body">
<div id="body-inner">
<h1>
Employee Information</h1>
<div id="ctl00_ContentPlaceHolder1_Control1_pnlList" style="width: 100%;">
<div class='filter'>
Language:
<select name="ctl00$ContentPlaceHolder1$Control1$ddlLanguage" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$Control1$ddlLanguage\',\'\')', 0)"
id="ctl00_ContentPlaceHolder1_Control1_ddlLanguage">
<option selected="selected" value="1">English</option>
</select></div>
<div>
<table class="gv" cellspacing="0" border="0" id="ctl00_ContentPlaceHolder1_Control1_gv"
style="border-collapse: collapse;">
<tr class="gridHeader">
<td colspan="8">
<div style="float: left; margin-left: 7px; margin-top: 0px;">
<div style="float: left;">
<input type="image" name="ctl00$ContentPlaceHolder1$Control1$gv$ctl01$ibtnFirst"
id="ctl00_ContentPlaceHolder1_Control1_gv_ctl01_ibtnFirst" disabled="disabled"
title="First Page" src="../App_Themes/Default/images/grid_page_first.png" style="border-width: 0px;
opacity: 0.4; filter: alpha(opacity=40); cursor: default;" />
<input type="image" name="ctl00$ContentPlaceHolder1$Control1$gv$ctl01$ibtnPrev" id="ctl00_ContentPlaceHolder1_Control1_gv_ctl01_ibtnPrev"
disabled="disabled" title="Previous Page" src="../App_Themes/Default/images/grid_page_prev.png"
style="border-width: 0px; opacity: 0.4; filter: alpha(opacity=40); cursor: default;" />
</div>
<div style="float: left; padding: 3px 5px 0px 5px;">
<div class="pagerNumber">
Page 1 of 34
</div>
</div>
<div style="float: left;">
<input type="image" name="ctl00$ContentPlaceHolder1$Control1$gv$ctl01$ibtnNext" id="ctl00_ContentPlaceHolder1_Control1_gv_ctl01_ibtnNext"
title="Next Page" src="../App_Themes/Default/images/grid_page_next.png" style="border-width: 0px;" />
<input type="image" name="ctl00$ContentPlaceHolder1$Control1$gv$ctl01$ibtnLast" id="ctl00_ContentPlaceHolder1_Control1_gv_ctl01_ibtnLast"
title="Last Page" src="../App_Themes/Default/images/grid_page_last.png" style="border-width: 0px;" />
</div>
</div>
<div style="float: left; margin: 0px 6px 0px 20px;">
Page Size
<select name="ctl00$ContentPlaceHolder1$Control1$gv$ctl01$ddlPageSize" onchange="javascript:setTimeout('__doPostBack(\'ctl00$ContentPlaceHolder1$Control1$gv$ctl01$ddlPageSize\',\'\')', 0)"
id="ctl00_ContentPlaceHolder1_Control1_gv_ctl01_ddlPageSize">
<option selected="selected" value="10">10</option>
<option value="20">20</option>
<option value="50">50</option>
<option value="100">100</option>
</select>
</div>
<div id="ctl00_ContentPlaceHolder1_Control1_gv_ctl01_RecordCount" style="float: right;
padding-right: 10px; margin-top: 3px;">
<b>10</b> Items Found</div>
</td>
</tr>
<tr class="header">
<th class=" nolink" scope="col">
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Phone')">
Phone</a>
</th>
<th class=" sorted-desc" scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Title')">
Title</a>
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$SubTitle')">
SubTitle</a>
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Names')">
Names</a>
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Names')">
Enames</a>
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$Active')">
Active</a>
</th>
<th scope="col">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Sort$DateTime')">
DateTime</a>
</th>
</tr>
<tr class="item">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$0')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
Title1
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
8/23/2011
</td>
</tr>
<tr class="altItem">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$1')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
1
</td>
<td>
1
</td>
<td>
Employee
</td>
<td>
</td>
<td>
</td>
<td>
7/31/2014
</td>
</tr>
<tr class="item">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$2')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
111
</td>
<td>
111
</td>
<td>
Employer
</td>
<td>
</td>
<td>
</td>
<td>
7/31/2013
</td>
</tr>
<tr class="altItem">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$3')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
123
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
8/23/2011
</td>
</tr>
<tr class="item">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$4')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
2
</td>
<td>
2
</td>
<td>
Employer
</td>
<td>
</td>
<td>
</td>
<td>
7/31/2012
</td>
</tr>
<tr class="altItem">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$5')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
3
</td>
<td>
3
</td>
<td>
Employer
</td>
<td>
</td>
<td>
</td>
<td>
7/31/2012
</td>
</tr>
<tr class="item">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$6')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
a
</td>
<td>
a
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
7/20/2012
</td>
</tr>
<tr class="altItem">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$7')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
Day
</td>
<td>
</td>
<td>
Customer
</td>
<td>
</td>
<td>
</td>
<td>
3/2/2013
</td>
</tr>
<tr class="item">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$8')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
a1
</td>
<td>
a1
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
7/24/20/14
</td>
</tr>
<tr class="altItem">
<td align="center">
<a href="javascript:__doPostBack('ctl00$ContentPlaceHolder1$Control1$gv','Select$9')">
Edit</a>
</td>
<td align="center" style="width: 15px;">
</td>
<td>
A1
</td>
<td>
A1
</td>
<td>
</td>
<td>
</td>
<td>
</td>
<td>
7/30/2012
</td>
</tr>
</table>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr class="footer">
<td>
</td>
</tr>
</table>
</form>
</body>
</html>
Why wouldn't the following work?
// Assumes "driver" is a valid object implementing IWebDriver
IWebElement table = driver.FindElement(By.ClassName("gv"));
IWebElement element = table.FindElement(By.XPath(".//td[contains(., 'Title1')]/..//a"));
In essence, this says, "Starting at the table with the class name "gv", find the <td> element whose text contains 'Title1', navigate to it's parent (which should be the <tr> element), then find the first <a> descendent element."