CODEWITHSUNDEEP
javascriptjqueryhtml-tableappend
Evelyn
Evelyn

Reputation: 656

Change last td of table code to new code after apply appendto

Basically, my code is about click add button and move the row from table2(id=second) to table1(id=first).

My Question

This is the last td from my code.

<a href="#/" class="plusicon"><i class="fa fa-plus-circle"></i></a>

When I click add icon, it will change to 

<p><a href="#"><i class="fa fa-search lightgreytxt txt14"></i></a></p>
<p><a href="#/" class="minusicon removerow"><i class="fa fa-minus-circle"></i></a></p>

But what I get is something as shown below (refer my screenshot also) 

<a href="#/" class="plusicon">
    <p><a href="#"><i class="fa fa-search lightgreytxt txt14"></i></a></p>
    <p><a href="#/" class="minusicon removerow"><i class="fa fa-minus-circle"></i></a></p>
</a>

enter image description here

So I want to change/remove the <a href="#/" class="plusicon"></a> to another code after apply appendto. But I have no idea how to that. Hoping that some of you could provide me with some advice. Thanks!

$(function() {
   function moveRow(row, targetTable, newLinkText){
       $(row).appendTo(targetTable).addClass("tablerow").find("a").html(newLinkText);
   }
   
   $("#second a").on("click", function(){
       moveRow($(this).parents("tr"), $("#first"), "<p><a href='#'><i class='fa fa-search lightgreytxt txt14'></i></a></p><p><a href='#/' class='minusicon removerow'><i class='fa fa-minus-circle'></i></a></p>");
   });
   
   $(".removerow").click(function() {
        (this).closest('tr').remove()
    });
});
.plusicon{font-size: 18px; color: #75b653 !important; vertical-align:middle;}
.minusicon{font-size: 18px; color: #e77e3e !important; vertical-align:middle;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<table id="second"> 
  <tr>
    <td>1</td>
    <td>first value</td>
    <td><a href="#/" class="plusicon"><i class="fa fa-plus-circle"></i></a></td>
  </tr>
  <tr>
    <td>2</td>
    <td>second value</td>
    <td><a href="#/" class="plusicon"><i class="fa fa-plus-circle"></i></a></td>
  </tr>
  <tr>
    <td>3</td>
    <td>third value</td>
    <td><a href="#/" class="plusicon"><i class="fa fa-plus-circle"></i></a></td>
  </tr>
</table>

<hr/>

<table id="first">
  <tr>
    <td>1</td>
    <td>first value</td>
    <td>
      <p><a href="#"><i class="fa fa-search lightgreytxt txt14"></i></a></p>
      <p><a href="#/" class="minusicon removerow"><i class="fa fa-minus-circle"></i></a></p>
    </td>
  </tr>
</table>

Upvotes: 0

Views: 265

Answers (1)

Kishan Rajdev
Kishan Rajdev

Reputation: 1965

You should try replacing td:last-child of #first table with newLinkText

$(row).appendTo(targetTable).addClass("tablerow").find("td:last-child").html(newLinkText);

And here is your updated javascript,

$(function() {
   function moveRow(row, targetTable, newLinkText){
       $(row).appendTo(targetTable).addClass("tablerow").find("td:last-child").html(newLinkText);
   }

   $("#second a").on("click", function(){
       moveRow($(this).parents("tr"), $("#first"), "<p><a href='#'><i class='fa fa-search lightgreytxt txt14'></i></a></p><p><a href='#/' class='minusicon removerow'><i class='fa fa-minus-circle'></i></a></p>");
   });

   $('#first').on('click', '.removerow', function() {
     $(this).closest('tr').remove()
   });
});

Hope this helps.

Upvotes: 2

Related Questions