jquery onclick load a tr

Question

I want to achieve the following functionality using jQuery: I have a tr which has to be repeated when + is clicked and from next tr onwards but + and - options should be available. Further to that, when the form is submitted I want to keep a record of all the <tr> and the data.

<div class="clear clearfix table-eform" id="mandatoryConditions">
  <table class="zytbl txDetGrid">
    <tbody>
      <tr class="tophead">
        <td class="bld">
          <?php echo lang( 'LBL_MANDATORY')?>
        </td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr class="mandatoryCondition">
        <td>
          <div class="frmInpt">
            <select name="selRulelhsCondition" id="selRulelhsCondition" class="text frmEle">
              <option value="">
                <?php echo lang( 'LBL_SELECT')?>
              </option>
              <option value="1">
                <div>Status</div>
              </option>
            </select>
          </div>
        </td>
        <td>
          <div class="frmInpt">
            <select name="selRuleOperandCondition" id="selRuleOperandCondition" class="text frmEle">
              <option value="">
                <?php echo lang( 'LBL_SELECT')?>
              </option>
              <option value="1">
                <div>Is equal to</div>
              </option>
              <option value="1">
                <div>Is not equal to</div>
              </option>
            </select>
          </div>
        </td>
        <td>
          <div class="frmInpt">
            <select name="selRulerhsCondition" id="selRulerhsCondition" class="text frmEle">
              <option value="">
                <?php echo lang( 'LBL_SELECT')?>
              </option>
              <option value="1">
                <div>Inactive</div>
              </option>
              <option value="1">
                <div>Pending</div>
              </option>
              <option value="1">
                <div>Complete</div>
              </option>
            </select>
          </div>
        </td>
        <td class="actTd action actions">
          <a href="#" class="icon add actButtons dev_addMandatCondition" title="Add Mandatory Condition" onClick="addConditions();"></a>
          <a href="#" class="icon remove actButtons dev_removeMandatCondition" title="Remove Mandatory Condition" style="display: none"></a>
        </td>
      </tr>
    </tbody>
  </table>
</div>

http://stackoverflow.com/questions/32578062/repeat-row-when-clicked-on-add-button I tried this....but didn't work — Nikita Dhiman, Feb 10 '17 at 09:19
It is beyond me why people down vote questions like this. The person who asked the question has a question relevant to this forum, there is code present and it is clear what the person asks for. Sure, it can be improved. But the purpose of this forum is to help people. Not step on them when they make an effort to seek help. — Reality-Torrent, Feb 10 '17 at 09:23
@Reality-Torrent this is a bad question. I'd suggest you and the OP read the [How to Ask](http://stackoverflow.com/help/how-to-ask) guide along with [What types of questions should I ask](http://stackoverflow.com/help/dont-ask) — Rory McCrossan, Feb 10 '17 at 09:24
@RoryMcCrossan , I have already tried answers to similar questions and my requirements are different from those mentioned in those questions...hence I felt the need to ask the question — Nikita Dhiman, Feb 10 '17 at 09:26
@NikitaDhiman in which case please show the code you wrote which didn't work. We're here to debug code and guide you on the mistakes that were made. Simply spoonfeeding answers helps no one in the long term. — Rory McCrossan, Feb 10 '17 at 09:26
Rory is right, you have to show your code effort so that some one can help. — Mayank Pandeyz, Feb 10 '17 at 09:27

score 1 · Answer 1 · edited Feb 10 '17 at 09:44

Try this and comment: table class name is copycontainer1,tr class name is copycontainerinner1 .

Too Add new row:

$(".btnAddMore1").click(function(){
    var elem=$(this).parents('.copycontainer1').find("select, textarea, input");

    var container=$(this).parents('.copycontainer1');

    var frmval=elem.serialize();

    var noOfLocation=$('.copycontainerinner1').length;

    var html='';

    var $row=$(".copycontainer1").append($(".copycontainerinner1:eq(0)").clone(true));
    var dealLean=$(".copycontainerinner1").length;

    var oneUp=dealLean-1;

    var html='<a href="javascript:;" class="removecustomsuit" style="position:right:8px;">-</a>';

    $(".copycontainerinner1:eq("+oneUp+") td:last-child").append(html);
    $(".copycontainerinner1:eq("+oneUp+") input[type=text],.copycontainerinner1:eq("+oneUp+") select").val('');
    $(".copycontainerinner1:eq("+oneUp+") span").text('');
    $(".copycontainerinner1:eq("+oneUp+") input[type=checkbox]").attr('checked',false);
});

To remove tr

$('.removecustomsuit').live('click',function(){
    $(this).parents('.copycontainerinner1').remove();
});

Try this you may perform the task

Can you please format the answer correctly, it is difficult to read this. Thanks for the answer, I'll try it — Nikita Dhiman, Feb 10 '17 at 09:32

jquery onclick load a tr

1 Answers1