Javascript calculate total
-
28-05-2021 - |
Pregunta
I have this code :
When i add a table : http://jsfiddle.net/VAkLn/7/ this stop working. Why?
Solved:
I change This: price = self.next(".price"), To: price = $(".price"),
Solución
The reason your first example works is because tr
and td
elements are only valid in a table
element. The browser effectively strips out those invalid tags in the DOM which leaves you with a structure similar to:
<body>
<input type="input" size="3" class="qta">
<input type="input" size="7" class="price">
TOTALE: <input type="input" id="total" size="7" ;="">
</body>
Check it out in Firebug or Webkit Inspector.
The next()
selector works here because input.price
is the immediately following sibling of each element in the set of matched elements.
As soon as you include a wrapping table
element, the tr
and td
elements are valid in the structure and get placed in the DOM as you would expect:
<body>
<table width="520" border="0" align="center" cellpadding="3" cellspacing="0">
<tbody>
<tr>
<td width="40" bgcolor="#009966" class="whyte">
<input type="input" size="3" class="qta">
</td>
<td width="100" bgcolor="#009966" class="whyte">
<input type="input" size="7" class="price">
</td>
</tr>
</tbody>
</table>
TOTALE: <input type="input" id="total" size="7" ;="">
</body>
This breaks the next()
selector because input.price
is no longer the immediately following sibling of each element in the set of matched elements.
The solution is to modify your jQuery selector for input.price
to navigate the new structure:
price = self.parents('tr').find(".price"),
Updated your fiddle.
Otros consejos
The .next() selector only works for siblings in the current element. Not sure why it was working in your first example...
I forked your fiddle (http://jsfiddle.net/vansimke/n3W4F/) and added some navigation to go up to the parent tag, move to the next, and then find the ".price" element inside. See if it does what you want.
The next function only looks at the immediately sibling. Since each input is enclose in a td tag, they have no immediate siblings, so the
self.next(".price")
selector returns nothing. You could use something like
self.parents('tr').find(".price").
I'm less sure why the first snippet works. If you inspect the parents of the self variable (self.parents().foreach(...)), the parents are HTML -> BODY -> INPUT. I'm guessing that because the TR / TD are not enclosed in a TABLE element the input tags are made children of BODY instead? Someone else might have a better explanation for that behavior.