The following code is a dynamically generated part of a form and I only can style it using css.
No html changes but for the names of the classes with the exception of: classes "element" and "formField" as they are used as common classes for other elements in the form.
The layout I am looking for is a two column label-checkbox. As you can see in the code, I have 4 label-checkbox items. I need item 0 and 1 in a column and in another column next to it, item 2 and 3.
I know the tables should be gone for good, I agree but please help me here, I am going to build the whole site again but I don't have the time just yet.
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat0">Category 0</label></div></td>
<td width="70%" align="left">
<div id="div_eCat0" style="float:left">
<input type="checkbox" name="eCat0" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat1">Category 1</label></div></td>
<td width="70%" align="left">
<div id="div_eCat1" style="float:left">
<input type="checkbox" name="eCat1" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat2">Category 2</label></div></td>
<td width="70%" align="left">
<div id="div_eCat2" style="float:left">
<input type="checkbox" name="eCat2" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody><tr>
<td width="30%" align="right"><div style="float:right"><label id="lbl_eCat3">Category 3</label></div></td>
<td width="70%" align="left">
<div id="div_eCat3" style="float:left">
<input type="checkbox" name="eCat3" value="1" class="formField">
</div>
</td>
</tr>
</tbody></table>
</div>
You can use the CSS float and clear in order to do that. Here is an example.
.element{
float:right;
}
.element:nth-child(odd){
clear:right;
}
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat0">Category 0</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat0" style="float:left">
<input type="checkbox" name="eCat0" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat1">Category 1</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat1" style="float:left">
<input type="checkbox" name="eCat1" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat2">Category 2</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat2" style="float:left">
<input type="checkbox" name="eCat2" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>
<div class="element" id="mycat">
<table width="100%" border="0" style="">
<tbody>
<tr>
<td width="30%" align="right">
<div style="float:right"><label id="lbl_eCat3">Category 3</label></div>
</td>
<td width="70%" align="left">
<div id="div_eCat3" style="float:left">
<input type="checkbox" name="eCat3" value="1" class="formField">
</div>
</td>
</tr>
</tbody>
</table>
</div>
If you can style the parent element of those four divs, you can set
.parent {
columns: 2;
}
This will work in IE10+. https://jsfiddle.net/c979dxLe/1/
You can also set the width of the columns. Docs: https://developer.mozilla.org/nl/docs/Web/CSS/columns
I did this for some md-checkboxes in my parent div, and they are column-first ordered! Like this:
1 4
2 5
3
CSS:
.parent {
columns: 2;
}
.parent > * {
width: 100%;
}
Related
I would like to know how can i refresh my without refresh the entire page in Javascript
Exemple of HTML
<table class="list" cellpadding="1" cellspacing="1">
<thead>
<tr>
<td class="checkbox edit"></td>
<td class="Element sortable" onclick="My.Game.List.sort(223, 'eleemnt');">Element</td>
<td class="ew sortable" onclick="My.Game.List.sort(223, 'ew');">Pop.</td>
<td class="distance sortable" onclick="My.Game.RaidList.sort(223, 'distance');">Distance</td>
<td class="element sortable" onclick="My.Game.List.sort(223, 'element');">Option</td>
<td class="last sortable" onclick="My.Game.List.sort(223, 'last');">Last</td>
<td class="action"></td>
</tr>
</thead>
<tbody>
<tr class="slotRow" id="slot-row-3021">
<td class="checkbox">
<input id="slot3021" name="slot[3021]" type="checkbox" class="markSlot check" onclick="My.Game.List.markSlot(223, 3021, this.checked);">
</td>
<td class="element">
Artic
</td>
<td class="ew">
31 </td>
<td class="distance">
2.2 </td>
<td class="Option">
<div class="icon"><img class="unit u11" alt="My ALt" src="img/x.gif"><span class="MyClass">2</span></div> </td>
<td class="last">
<img src="img/x.gif" class="My Class"> // Might Change
<img src="img/x.gif" class="carry full" alt="My Alt // Might Change
18.09.18, 15:26 // Change
<div class="clear"></div>
</td>
<td class="action">
<a class="arrow" href="#" onclick="My.Game.List.editSlot(223, 3021, true, 'rallyPoint'); return false;">Éditer</a>
</td>
</tr>
</tbody>
</table>
Basicly i would like to refresh the content of all the row of my Table
I tried this but it seems not working i don't understand why :
JAVASCRIPT CODE :
setInterval(function() {
document.getElementsByTagName('table')[0].reload();
}, 500);
NB : The function is just a timer to refresh the table each 500 ms.
What is excepted to change :
<tr class="slotRow" id="slot-row-3021">
<td class="checkbox">
<input id="slot3021" name="slot[3021]" type="checkbox" class="markSlot check" onclick="My.Game.List.markSlot(223, 3021, this.checked);">
</td>
<td class="element">
Artic
</td>
<td class="ew">
31 </td>
<td class="distance">
2.2 </td>
<td class="Option">
<div class="icon"><img class="unit u11" alt="My ALt" src="img/x.gif"><span class="MyClass">2</span></div> </td>
<td class="last">
<img src="img/x.gif" class="My Class"> // Might Change
<img src="img/x.gif" class="carry full" alt="My Alt // Might Change
18.09.18, 15:26 // Change
<div class="clear"></div>
</td>
<td class="action">
<a class="arrow" href="#" onclick="My.Game.List.editSlot(223, 3021, true, 'rallyPoint'); return false;">Éditer</a>
</td>
</tr>
Best regards !
There are a lot of answers to your question.
You could simply fix this by replacing the (inner)HTML of the element any time an update takes place.
Something like HTML : draw table using innerHTML
Messy, but it is the answer to your question.
Your HTML is not dynamicly updating values, that would be done trough javascript. If you are getting your values from a webservice - look into AJAX.
I'm working on a Survey and on the system that I work I don't have access to change the HTML directly but I can add CSS or JavaScript to the existing code.
I have the following HTML and I would like the input field to be right underneath the first name. I can only use the ID's as the classes are the same in many other fields that I don't want changing them. I'm a bit stack so if anyone has an idea I would really appreciate..Thanks!
<div id="pnlPersonalDetails2">
</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>
Please check if this helps you to achieve the desired style
td.pd_label ~ td {
float: left;
position: absolute;
left: 7px;
margin-top: 1em;
}
The same selector (td.pd_label ~ td) works in JavaScript also.
You can use the + selector
#pnlPersonalDetails2 + .surveyquestions td {
display:block;
}
<div id="pnlPersonalDetails2">
</div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>
<div id="someId"></div>
<table cellpadding="0" cellspacing="0" border="0" class="surveyquestions">
<tbody>
<tr>
<td colspan="2" class="pd_question">
<span id="lbl2"></span>
</td>
</tr>
<tr>
<td class="pd_label">FIRST NAME<span class="red"> *</span></td>
<td>
<input name="Name微statictext_2" type="text" id="Name微statictext_2" class="pd_textbox">
</td>
<td class="error_label">
<span id="ctl03" style="visibility:hidden;">Required Field</span>
</td>
</tr>
</tbody>
</table>
I want to find text inside div parent with table, if i write any text inside my search bar i want to show only the result and the rest of the divs hidde, i have differents td that i want search in the four cells (left to rigth) the last cell is not important
This is my HTML:
<div class="caja-orden-curso" alt="3">
<div class="contenido-curso">
<table id="perrito" border="1" style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
36624
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps">
<span id="created">02/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top" style="height: 14px;">presidente masaryk, 29, , polanco</div>
<div class="order-details-bottom" style="height: 23px;">colima, 323, , roma norte</div>
</td>
<td width="120">
<div class="order-details-top">
alexis
<div>
<div class="order-details-bottom">
saul
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-curso">
</div>
<div class="tam-tabla-orden">
</div>
</div>
<div class="caja-orden-curso" id="statu-20" alt="12">
<div class="contenido-curso">
<table id="perrito" border="1" style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
35684
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps">
<span id="created">01/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top" style="height: 14px;">yumnbvfd, 78984,</div>
<div class="order-details-bottom" style="height: 23px;">jhgfre, 483</div>
</td>
<td width="120">
<div class="order-details-top">
rtynbv
<div>
<div class="order-details-bottom">
zsdf
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-finalizada-segundo" id="statu-9">
</div>
<div class="tam-tabla-orden">
</div>
</div>
And this is my Script:
$("#buscador").keyup(function() {
var dInput = $(this).val();
if (!this.value) {
$('div.caja-orden-curso').fadeIn();
}
else
{
$("table#perrito").each(function()
{
$(this).find('div.top-order:contains(' + dInput + ')').length > 0 ?
$(this).show() : $(this).parents('div.caja-orden-curso').fadeOut();
});
}
});
My example only work with the first cell with the other three cells i cant.
This is my fiddle
IDs in a page must be unique. So change id="perrito" to class="perrito" and do the following.
$("table.perrito").each(function() {
if ($(this).find('div:contains(' + dInput + ')').length)
$(this).parents('div.caja-orden-curso').fadeIn();
else
$(this).parents('div.caja-orden-curso').fadeOut();
});
DEMO
Here you used find funtion on "top-order" class only.if you want work with all 4 cells then you apply this class on all of three cells also. You may try this
<div class="caja-orden-curso" alt="3">
<div class="contenido-curso">
<table id="perrito" border="1"style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
36624
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps top-order">
<span id="created">02/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top top-order" style="height: 14px;">presidente masaryk, 29, , polanco</div>
<div class="order-details-bottom top-order" style="height: 23px;">colima, 323, , roma norte</div>
</td>
<td width="120">
<div class="order-details-top top-order">
alexis
<div>
<div class="order-details-bottom top-order">
saul
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-curso">
</div>
<div class="tam-tabla-orden">
</div>
</div>
<div class="caja-orden-curso" id="statu-20" alt="12">
<div class="contenido-curso">
<table id="perrito" border="1"style="width:98%">
<tr>
<td width="220" height="100">
<div id="vehicle_type" class="top-order">
35684
</div>
</td>
<td width="200">
<div id="step_form_1" class="order-steps top-order">
<span id="created">01/02/2016 10:59</span>
</div>
</td>
<td width="300">
<div class="order-details-top" style="height: 14px;">yumnbvfd, 78984,</div>
<div class="order-details-bottom top-order" style="height: 23px;">jhgfre, 483</div>
</td>
<td width="120">
<div class="order-details-top top-order">
rtynbv
<div>
<div class="order-details-bottom top-order">
zsdf
</div>
</td>
<td width="120">
565897423
</td>
</tr>
</table>
</div>
<div class="color-lateral-finalizada-segundo" id="statu-9">
</div>
<div class="tam-tabla-orden">
</div>
</div>
If you want search or sort or ... on table , you can use DataTables jQuery plugins
Pagination, instant search and multi-column ordering
Supports almostany data source: Easily theme-able: DataTables, jQuery
UI, Bootstrap, Foundation
Ajax auto loading of data
and ...
$('#myTable').DataTable();
DataTables jQuery plugins
<fieldset class="fieldset">
<legend class="legendtitle">DEDUCTIONS</legend>
<table width="100%" border="0" cellspacing= "0" cellpadding="0">
<tr>
<td class="Htd_one1" width="20%"><div align="center">Component</div></td>
<td class="Htd_one1" width="20%"><div align="center">Allocated</div></td>
</tr>
<s:iterator value="%{#resultLists.deductionLists}" id="hrEmpSalaryCompDeductionList"
status="stat">
<s:if test="%{#allowanceList.allocatedSalAmount > 0}">
<tr>
<td class="labelone1" >
<div align="center">
<s:property value="%{#allowanceList.componentDesc}" />
</div>
</td>
<td class="dataone1" >
<div align="right">
<s:property value="%{#allowanceList.allocatedSalAmount}" />
</div>
</td>
</tr>
</s:if>
</s:iterator>
</table>
</fieldset>
I need to hide the whole fieldset if none of the value of allowanceList.allocatedSalAmount in iterator list resultLists.deductionLists is not greater than 0.
I thought of calling JavaScript and to pass the value of resultLists.deductionLists and then set a counter if any allowanceList.allocatedSalAmount being greater than 0.
But how can I pass the list value of resultLists.deductionLists to JavaScript and access all allowanceList.allocatedSalAmount out of it?
To hide whole fieldset you have to wrap it with <s:if> tag.
<s:if test="%{#allowanceList.allocatedSalAmount > 0}">
<fieldset class="fieldset">
<legend class="legendtitle">DEDUCTIONS</legend>
<table width="100%" border="0" cellspacing= "0" cellpadding="0">
<tr>
<td class="Htd_one1" width="20%"><div align="center">Component</div></td>
<td class="Htd_one1" width="20%"><div align="center">Allocated</div></td>
</tr>
<s:iterator value="%{#resultLists.deductionLists}" id="hrEmpSalaryCompDeductionList"
status="stat">
<tr>
<td class="labelone1" >
<div align="center">
<s:property value="%{#allowanceList.componentDesc}" />
</div>
</td>
<td class="dataone1" >
<div align="right">
<s:property value="%{#allowanceList.allocatedSalAmount}" />
</div>
</td>
</tr>
</s:iterator>
</table>
</fieldset>
</s:if>
because you can iterate only one list at a time in fieldset you can't have both lists iterated by the same iterator. You have to define the proper expression to evaluate in the <s:if> tag to decide whether you should display fieldset or not.
I have a grid and button inside a template field like following:
<asp:TemplateField>
<ItemTemplate>
<input type="button" value="Map Route" onclick="MapRoute('<%# ((GridViewRow) Container).RowIndex %>')" />
</ItemTemplate>
</asp:TemplateField>
I want to change text of button from "Map Route" to "Unmap Route" when user click on it and I also want to disable all buttons in other rows of this column using Javascript or JQuery
EDIT:
If above is not possible then only changing text of button which is clicked.
Edit2: HTML
<table cellspacing="0" cellpadding="3" rules="all" border="1" id="gvRider" style="border-color: White;
border-width: 1px; border-style: Solid; width: 100%; border-collapse: collapse;">
<tr class="gridtitlebg" align="left" style="height: 35px;">
<th align="center" scope="col">
#
</th>
<th scope="col">
Dist From Start (mi)
</th>
<th scope="col">
Start
</th>
<th scope="col">
Dist From End (mi)
</th>
<th scope="col">
Return
</th>
<th scope="col">
Commuting Days
</th>
<th scope="col">
Male/Female
</th>
<th scope="col">
Smoker/Non-Smoker
</th>
<th scope="col">
Drive/Non-Drive
</th>
<th scope="col">
Bike-Buddy
</th>
<th scope="col">
Email
</th>
<th scope="col" style="width: 30px;">
Map Route
</th>
</tr>
<tr class="grdtext1" align="left" style="background-color: White; height: 30px;">
<td align="center" style="width: 20px;">
1
</td>
<td align="center" style="width: 70px;">
0.73
</td>
<td align="center" style="width: 50px;">
08:20 AM
</td>
<td align="center" style="width: 70px;">
</td>
<td align="center" style="width: 50px;">
07:05 PM
</td>
<td align="left" style="width: 110px;">
<table cellspacing="9" border="0" style="width: 100%;">
<tr>
<td>
<img src="../Images/icons/days/mon.png" style="border-width: 0px;" />
</td>
<td>
<img src="../Images/icons/days/th.png" style="border-width: 0px;" />
</td>
<td>
<img src="../Images/icons/days/wed.png" style="border-width: 0px;" />
</td>
<td>
<img src="../Images/icons/days/thu.png" style="border-width: 0px;" />
</td>
<td>
<img src="../Images/icons/days/fri.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 70px;">
<table cellspacing="9" border="0" style="width: 78%;">
<tr>
<td>
<img title="Male" src="../Images/icons/filter/icon_male.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 70px;">
<table cellspacing="9" border="0" style="width: 78%;">
<tr>
<td>
<img title="Smoker" src="../Images/icons/filter/icon_smoker.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 70px;">
<table cellspacing="9" border="0" style="width: 78%;">
<tr>
<td>
<img title="Not-Driver" src="../Images/icons/filter/noncar_icon.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 70px;">
<table cellspacing="9" border="0" style="width: 78%;">
<tr>
<td>
<img title="Bike-buddy" src="../Images/icons/filter/icon_bike.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 54px;">
<input type="image" name="gvRider$ctl02$imgBtnEmail" id="gvRider_ctl02_imgBtnEmail"
title="Send Email" src="../App_Themes/default/images/sendemail.png" style="border-width: 0px;" />
</td>
<td>
<input type="button" value="Map Route" onclick="MapRoute('0')" />
</td>
</tr>
<tr class="grdtext1" align="left" style="background-color: #D2E8F9; height: 30px;">
<td align="center" style="width: 20px;">
2
</td>
<td align="center" style="width: 70px;">
0.94
</td>
<td align="center" style="width: 50px;">
05:25 AM
</td>
<td align="center" style="width: 70px;">
1.05
</td>
<td align="center" style="width: 50px;">
02:20 PM
</td>
<td align="left" style="width: 110px;">
<table cellspacing="9" border="0" style="width: 100%;">
<tr>
<td>
<img src="../Images/icons/days/mon.png" style="border-width: 0px;" />
</td>
<td>
<img src="../Images/icons/days/th.png" style="border-width: 0px;" />
</td>
<td>
<img src="../Images/icons/days/wed.png" style="border-width: 0px;" />
</td>
<td>
<img src="../Images/icons/days/thu.png" style="border-width: 0px;" />
</td>
<td>
<img src="../Images/icons/days/fri.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 70px;">
<table cellspacing="9" border="0" style="width: 78%;">
<tr>
<td>
<img title="Male" src="../Images/icons/filter/icon_male.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 70px;">
<table cellspacing="9" border="0" style="width: 78%;">
<tr>
<td>
<img title="Non-smoker" src="../Images/icons/filter/icon_nonsmoker.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 70px;">
<table cellspacing="9" border="0" style="width: 78%;">
<tr>
<td>
<img title="Driver" src="../Images/icons/filter/icon_carpool.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 70px;">
<table cellspacing="9" border="0" style="width: 78%;">
<tr>
<td>
<img title="Bike-buddy" src="../Images/icons/filter/icon_bike.png" style="border-width: 0px;" />
</td>
</tr>
</table>
</td>
<td align="center" style="width: 54px;">
<input type="image" name="gvRider$ctl03$imgBtnEmail" id="gvRider_ctl03_imgBtnEmail"
title="Send Email" src="../App_Themes/default/images/sendemail.png" style="border-width: 0px;" />
</td>
<td>
<input type="button" value="Map Route" onclick="MapRoute('1')" />
</td>
</tr>
</table>
Thanks!
This seems to work well for me:
<asp:TemplateField>
<ItemTemplate>
<input type="button" value="Map Route" onclick="MapRoute('<%# ((GridViewRow) Container).RowIndex %>')" class="map-button" />
</ItemTemplate>
</asp:TemplateField>
Note: Added "map-button" to class attribute.
<script type="text/javascript">
var mapOpen = false;
$(function () {
$('.map-button').on('click', function () {
if(mapOpen) {
$('.map-button').removeAttr('disabled');
$(this).val('Map Route');
mapOpen = false;
}
else {
$('.map-button').attr('disabled', 'disabled');
$(this).val('Unmap Route').removeAttr('disabled');
mapOpen = true;
}
});
});
</script>
You can use CSS to create a class for the button elements that you want to hide and then have your JQuery function toggle those elements to another class where they are hidden.
$("#button_id").click(function () {
$(".buttons_to_hide_class").toggleClass("hidden");
$(this).text() = "UnMap Route"; // Not sure if this is right. The rest should be.
return false;
});
CSS:
button.buttons_to_hide_class{
//Fill in how you want them to look
}
button.buttons_to_hide_class.hidden{
display:none;
visibility:hidden;
}
Check out this jsFiddle. http://jsfiddle.net/bngHu/
I set it up to disable all the button in that same row and column as the button that is clicked (including the button itself).
HTML...
<table>
<tr>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
</tr>
<tr>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
</tr>
<tr>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
</tr>
<tr>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
</tr>
<tr>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
<td>
<input class="map-button" type="button" value="Map Route">
</td>
</tr>
</table>
JQuery...
$(document).ready(function(){
$('.map-button').click(function(e){
$(this).val('Unmap Route');
$(this).parent().parent().find(".map-button").attr('disabled', 'disabled');
var col = $(this).parent().parent().children().index($(this).parent());
$.each($('tr'), function() {
$(this).find('td:nth(' + col + ')').find('.map-button').attr('disabled', 'disabled');
});
});
});