jquery, find next element by class in table when rows dynamically created

Question

I build a table dynamically in js where each row has same elements

         - input | input | **select** | **text** | **text** | **select**
Event 1  - input | input | **select** | **text** | **text** | **select** 
         - input | input | **select** | **text** | **text** | **select**  

Event 2     ...     ...       ....        ...        ...         ...

  ...

Event 10    ...     ...       ....        ...        ...         ...

As you can see the select has a class="place" for all 3 'td's When I select a value I want it to update just the NEXT text and not all the text elements.

$("select.place").change(function () {
    $('.place').parent('td').next('#score').text("val")
});

This is updating all the text fileds with the val

I am generating the rows like this and appending them to a table :

            '<td> ' +
            '<select class="place"> ' +
            '<option value="1">1</option> ' +
            '<option value="2">2</option>' +
            '<option value="3">3</option>' +
            '</select>' +
            '</td>' +
            '<td id="score"></td>' +
            '<td id="score"></td>' +
            '<td>' +
            '<select class="place"> ' +
            '<option value="1">1</option>' +
            '<option value="2">2</option>' +
            '<option value="3">3</option>' +
            '</select>'

As you can see, I am not setting id's only class

I am not sure what the best way is to set the value after "select" and then conversely set the value before the second "select" per row.

Any help/ideas would be most welcomed.

Code for select change:

 $("select.place").change(function () {
    switch (parseInt($('select.place').val())) {
        case 1:
            $(this).parent('td').next('#score').text("10");
            break;
        case 2:
            $(this).parent('td').next('#score').text("8");
            break;
        case 3:
            $(this).parent('td').next('#score').text("6");
            break;
        default:
            $('select.place').val() == "0"
    }
});

CODE to loop through table to get values from objects

$("input:button").click(function () {

    var values;


    values = "";
    $("table tr").each(function () {

        $(this).find("td").filter(':visible').each(function (index) {
         if(index =5)
         {
            if ($(this).find("text").val() != undefined)
                values += $(this).find("text").val() + ";";
            if ($(this).find("label").text() != undefined)
                values += $(this).find("label").text() + ";";

             if ($(this).find("input").text() != undefined)
                values += $(this).find("input").text() + ";";

             if ($(this).find("select option:selected").text() != "")
                values += $(this).find("select option:selected").text() + ";";


        }
        });
    });

    values = values.replace(/\;;/g, ";");
    console.log(values)

});

James · Accepted Answer · 2015-10-22 15:59:39Z

1

In your change function you have a jquery selector that picks all elements with class="place" and applies the text to them. Keep in mind that within most event handlers this refers to the html element that was activated. So:

$("select.place").change(function () {
    $(this).parent('td').next('#score').text("val");
});

answered Oct 22, 2015 at 15:59

James

22.4k5 gold badges30 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

motti10 Over a year ago

James I have my change function like this:

motti10 Over a year ago

$("select.place").change(function () { switch (parseInt($('select.place').val())) { case 1: $(this).parent('td').next('#score').text("10"); break; case 2: $(this).parent('td').next('#score').text("8"); break; case 3: $(this).parent('td').next('#score').text("6"); break; default: $('select.place').val() == "0" } });

motti10 Over a year ago

When I click in the second row, it adds the same val to "score" as the line above it. How can I "reset" the value?

motti10 Over a year ago

I added the code to the original post to make it formatted better

James Over a year ago

In your change function you still use $('select.place') in a some places rather than $(this). I don't know what you mean about resetting a value - seems unrelated to this problem.

|

Collectives™ on Stack Overflow

jquery, find next element by class in table when rows dynamically created

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related