Well, I just tried to get a starting point for the js file:
$(document).ready(function() {
var char_count = $("input").val;
var position = $("input:focus").parent().eq();
var price =
$("input:focus").parent().parent().children("pricing").
("td").eq(position).("span.price").text();
var result = char_count*price;
});
First step: char_count is defined - it's the value of the input field.
Since all input fields are empty, this value is set as soon as someone
starts typing a number into one of the input fields, right?
Second step: Get the position of the input field in use - is this
possible at all with "input:focus"? ;)
Third step: Get the price - traversing up from input to td to tr
(missing a step here perhaps, traverse up to table?) then to
tr.pricing down to td with the exact position of the input field cell
down to the span.price in this cell to fetch the text inside it. This
should be transformed from text to a value for calculation, right?
Fourth step: Get the final result by calculating the input value with
the price.
Missing: Replace the 0,00 € in span.result with the calculated result.
Is this in any way right? Or at least a good starting point?
Thanks,
Markus
On 9 Sep., 15:46, Jayzon <[EMAIL PROTECTED]> wrote:
> Hi Karl,
>
> I'm not sure if you missed them, but I placed the input fields inside
> the table, they are in tr.calc (the second row in the html in my first
> post). It's just an <input /> tag. That input field would then be a
> nice starting point, because it's placed directly under the span
> including the price & in the same cell as the span to be modified.
>
> Greetings,
>
> Markus
>
> On Sep 9, 2:23 pm, Karl Swedberg <[EMAIL PROTECTED]> wrote:
>
> > Hi Markus,
>
> > Can you show us just a bit more of the HTML? It would help a great
> > deal if we could see where the input field is in relation to the spans
> > that you want to modify.
>
> > --Karl
>
> > ____________
> > Karl Swedbergwww.englishrules.comwww.learningjquery.com
>
> > On Sep 8, 2008, at 4:38 PM, Jayzon wrote:
>
> > > Hi!
>
> > > I've got a table with multiple rows which I'd like to traverse in a
> > > special way - here's the html (for better reading, I just included two
> > > rows, these rows are duplicated with different values):
>
> > > <tbody>
> > > <tr class="pricing">
> > > <td>Example A</td>
> > > <td><span class="price">1,20</span> €</td>
> > > <td><span class="price">2,40</span> €</td>
> > > </tr>
> > > <tr class="calc">
> > > <td>Calculator</td>
> > > <td><input /><span class="result">0,00</span> €</td>
> > > <td><input /><span class="result">0,00</span> €</td>
> > > </tr>
> > > </tbody>
>
> > > What I'd like to do: If an input filed is focussed, a price should be
> > > calculated. To keep the script as efficient as possible, I want to
> > > travel up from the input field to the cell above it (i.e. one row up,
> > > second or third cell in that row). My problem is: How can I traverse
> > > the DOM in this way?
>
> > > I imagine the following: The script should "know" where the starting
> > > point was (second or third cell in row) and then get the corresponding
> > > cell. I'm sure this is possible, but I have no idea how to achieve it.
>
> > > If I get the DOM traversing right, I want to get the value of
> > > span.price to calculate the input with it & update the result in -
> > > yes, span.result ;-)
>
> > > I'm sure this is a pretty easy thing to achieve for people how know
> > > jQuery well - I unfortunately don't (yet!). Could someone please
> > > explain this?
>
> > > Thanks for your effort!
>
> > > Markus- Hide quoted text -
>
> > - Show quoted text -
