I've been trying to get this to work with the limited JS experience I have but have failed too many times and I'm back at square one. Hoping someone here can give me a hand.
I have a project manager asking me to put together a form that works in a very specific way, this is what is looks like:
<table id="mytable">
<thead>
<th>Button</th>
<th>Project Type</th>
<th>ProjectName</th>
<th>Customer</th>
<th>Working Hours</th>
<th>Task Type</th>
<th>Task Deadline</th>
</thead>
<tr>
<td><button>
HBK
</button></td>
<td>HBK</td>
<td>Danger Procedure Kit</td>
<td>ASMinc</td>
<td><form>
<input type="text" name="workinghours" maxlength="2" size="2">
</form></td>
<td><form>
<input type="text" name="task" maxlength="15" size="15">
</form></td>
<td><form>
<input type="date" name="taskduedate">
</form></td>
</tr>
<tr>
<td><button>
FST
</button></td>
<td>FST</td>
<td>Camp Fire Prep. Box</td>
<td>LB</td>
<td><form>
<input type="text" name="workinghours" maxlength="2" size="2">
</form></td>
<td><form>
<input type="text" name="task" maxlength="15" size="15">
</form></td>
<td><form>
<input type="date" name="taskduedate">
</form></td>
</tr>
<tr>
<td><button>
PSK
</button></td>
<td>PSK</td>
<td>Break In Preparedness</td>
<td>HSS</td>
<td><form>
<input type="text" name="workinghours" maxlength="2" size="2">
</form></td>
<td><form>
<input type="text" name="task" maxlength="15" size="15">
</form></td>
<td><form>
<input type="date" name="taskduedate">
</form></td>
</tr>
<tr>
<td><button>
SLT
</button></td>
<td>SLT</td>
<td>TactAdvanced Box</td>
<td>MN</td>
<td><form>
<input type="text" name="workinghours" maxlength="2" size="2">
</form></td>
<td><form>
<input type="text" name="task" maxlength="15" size="15">
</form></td>
<td><form>
<input type="date" name="taskduedate">
</form></td>
</tr>
<tr>
<td><button>
PJ
</button></td>
<td>HBK</td>
<td>Garage AutoWholesale Dept IDP</td>
<td>AZ</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><button>
PJ
</button></td>
<td>PSK</td>
<td>Office Incident Crate</td>
<td>AHR</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><button>
PJ
</button></td>
<td>FST</td>
<td>Survival Box Rev2</td>
<td>MN</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><button>
PJ
</button></td>
<td>HBK</td>
<td>Auto Crate Rev5</td>
<td>AZ</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><button>
PJ
</button></td>
<td>SLT</td>
<td>Hunting Crate Rev2</td>
<td>C&H</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><button>
PJ
</button></td>
<td>SLT</td>
<td>Hunting Crate Rev3</td>
<td>C&H</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><button>
PJ
</button></td>
<td>FST</td>
<td>Mini Happy Survival Kit</td>
<td>LB</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td><button>
PJ
</button></td>
<td>SLT</td>
<td>Mountain Gear Bag</td>
<td>LB</td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
The functionality is that the first 4 buttons are fixed. And when you click the HBK button for example, all other buttons that are not HBK projects become inactive, and if you click the PJ button for let's say 'Auto Crate Rev5' then it swaps the td for Project Type, Project name, & customer of those two rows.
I've been sinking a lot of time into getting it to work. The CSS alone is the only part of this that I have gotten to work. but I posted the stripped-down HTML hoping someone can help.
Comments
Post a Comment