Question

下面的代码可以很好地将一行html表中的行附加到其他表。但我想动态添加按钮以附加行。

$('#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');
        });
    }
}
 });

工作示例位于以下链接。

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

Answer 1

不确定这是否是您想要的，但您可以查看此脚本。我在新表的操作列中添加了“添加”按钮。

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');
            }
        });        
      }

    }
  });
});

这是Fiddle

如果这是您想要的输出，请告诉我？

更新

还原它。

$(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);
  });
});

这是Fiddle

更新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

你应该使用Jquery，它比纯javascript更容易使用（我想是这样）：

    <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

您的问题不是那么清楚，所以我假设您要添加一个允许添加新行的按钮，然后添加另一个按钮以将其附加到下一个表格。

我就这样做了：

<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>

我为该行添加了一个隐藏的模板，并添加了一个名为“New Row”的新按钮： <a class="newRow form-control" href="#">New row</a>

以下代码从模板中添加新行，并在按钮单击时将其移至下一个表：

$(".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();
  });

添加的CSS仅包含以下内容：

.templatetbl {
  display: none;
}

.template {
  display: none;
}

ordered catagorical

动态添加按钮到行上的html表附加到其他表

3 个答案:

HTML

JS

更新

更新2