Измените последний код таблицы на новый код после применения приложения - PullRequest
Новая
       10

Измените последний код таблицы на новый код после применения приложения

0 голосов
/ 13 мая 2018

По сути, мой код предназначен для нажатия кнопки «Добавить» и перемещения строки из таблицы table2 (id = second) в table1 (id = first).

Мой вопрос

Это последний тд из моего кода. 

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

Когда я нажимаю значок добавления, он меняется на 

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

Поэтому я хочу изменить / удалить <a href="#/" class="plusicon"></a> на другой код после применения приложения. Но я понятия не имею, как это сделать. Надеюсь, что некоторые из вас могли бы дать мне несколько советов. Спасибо! 

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

1 Ответ

0 голосов
/ 13 мая 2018

Вам следует попробовать заменить td:last-child из #first таблицы на newLinkText

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

А вот ваш обновленный 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()
   });
});

Надеюсь, это поможет.

...