Henk Z Henk Z - 3 months ago 19
HTML Question

Add extra html table row on click a href

I want to create a href and when clicking, it add another

<tr>
row. Exactly the same row, as the
<tr class="new-row">
below. I use php smarty.

How can I achieve that?

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

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

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

Comments