javascriptjqueryfunctiondynamic

Match Same Text and Run Function

I have div on top which contains User Name and another table that has multiple rows with different user names in each row.

If any table cell has the same name as the top div, I want to run the function. The function will change the class on button of 'Remove row' of the same row not others.

Note: the name inside the top div will change as per browsing user

I tried by myself but I am not an expert in jQuery or JavaScript.

$(function() {
  var topDivName = $('.topDiv .nameContainer span').text();

  var tableUserName = $(".table td .nameLink").filter(function() {
    return $(this).text() === "LastName2, FirstName2"
  });

  if (topDivName === tableUserName) {
    $(tableUserName).closest('tr').find('button').removeClass('hide').addClass('show');
  } else {
    console.log('no matches exist');
  }
});
.hide {
  display: none;
  visibility: hidden;
}

.show {
  display: inline-block;
  visibility: visible;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="topDiv">
  <div class="nameContainer">
    <span>LastName2, FirstName2</span>
  </div>
</div>

<table class="table" width="100%" border="1">
  <tbody>
    <tr>
      <td width="20%"><button class="hide">Remove Row</button></td>
      <td width="20%"><span><a class="nameLink">LastName1, FirstName1</a></span></td>
      <td width="60%">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
          sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
          Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
        </p>
      </td>
    </tr>
    <tr>
      <td width="20%"><button class="hide">Remove Row</button></td>
      <td width="20%"><span><a class="nameLink">LastName2, FirstName2</a></span></td>
      <td width="60%">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
          sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
          Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
        </p>
      </td>
    </tr>
    <tr>
      <td width="20%"><button class="hide">Remove Row</button></td>
      <td width="20%"><span><a class="nameLink">LastName3, FirstName3</a></span></td>
      <td width="60%">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
          sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
          Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
        </p>
      </td>
    </tr>
  </tbody>
</table>

Solution

  • The issue in your logic is that you're comparing topDivName, which is a string, to tableUserName, which is a jQuery object.

    A better approach would be to use each() to loop through the table cells to find a match, and then show the button on the current row if the match is found. Below is a working example of how to do that. Note the additional use of trim() to ensure that whitespace does not affect the comparison.

    jQuery(function($) {
  var topDivName = $('.topDiv .nameContainer span').text().trim();

  $(".table td .nameLink").each(function() {
    $(this).closest('tr').find('button').toggleClass('show', $(this).text().trim() === topDivName);
  });
});
    table button {
  display: none;
  visibility: hidden;
}

.show {
  display: inline-block;
  visibility: visible;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="topDiv">
  <div class="nameContainer">
    <span>LastName2, FirstName2</span>
  </div>
</div>

<table class="table" width="100%" border="1">
  <tbody>
    <tr>
      <td width="20%"><button class="hide">Remove Row</button></td>
      <td width="20%"><span><a class="nameLink">LastName1, FirstName1</a></span></td>
      <td width="60%">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
          sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
          Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
        </p>
      </td>
    </tr>
    <tr>
      <td width="20%"><button class="hide">Remove Row</button></td>
      <td width="20%"><span><a class="nameLink">LastName2, FirstName2</a></span></td>
      <td width="60%">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
          sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
          Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
        </p>
      </td>
    </tr>
    <tr>
      <td width="20%"><button class="hide">Remove Row</button></td>
      <td width="20%"><span><a class="nameLink">LastName3, FirstName3</a></span></td>
      <td width="60%">
        <p>
          Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis,
          sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus.
          Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus.
        </p>
      </td>
    </tr>
  </tbody>
</table>