CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Laurie
Laurie

Reputation: 1229

Change name of input within specific table row

I'm using a function which I've adapted to clone table rows when a certain button is clicked (see this fiddle), and assign the new row an incremented ID (i.e. table-rows-1 to table-rows-2). After creating a new row, I want a function I'm making to find an input in a td in this row and change its name from input-text-1 to input-text-2. I'm not very confident with Javascript, and am having trouble accessing the input element within the row. Heres an example:

<table>
    <tbody>
        <tr class="modal-rows" id="table-rows-1">
            <td>
                <input type="text" class="input-text" name="input-text-1">
            </td>
        </tr>
        <tr class="modal-rows" id="table-rows-2">   <<< DUPLICATED ROW WITH INCREMENT ID
            <td>
                <input type="text" class="input-text" name="input-text-1">
            </td>
        </tr>
    </tbody>
</table>

How can I access the inner inputs of this table in order to change their name? Heres what I've tried:

var rowNum = document.getElementsByClassName("modal-rows").length

$('#table-rows-' + rowNum + ' .input-text').attr('name', 'input-text-' + rowNum);
$('#table-rows-' + rowNum).find('.input-text').attr('name', 'input-text-' + rowNum);
$('#table-rows-' + rowNum).children('.input-text').attr('name', 'input-text-' + rowNum);

Can anyone let me know where I'm going wrong?

Upvotes: 0

Views: 425

Answers (1)

Neelam
Neelam

Reputation: 174

You can use below code inside your duplicate function: clone.children[0].setAttribute('name', 'input-text'+ ++i)

Upvotes: 1

Related Questions