How to addclass to a specific cell in a table (Twine 1.4.2, Sugarcube 2)

Question

I've been trying to figure out how to make the background of a specific cell in a table change color when you click on a link.  Here's a simple mockup for an example:

 

(stylesheet)

.redback {background-color: red; }
.yellowback {background-color:yellow;}
.orangeback {background-color:orange;}

Example:

<table>
	<tr>
		<td><<link "Apple">><<addclass "td" "redback">><</link>></td>
		<td><<link "Banana">><<addclass "td" "yellowback">><</link>></td>
		<td><<link "Orange">><<addclass "td" "orangeback">><</link>></td>
	</tr>
</table>

As you can probably tell, it changes the background of the entire table - not the specific cell like I want it to.  I've been fiddling with this for a few days, trying to figure it out on my own (and googling like crazy for help), but I haven't managed to figure anything out.

I'm sure the problem is that 'addclass' is changing all the 'td' elements, but trying to change what they're called breaks the table.  I'm not yet experienced enough to know whether there's a simpler solution that I'm overlooking, or if it's even possible at all.  Any help would be appreciated!

Answer 1

You could simply give each <td> an ID, which must be unique.  For example:

<table>
	<tr>
		<td id="apple"><<link "Apple">><<addclass "#apple" "redback">><</link>></td>
		<td id="banana"><<link "Banana">><<addclass "#banana" "yellowback">><</link>></td>
		<td id="orange"><<link "Orange">><<addclass "#orange" "orangeback">><</link>></td>
	</tr>
</table>

 

Answer 2

edit: It looks like TME answered while I was typing.

The <<addclass>> macro uses the selector you pass to it to search the whole HTML structure of the current page to find HTML elements that match that selector. In your case you are asking it to find all td elements contained within the current page which is why you are receiving the result you did.

You need someway to uniquely identify the particular td element you want to effect, and one technique you can use is to assign each of the td element a unique ID then change the <<addclass>> macros to use those IDs as their selectors.

<table>
	<tr>
		<td id="apple"><<link "Apple">><<addclass "#apple" "redback">><</link>></td>
		<td id="banana"><<link "Banana">><<addclass "#banana" "yellowback">><</link>></td>
		<td id="orange"><<link "Orange">><<addclass "#orange" "orangeback">><</link>></td>
	</tr>
</table>

warning: The above example was written from memory and has not been tested. it may contain syntax errors.

Comments

Thanks very much to both of you!

I'd tried to use an id, but obviously failed to use the proper syntax (I failed to add the '#').  Your suggestions worked perfectly!