CODEWITHSUNDEEP
javascriptjqueryhtmlasp.net-mvchtml-table
leora
leora

Reputation: 196669

Is it possible to update the name of each checkbox in an html table using jquery

I have a html table where one of the columns is a set of checkboxes.

There are three checkboxes in each row. The original names of the checkboxes are:

Row 1: person[0].Choices (value=1 name= person[0].Choices value=2 person[0].Choices, etc. .)
Row 2: person[1].Choices(value=1 name= person[1].Choices value=2 person[1].Choices, etc . .)
Row 3: person[2].Choices(value=1 name= person[2].Choices value=2 person[2].Choices, etc . .)

I want to:

  1. Delete the first row of the html table.
  2. Rename all of the checkbox indexers so at the end of it, there are two left

Row 1: person[0].Choices (value=1 name= person[0].Choices value=2 person[0].Choices, etc. .)
Row 2: person[1].Choices(value=1 name= person[1].Choices value=2 person[1].Choices, etc . .)

but note that since the first row has been deleted what was checked in Row 2 before is now in Row 1 and what used to be in Row 3 is now in Row 2, etc.

Can this be done through jQuery or Javascript as I need them to be in consecutive order for the default asp.net MVC binding to work.

EDIT

I found an image that describes what my table looks like to hopefully clarify the point. http://weblogs.asp.net/blogs/psperanza/CheckboxGrid_6F9D4218.png

Upvotes: 0

Views: 165

Answers (3)

leora
leora

Reputation: 196669

i got it working through some other SO feedback and put the response below. If anyone thinks this can be optimized, please let me know . .

 <script type="text/javascript">

    $(document).ready(function() {

        $(".removeButtonQuestion").live("click", function(event) {

            debugger;

            var row = $(this).closest("tr").get(0).rowIndex;
            var col = $(this).closest("td").get(0).cellIndex;

            $(this).closest("tr").remove();

            var input = $("#questionsTable :checkbox");

            for (i = 0; i <= input.length; i++) {

                var checkbox = input[i];
                var row1 = $(checkbox).closest('tr').get(0);
                var rowIndex = row1.rowIndex;
                if (rowIndex >= row) {
                    var newRowIndex = rowIndex - 1;
                    $(checkbox).attr('name', 'updater.person[' + newRowIndex + '].Choices');
                }
            }
        });
    });
</script>

Upvotes: 0

Carson Myers
Carson Myers

Reputation: 38564

I believe you can just name them person[] and they will be indexed automatically when the form is submit.

As per your updated question, it seems like the simplest way would be to use the jQuery attribute manipulator mentioned in another answer. Still... It feels like there is a better way to do this.

As for the jQuery, you should add a class (like 'person') to each of the form elements, and then use this: (untested)

$('#person:first').remove()

Upvotes: 2

Erik
Erik

Reputation: 20722

I'm not sure I 100% understand your question, but you can change the name of elements pretty easily, or any other attribute like this:

$(selector).attr('name','new_input_name');

Upvotes: 0

Related Questions