Question

So I want to be able to fetch a number from a table cell and multiply it by an input on focusout, however the selector is grabbing all the table cells with the name front in the front. here is the code:

jquery

$(document).ready(function(){
    $(".percent").focusout(function(){
        var val2 = $(this).val();
        if (val2==="") {
            val2=0;
        }
        var crew2 = $(this).attr("name"),
            front = $(".front, td[name='front"+crew2+"']").text();
        console.log(crew2);
        console.log(front);
    });
});

html:

<tr>
    <td class='front' name='frontI210'>$176.00</td>
    <td><input type='text' class='percent' name='I210' style='' size='4' /></td>
    <td>=</td>
    <td class='total' id='I210'></td>
</tr>
<tr>
    <td class='front' name='frontI250'>$225.00</td>
    <td><input type='text' class='percent' name='I250' style='' size='4' /></td>
    <td>=</td>
    <td class='total' id='I250'></td>
</tr>

and console.log(front) is returning all the text of fronti210 and fronti250 as such:

$176.00$225.00

I want to only receive the information from the table cell that matches the input field name i just finished with, how do i do that?

Answer 1

$(".front, td[name='front"+crew2+"']") searchers for all elements with class front as well as all td elements with the name frontXXX. The comma is the multiple selector ^[docs].

Either only search for td elements with that name:

var front = $("td[name='front"+crew2+"']").text();

or use DOM traversal:

var front = $(this).closest('tr').children('.front').text();