单击href时添加额外的html表行

Question

我想创建一个href，当点击时，它会添加另一个<tr>行。完全相同的行，如下面的<tr class="new-row">。我使用php smarty。

我怎样才能做到这一点？

CODE：

<div class="control-page-header">
<div class="row">
<div class="container">

{include file="$template/pageheader.tpl" title="DNS-beheer"|cat:' '|cat:$domain}

</div>
</div>
</div>

<div class="row">
<div class="container">
<p>
<form method="post" action="{$smarty.server.PHP_SELF}?action=domaindetails">
<input type="hidden" name="id" value="{$domainid}" />
</form>
</p>
{if $error}
<div class="alert alert-danger">
    {$error}
</div>
{/if}
{if $external}
<p>{$code}</p>
{else}
<form class="form-horizontal" method="post" action="{$smarty.server.PHP_SELF}?action=domaindns">
<input type="hidden" name="sub" value="save" />
<input type="hidden" name="domainid" value="{$domainid}" />
<div class="row">
<div class="col-lg-12">

{include file="$template/includes/tablelist.tpl" tableName="DomainsList" startOrderCol="1" filterColumn="0"}

<table class="table table-condensed" id="tableDomainsList">
    <thead>
        <tr>
            <th class="textcenter">Naam</th>
            <th class="textcenter">Type</th>
            <th class="textcenter">Waarde</th>
            <th class="textcenter">{$LANG.domaindnspriority} *</th>
        </tr>
    </thead>
    <tbody>
{foreach from=$dnsrecords item=dnsrecord}
        <tr>
            <td><input type="hidden" name="dnsrecid[]" value="{$dnsrecord.recid}" /><input type="text" name="dnsrecordhost[]" value="{$dnsrecord.hostname}" class="form-control input-sm" /></td>
            <td><select class="form-control input-sm" name="dnsrecordtype[]">
<option value="A"{if $dnsrecord.type eq "A"} selected="selected"{/if}>A (Address)</option>
<option value="AAAA"{if $dnsrecord.type eq "AAAA"} selected="selected"{/if}>AAAA (Address)</option>
<option value="MXE"{if $dnsrecord.type eq "MXE"} selected="selected"{/if}>MXE (Mail Easy)</option>
<option value="MX"{if $dnsrecord.type eq "MX"} selected="selected"{/if}>MX (Mail)</option>
<option value="CNAME"{if $dnsrecord.type eq "CNAME"} selected="selected"{/if}>CNAME (Alias)</option>
<option value="TXT"{if $dnsrecord.type eq "TXT"} selected="selected"{/if}>SPF (txt)</option>
<option value="URL"{if $dnsrecord.type eq "URL"} selected="selected"{/if}>URL Redirect</option>
<option value="FRAME"{if $dnsrecord.type eq "FRAME"} selected="selected"{/if}>URL Frame</option>
</select></td>
            <td><input type="text" name="dnsrecordaddress[]" value="{$dnsrecord.address}" class="form-control input-sm" /></td>
            <td>{if $dnsrecord.type eq "MX"}<input type="text" name="dnsrecordpriority[]" value="{$dnsrecord.priority}" class="form-control input-sm" />{else}<input type="hidden" name="dnsrecordpriority[]" value="N/A" />{/if}</td>
            <td><a class="remove" id="removeRow" href=''>X</td>
        </tr>
{/foreach}
        <tr>
            <td><input type="text" name="dnsrecordhost[]" class="form-control input-sm" /></td>
            <td><select name="dnsrecordtype[]" class="form-control input-sm">
<option value="A">A (Address)</option>
<option value="AAAA">AAAA (Address)</option>
<option value="MXE">MXE (Mail Easy)</option>
<option value="MX">MX (Mail)</option>
<option value="CNAME">CNAME (Alias)</option>
<option value="TXT">SPF (txt)</option>
<option value="URL">URL Redirect</option>
<option value="FRAME">URL Frame</option>
</select></td>
            <td><input type="text" name="dnsrecordaddress[]" class="form-control input-sm" /></td>
            <td><input type="text" name="dnsrecordpriority[]" class="form-control input-sm" /></td>
            <td><a class="addrow" id="addRow" href='' onclick='return false;'>+</a></td>
        </tr>
    </tbody>
</table>
</div>
</div>
<div class="button-row-domains-dns right">
<div class="text-right">
<input type="submit" value="{$LANG.clientareasavechanges}" class="btn btn-primary" />
</div>
</div>
</form>
{/if}
<div class="button-row-domains-dns">
<div class="text-left">
<form method="post" action="{$smarty.server.PHP_SELF}?action=domaindetails">
<input type="hidden" name="id" value="{$domainid}" />
<input type="submit" value="Terug naar domein" class="btn btn-default" />
</form>
</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
//when document is ready
$(function(){
  $('a#addRow').on('click',function(){

    var newTr=$('table#tableDomainsList tr:last').clone();//create clone
    newTr.addClass("new-row");//add class new-tr as You wanted
    $('table#tableDomainsList tbody').append(newTr);//append clone

  });
    //remove row
  $('a#removeRow').on("click",function(){

     if ($('table#tableDomainsList tbody tr').length>1)//be sure that is more then one
     $('table#tableDomainsList tbody').find("tr:last").remove();//remove last tr
  });
});
</script>

</div>
</div>

Answer 1

＆＃13;

＆＃13;

//when document is ready
$(function(){
  
  //add row
  $('a#addRow').on('click',function(){
    
    var newTr=$('table#rows tr:last').clone();//create clone
    newTr.addClass("new-row");//add class new-tr as You wanted
    $('table#rows tbody').append(newTr);//append clone

  });

  //remove last row button
  $('a#removeRow').on("click",function(){

     if ($('table#rows tbody tr').length>1)//be sure that is more then one
     $('table#rows tbody').find("tr:last").remove();//remove last tr
  });

  //remove current row ( X in row )
  $('table#rows tbody').on("click",function(e){

     if ($(e.target).hasClass('removeCurrentRow') && $('table#rows tbody tr').length>1)//if this is a element and we have more then 1 rows
     $(e.target).parent().parent().remove();//go to parent - parent (tr) and remove         

  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="rows">
<tbody>
        <tr>
            <td><input type="text" name="dnsrecordhost[]" class="form-control input-sm" /></td>
            <td><select name="dnsrecordtype[]" class="form-control input-sm">
<option value="A">A (Address)</option>
<option value="AAAA">AAAA (Address)</option>
<option value="MXE">MXE (Mail Easy)</option>
<option value="MX">MX (Mail)</option>
<option value="CNAME">CNAME (Alias)</option>
<option value="TXT">SPF (txt)</option>
<option value="URL">URL Redirect</option>
<option value="FRAME">URL Frame</option>
</select></td>
            <td><input type="text" name="dnsrecordaddress[]" class="form-control input-sm" /></td>
            <td><input type="text" name="dnsrecordpriority[]" class="form-control input-sm" /></td>
      <td><a class="removeCurrentRow" href='' onclick="return false">X</a></td>
        </tr>
    </tbody>
</table>

<a id="addRow" href='' onclick='return false;'>Add Row</a>
<a id="removeRow" href='' onclick='return false;'>Remove Row</a>

＆＃13;

＆＃13;

＆＃13;

代码说明：

$('a#addRow') - 链接的选择器，添加一些属性作为类或id，这个选择器只是示例

$('table#rows tbody') - 我们要添加的元素的选择器 - 我建议添加一些属性，如class或id，以确保它与该表没有区别

append - 将元素追加为最后一个孩子

$('table#rows tr:last').clone() - 克隆最后一个tr元素，再次添加一些属性并更改选择器以使其更加准确，这将是理想的表元素

Answer 2

使用以下代码：

＆＃13;

＆＃13;

$('.addRow').click(function(){
	$('table tbody tr:last-child').after($('table tbody tr:first-child').clone())
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table>
<tbody>
        <tr class="row">
            <td><input type="text" name="dnsrecordhost[]" class="form-control input-sm" /></td>
            <td><select name="dnsrecordtype[]" class="form-control input-sm">
<option value="A">A (Address)</option>
<option value="AAAA">AAAA (Address)</option>
<option value="MXE">MXE (Mail Easy)</option>
<option value="MX">MX (Mail)</option>
<option value="CNAME">CNAME (Alias)</option>
<option value="TXT">SPF (txt)</option>
<option value="URL">URL Redirect</option>
<option value="FRAME">URL Frame</option>
</select></td>
            <td><input type="text" name="dnsrecordaddress[]" class="form-control input-sm" /></td>
            <td><input type="text" name="dnsrecordpriority[]" class="form-control input-sm" /></td>
        </tr>
    </tbody>
</table>
<a href='' class='addRow' onclick='return false;'>Add Row</a>

＆＃13;

＆＃13;

＆＃13;

Answer 3

＆＃13;

＆＃13;

$(function(){

  var $newRow=$('tr#newRow');//reference to last row with adding
  var $tBody=$("table#tableDomainsList tbody");
  
  $('a#addRow').on('click',function(){
  
    var newRow=$newRow.clone();//clone new row
    newRow.removeAttr("id");//clean id
    newRow.find('td:last').html("<a class='removerow'>X</a");//change last row to removing link
    
    $newRow.before(newRow);
   
    //clear inputs
    $newRow.find('input').val("");
    
  });
  
  $tBody.on("click",function(e){
  
     e.preventDefault();
    
     if ($(e.target).hasClass("removerow")){
        
         $(e.target).parent().parent().remove();//remove tr
     }
    
  });
  

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-condensed" id="tableDomainsList">
    <thead>
        <tr>
            <th class="textcenter">Naam</th>
            <th class="textcenter">Type</th>
            <th class="textcenter">Waarde</th>
            <th class="textcenter">PRIORYTY*</th>
        </tr>
    </thead>
    <tbody>
      <!-- this are rows generated from php -->
        <tr>
            <td><input type="text" name="dnsrecordhost[]" class="form-control input-sm" /></td>
            <td><select name="dnsrecordtype[]" class="form-control input-sm">
<option value="A">A (Address)</option>
<option value="AAAA">AAAA (Address)</option>
<option value="MXE">MXE (Mail Easy)</option>
<option value="MX">MX (Mail)</option>
<option value="CNAME">CNAME (Alias)</option>
<option value="TXT">SPF (txt)</option>
<option value="URL">URL Redirect</option>
<option value="FRAME">URL Frame</option>
</select></td>
            <td><input type="text" name="dnsrecordaddress[]" class="form-control input-sm" /></td>
            <td><input type="text" name="dnsrecordpriority[]" class="form-control input-sm" /></td>
            <td><a class="removerow">X</a></td>
        </tr>
      <!-- this is new row -->
        <tr id="newRow">
            <td><input type="text" name="dnsrecordhost[]" class="form-control input-sm" /></td>
            <td><select name="dnsrecordtype[]" class="form-control input-sm">
<option value="A">A (Address)</option>
<option value="AAAA">AAAA (Address)</option>
<option value="MXE">MXE (Mail Easy)</option>
<option value="MX">MX (Mail)</option>
<option value="CNAME">CNAME (Alias)</option>
<option value="TXT">SPF (txt)</option>
<option value="URL">URL Redirect</option>
<option value="FRAME">URL Frame</option>
</select></td>
            <td><input type="text" name="dnsrecordaddress[]" class="form-control input-sm" /></td>
            <td><input type="text" name="dnsrecordpriority[]" class="form-control input-sm" /></td>
            <td><a class="addrow" id="addRow" href='' onclick='return false;'>+</a></td>
        </tr>
    </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;