Add button dynamically to html table on row append to other table

Question

Below code is working well to append row from one html table to other. But i want to add button dynamically to append row as well.

$('#rootwizard').bootstrapWizard({
   onTabShow: function(tab, navigation, index) {
    if (index == 1) {
        $('#tblPurchaseOrders').find('tr:has(td)').each(function() {
            if (parseInt(($(this).find('#Quantity')).val()) > 0)
                $(this).appendTo('#tbOrderDetail');
        });
    }
}
 });

working example is on below link.

http://jsfiddle.net/ali_soltani/x4k7yhye/17/

Answer 1

Not sure if this is what you want but you can check this script. I have added Add button in new table's action column.

HTML

<div id="rootwizard">
  <div class="navbar">
    <div class="navbar-inner">
      <div class="container">
        <ul>
          <li><a href="#details" data-toggle="tab">details</a></li>
          <li><a href="#captain" data-toggle="tab">captain</a></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="tab-content">
    <div class="tab-pane" id="details">
      <div class="row">
        <div class="col-sm-12">
          <h4 class="info-text">
            Let's start with the basic details.
          </h4>
        </div>
        <div class="form-horizontal">
          <div class="form-group">
            <div class="col-md-12">
              <div class="persons">
                <table class="table table-condensed table-hover" id="tblPurchaseOrders">
                  <tr>
                    <th>
                      Product Code
                    </th>
                    <th>
                      SKU
                    </th>
                    <th>
                      Product Name
                    </th>
                    <th>
                      Quantity
                    </th>
                  </tr>

                  <tr>
                    <td>
                      <input type="text" name="ProductCode" value="A" class="form-control" />
                    </td>
                    <td>
                      <input type="text" name="SKU" value="A1" class="form-control" />
                    </td>
                    <td>
                      <input type="text" name="Name1" value="A1" class="form-control" />
                    </td>
                    <td>
                      <input type="text" id="Quantity" value="0" class="form-control" />
                    </td>
                  </tr>


                  <tr>
                    <td>
                      <input type="text" name="ProductCode" value="B" class="form-control" />
                    </td>
                    <td>
                      <input type="text" name="SKU" value="B1" class="form-control" />
                    </td>
                    <td>
                      <input type="text" name="Name1" value="B1" class="form-control" />
                    </td>
                    <td>
                      <input type="text" id="Quantity" value="1" class="form-control" />
                    </td>
                  </tr>
                </table>
              </div>
            </div>
          </div>
          <hr />

        </div>
      </div>
    </div>
    <div class="tab-pane" id="captain">
      <div class="row">
        <div class="form-group">
          <div class="col-md-12">
            <table class="table table-condensed table-hover" id="tbOrderDetail">
              <tr>
                <th>
                  Product Code
                </th>
                <th>
                  SKU
                </th>
                <th>
                  Product Name
                </th>
                <th>
                  Quantity
                </th>
                <th>
                  Action
                </th>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
    <ul class="pager wizard">
      <li class="previous first" style="display:none;"><a href="#">First</a></li>
      <li class="previous"><a href="#">Previous</a></li>
      <li class="next last" style="display:none;"><a href="#">Last</a></li>
      <li class="next"><a href="#">Next</a></li>
    </ul>
  </div>
</div>
<div class="tab-content">

</div>

JS

$(document).ready(function() {
  $('#rootwizard').bootstrapWizard({
    onTabShow: function(tab, navigation, index) {

      if (index == 1) {
        $('#tblPurchaseOrders').find('tr:has(td)').each(function() {
          if (parseInt(($(this).find('#Quantity')).val()) > 0){
          $(this).append("<td><input type='button' class='btn' value='Add' /></td>");
            $(this).appendTo('#tbOrderDetail');
            }
        });        
      }

    }
  });
});

Here is a Fiddle

Let me know if that's your desired output?

Update

Revert it back.

$(document).ready(function() {
  $('#rootwizard').bootstrapWizard({
    onTabShow: function(tab, navigation, index) {

      if (index == 1) {
        $('#tblPurchaseOrders').find('tr:has(td)').each(function() {
          if (parseInt(($(this).find('#Quantity')).val()) > 0){
          $(this).append("<td><input type='button' class='btn revertButton' value='Revert' /></td>");
            $(this).appendTo('#tbOrderDetail');
            }
        });        
      }

    }
  });

  $(document).on("click",".revertButton",function(){
    var tr = $(this).parents("tr");
    tr.find(".revertButton").parents("td").remove();
    $("#tblPurchaseOrders").append(tr);
  });
});

Here is Fiddle

Update 2

$(document).ready(function() {
  $('#rootwizard').bootstrapWizard({
    onTabShow: function(tab, navigation, index) {

      if (index == 1) {
        $('#tblPurchaseOrders').find('tr:has(td)').each(function() {
          if (parseInt(($(this).find('#Quantity')).val()) > 0){
          $(this).append("<td><input type='button' class='btn revertButton' value='Revert' /></td>");
            $(this).appendTo('#tbOrderDetail');
            }
        });        
      }

    }
  });

  $(document).on("click",".revertButton",function(){
    var tr = $(this).parents("tr");
    tr.find(".revertButton").parents("td").remove();
    tr.find("#Quantity").val(0);
    $("#tblPurchaseOrders").append(tr);
  });
});

Fiddle

Answer 2

you should use Jquery, it is easy to use than pure javascript (i think so):

    <tr id="row1"><td>....</td>
<td><button class="clickme" row-tag="row1">Your button</button></td></tr>

    .....row2,row3....

    <script>
    $(document).ready(function(){
       $(document).on('click','.clickme',function(){
          var self = $(this);
          //get your <tr> by id:

          var yourtr = $("#"+self.attr("row-tag"));

          //do something with this tr

       })
    })
    </script>

Answer 3

Your questions is not so clear, so I assumed that you want to add a button that allows to add a new row, and then another button to append it to the next table.

This is how I did it:

<table class="templatetbl">
  <tr class="template">
    <td>
      <input type="text" name="ProductCode" value="A" class="form-control" />
    </td>
    <td>
      <input type="text" name="SKU" value="A1" class="form-control" />
    </td>
    <td>
      <input type="text" name="Name1" value="A1" class="form-control" />
    </td>
    <td>
      <input type="text" id="Quantity" value="0" class="form-control" />
    </td>
    <td>
      <input type="button" id="appendRow" value="Append row" class="form-control" />
    </td>
  </tr>
</table>

I added a hidden template for the row and added a new button called "New Row": <a class="newRow form-control" href="#">New row</a>

This following codes add the new row from template and move it to the next table on button click:

$(".newRow").click(function(e) {
    e.preventDefault();
    $(".template").clone(true, true).appendTo('#tblPurchaseOrders').show().removeClass("template");
  });

  $(".table").on("click", "#appendRow", function() {
    $(this).closest("tr").detach().appendTo("#tbOrderDetail").find("td").last().remove();
  });

The added CSS are only these:

.templatetbl {
  display: none;
}

.template {
  display: none;
}

Here is the JSFiddle demo