Цикл по строкам таблицы добавьте уникальный номер ко всем атрибутам имени входного поля

Я не слишком знаком с jquery, учусь на работе, я думаю.

У меня есть этот стол:

<table id="Table">

<tr><th>First Col</th><th>Second Col</th><th>Third Col</th></tr>
<tr>
    <td><input name="name_7" value="3" type="text"></td>
    <td><input name="age_7" value="3" type="text"></td>
    <td><input name="town_7" value="3" type="text"></td>
</tr>

<tr>
    <td><input name="name_9" value="4" type="text"></td>
    <td><input name="age_9" value="4" type="text"></td>
    <td><input name="town_9" value="4" type="text"></td>
</tr>

<tr>
    <td><input name="name_11" value="5" type="text"></td>
    <td><input name="age_11" value="5" type="text"></td>
    <td><input name="town_11" value="5" type="text"></td>
</tr>

</table>

при загрузке страницы мне нужно пройти через каждую строку таблицы и изменить добавленный номер на каждом имени ввода, чтобы новая таблица выглядела так:

<table id="Table">

<tr><th>First Col</th><th>Second Col</th><th>Third Col</th></tr>
<tr>
    <td><input name="name_1" value="3" type="text"></td>
    <td><input name="age_1" value="3" type="text"></td>
    <td><input name="town_1" value="3" type="text"></td>
</tr>

<tr>
    <td><input name="name_2" value="4" type="text"></td>
    <td><input name="age_2" value="4" type="text"></td>
    <td><input name="town_2" value="4" type="text"></td>
</tr>

<tr>
    <td><input name="name_3" value="5" type="text"></td>
    <td><input name="age_3" value="5" type="text"></td>
    <td><input name="town_3" value="5" type="text"></td>
</tr>

</table>

просто, чтобы помочь, насколько я могу, я нашел этот код, который хорошо работает с переименованием атрибута name

this.name = this.name.replace(/d+/, counter + 1);

Я использую его похожим образом, но для другой цели

как всегда любая помощь будет более чем ценится

3 ответа

  1. Итерация по строкам и изменение имен ячеек на основе индекса в итерации

    $('#Table tr:not(:has(th))').each(function(index, row) {
        $(row).find('td input').attr('name', function(i, n) {
            return n.split('_').shift() + '_' + (index + 1);
        });
    });
    
  2. это сработало для меня..

    $(document).ready(function(){
    
        var cnt = 1;
    
        $("#Table").find("tr").each(function() {
    
    
            $(this).find("input").each(function() {
    
                   this.name = this.name.replace(/\d+/, cnt);
    
               });
    
            cnt = cnt + 1;
        });
    
        });
    

    есть ли какой-то способ улучшить это?

    любые ответы ценятся

  3. Можно использовать .each()параметр индекса функции вместо создания переменной счетчика:

    $('#Table').find('tr').each(function(ndx, row){
        $(row).find('input').each(function(){
            var name = $(this).attr('name');
            $(this).attr('name', name.replace(/\d+/, ndx));
        });
    });