Dynamically change an attribute

Hi

I have some code that dynamically creates tables using JavaScript.
http://ectpro.co/test/rob.html

How do I dynamically change the attributes of a specific textbox?

For example:
On the 1st table, the "Full User" "Quantity" textbox.
How do I change the attributes for this textbox
the background color, to make it editable or make it readonly.

This textbox would be
- dataTable1
- row 2
- col 2

 

Well, your question is related in many ways to your really, REALLY bad markup... you see there are tags OTHER than TR and TD that go into table; what you have here is a classic example of how NOT to use a table.

See this:

			<tr>
				<td colspan="5"><h1>Microsoft Dynamics NAV Pricing Calculator</h1></td>
			</tr>

Code (markup):

Should NOT be a TR, a TD with Colspan, OR a H1 for that matter. That's a CAPTION.

See these?

		        <tr  class="titlerow">
				<td class="titlecolumn_mod" width="320">Module</td>
			        <td class="titlecolumn_selected" width="40">Selected</td>
			        <td class="titlecolumn_prices" width="80">Quantity</td>
			        <td class="titlecolumn_prices" width="80">Price</td>
			        <td class="titlecolumn_prices" width="70">Ext. Price</td>
               		</tr></table>

Code (markup):

Those should NOT be a separate table from the data, and they should NOT be TD they should be TH... all inside a THEAD.

This one:

<table border="0" id="dataTable1" class="table-inner">

Code (markup):

Shouldn't even be a table, it should be a TBODY in the SAME table as it's heading. I'd probably also have each of those tables in it's own form... one of the rare cases I'd advocate that as it's the rarest of rares; form elements that are also tabular data.

Likewise I'd probably axe a lot of the column classes and the width declarations, that's presentation (so it has NO business in your markup) and classes should only be used when elements are different, not when they are the same. (and all those prices/qty would be 'the same')... and GOOD scripting should be attaching itself, not relying on the outmoded 'onscript' nonsense... and of course onscript automatically contains javascript, so saying "javascript:" inside it is just gibberish.

If they're readonly, why are they even an input? (that's one I never really understood... means the data for that is already server-side, so why send it back and forth?!?)

Doing all this would let you axe almost half your content as almost all your classes would become pointless and/or redundant... though it might gain back some markup once a PROPER table is in place using the SCOPE attribute.

Also not sure why you're using empty array values, I'd think that would make multi-row harder to process...

You've got three table and a DIV doing the job of one table, and a whole slew of unnecessary non-semantic markup in there; it's HTML '90's style at it's worst.

		<table>
			<caption>Microsoft Dynamics NAV Pricing Calculator</caption>
			<thead>
				<tr>
					<th scope="col" class="description">Module</th>
					<th scope="col" class="checkbox">Selected</th>
					<th scope="col">Quantity</th>
					<th scope="col">Price</th>
					<th scope="col">Ext. Price</th>
				</tr>
			</thead><tbody>
				<tr>
					<th scope="row">
						Row Description Here as TEXT unless you are REALLY
						sure the user is going to edit this at some point
					</th>
					<td class="checkbox">
						<input
							type="checkbox"
							id="selected_1" name="selected[1]"
						/>
					</td><td>
						<input
							type="text"
							id="quantity1" name="quantity[1]"
							size="10" maxlength="10"
						/>
					</td><td>
						<input
							type="text"
							id="price_1" name="price[1]"
							size="10" maxlength="10"
							readonly="readOnly"
						/>
					</td><td>
						<input
							type="text"
							id="priceExt_1" name="priceExt[1]"
							size="10" maxlength="10"
							readonly="readOnly"
						/>
					</td>
				</tr>
			</tbody>
		</table>

Code (markup):

Is what probably should be there for markup.

I'll dig into your .zip file to have a look at what your scripting is doing, to see if I can answer the rest of your question later. Assuming you're able to add your elements using the DOM and have ID's and maintain a proper pointer table when you generate them (instead of say, crapping out innerHTML...) changing atttributes like readonly or classes on elements shouldn't be a big deal -- and a class swap is what you should be doing on them for states like readonly since generally it's a bad idea to go manipulating CSS or style values from the scripting. (since if you reskin you'll have to dig into the scripting later -- futureproofing is good!)