CODEWITHSUNDEEP
jquery
Hector Barbossa
Hector Barbossa

Reputation: 5528

Jquery change ids of child element

I want the tds (textboxes) to have unique id's, so that I can get the values entered in those textboxes. How do I give the textboxes unique ids and get the values entered in these textboxes?

Here is my code:

<html>
<head>

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<style type="text/css">
    div{
        padding:4px;
    }
</style>

</head>

<body>


<script type="text/javascript">

$(document).ready(
    function(){
    var counter = 2;
        $('a.add').live('click',
            function(){
                if(counter>5){
                    alert("Only 5 textboxes allowed");
                    return false;
                }   
            $(this)
                 .closest('tr')
                 .clone()
                 .appendTo('table');
            $(this)
                 .text('Remove')
                 .removeClass('add')
                 .addClass('remove');
            counter++;
            });
        $('a.remove').live('click',
            function(){
                $(this)
                    .closest('tr')
                    .remove();
                    counter--;
            });
        $('input:text').each(
            function(){
                var thisName = $(this).attr('name'),
                    thisRrow = $(this)
                                .closest('tr')
                                .index();
                //$(this).attr('name', 'row' + thisRow + thisName);
               // $(this).attr('id', 'row' + thisRow + thisName);
            });
     $("#getButtonValue").click(function () {
        var msg = '';
        for(i=1; i<counter; i++){
            msg += $('').val();
        }
              alert(msg);
        });
    });
</script>
</head><body>

<table>
    <tr>
        <th>Min Value</th>
        <th>Max Value</th>
    </tr>
    <tr>
        <td><input type="text" name="col1" id="col1" /></td>
        <td><input type="text" name="col2" id="col2" /></td>
        <td><a href="#" class="add">Add</a></td>
    </tr>
    <tr><input type='button' value='Get TextBox Value' id='getButtonValue'></tr>
</table>
</body>
</html>

Upvotes: 0

Views: 1887

Answers (3)

El Ronnoco
El Ronnoco

Reputation: 11912

Use this when you create the new row...

        var newRow = 
            $(this)
                 .closest('tr')
                 .clone()
                 .appendTo('table');
        var i=1;
        $('input',newRow).each(function(){
            $(this)[0].id="Col"+counter+"_"+(i++)}
        );

Upvotes: 1

bluish
bluish

Reputation: 27408

When you add a new row you have to assign the ids to its textboxes:

var i=0;
$(this)
    .closest('tr')
    .clone()
    .appendTo('table')
    .children()
    .each(function(){
        $(this)[i].id="textbox" + counter + (i++)}

I have chosen an id with the first number identifying the row and the second the column.

Upvotes: 1

El Ronnoco
El Ronnoco

Reputation: 11912

To give each of your <input> boxes in the page unique ids use:

        var i=0;
        $('input').each(function(){
            $(this)[0].id="TextBox"+(i++)}
        );

This will give them ids of TextBox0, TextBox1 etc...

However I notice that in your HTML posted all your input boxes already have unique ids. Are you or do you plan to add more dynamically at runtime?

Upvotes: 0

Related Questions