Home/ Questions/Q 7184635
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T18:14:30+00:00

I am working on a form that user can add rows as he wants

  • 0

I am working on a form that user can add rows as he wants to. There is a link named “add row”, When it clicked, I want to clone a hidden table and change it’s name values, some of class names. could anyone help me about this?

<table class="montaj montaj-satir">
    <tr>
        <td width="62px"><input type="text" name="oper[--number--][kodu]" size="4" maxlength="4" /></td>
        <td width="38px">
            <input type="checkbox" name="oper[--number--][onay]" value="1" />
            <input type="hidden" name="oper[--number--][terminal_hatasi]" value="0" />
            <input type="hidden" name="oper[--number--][soket_hatasi]" value="0" />
            <input type="hidden" name="oper[--number--][montaj_hatasi]" value="0" />
            <input type="hidden" name="oper[--number--][yon_hatasi]" value="0" />
            <input type="hidden" name="oper[--number--][push_hatasi]" value="0" />
            <input type="hidden" name="oper[--number--][olcu_hatasi]" value="0" />
            <input type="hidden" name="oper[--number--][bant_hatasi]" value="0" />
            <input type="hidden" name="oper[--number--][vida_hatasi]" value="0" />
            <input type="hidden" name="oper[--number--][komponent_hatasi]" value="0" />
        </td>
        <td width="62px"><span class="terminal_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="terminal_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td>
        <td width="62px"><span class="soket_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="soket_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td>
        <td width="62px"><span class="montaj_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="montaj_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td>
        <td width="62px"><span class="yon_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="yon_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td>
        <td width="62px"><span class="push_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="push_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td>
        <td width="62px"><span class="olcu_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="olcu_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td>
        <td width="62px"><span class="bant_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="bant_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td>
        <td width="62px"><span class="vida_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="vida_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td>
        <td width="62px"><span class="komponent_hatasi--number--">0</span> <a href="#" class="add hata-ekle" id="komponent_hatasi--number--">&nbsp; &nbsp; &nbsp;</a></td>
    </tr>
    <tr>
        <td colspan="2">Kablo Sıra No</td>
        <td colspan="4"><input type="text" name="oper[--number--][kablo_sira_no]" value="" /></td>
        <td colspan="2">Açıklama</td>
        <td colspan="3"><input type="text" name="oper[--number--][aciklama]" value="" /></td>
    </tr>
</table>

the links that have .hata-ekle class, increasing the value of hidden input and the span next to it.

If there is needed for a new row, user should click “add row” link and new cloned .montaj table should appear but --number-- should be replaced with a unique number.

How can I do this?

Thanks…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    OK,

    I don’t understand the whole process but I can give you some pointers :

    1. First method : you write a function taking needed number in parameter and creating the table with jQuery utilities :

      function addTable(number) {
  var table = $('<table>');
  var tr = $('<tr>').appendTo(table);
  var td = $('<td>').appendTo(tr);
  var span = $('<span>').appendTo(td).addClass('terminal_hatasi'+number)
  ...
}

    2. Second method : you clone you table and then you search your input/span and retag it :

      function addTable(number) {
  var clone = $('table.montaj').first().clone();

  clone.find('input').each(function(item){
    var name = $(this).attr('name');
    $(this).attr('name',name.replace(/\d/,number));
  });

  ...

  $(body).append(clone);
}

    I think there is even more approach, these are the two came first to my mind. These are not necessarily the betters…

    • 0