Donate. I desperately need donations to survive due to my health

Get paid by answering surveys Click here

Click here to donate

Remote/Work from Home jobs

Swap data between two rows that are not adjacent to each other upon button click and criteria

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