1.正如我在评论中所解释的，HTML代码必须首先清理。
1.使用正则表达式来匹配姓氏的开头可能很有用。可以使用^So来完成此操作，其中^表示“开头为”，So是搜索字段中的值。要使其不区分大小写，我们使用i修饰符来修饰“caseinsensitive"。2我为“unicode”添加了u标志，因为我们可以使用重音符号或其他字符。
这是我为解决你的问题而做的

/**
 * Escape characters which have a meaning in a regular expression.
 * 
 * @param string The string you need to escape.
 * @returns The escaped string.
 */
function escapeRegExp(string) {
  return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

/**
 * To escape HTML characters such as "<" becoming "&lt";
 *
 * @param string The string you need to escape for HTML purpose.
 * @returns The escaped string.
 */
function escapeHtml(string) {
  return $('<span></span>').text(string).html();
}

/**
 * To restripe the visible rows of the users table.
 */
function reStripeVisibleRows() {
  $('#users tbody tr:visible').each(function(i, tr) {
    $(tr).toggleClass('zebra-stripe', i % 2 != 0);
  });
}

// When the document is loaded then initialize everything.
$(document).ready(function() {
  // Stripe the rows of the users table.
  reStripeVisibleRows();
  
  // Attach the search handler for the last name column.
  $("#last-name").on('keyup', function() {
    let value = $(this).val().toLowerCase();
    let regexLastName = new RegExp(
      '^' + escapeRegExp(value.toLowerCase()), // ^ = starting with.
      'iu' // i = case insensitive, u = unicode.
    );
    
    // Look in all the last names.
    $('#users tbody td:nth-child(1)').each(function(i, td) {
      // Does the first td (the last name) match the search?
      let matches = $(td).text().match(regexLastName);
      // Toggle the parent <tr> visibility depending on that.
      $(td).parent().toggle(matches !== null);
    })
      
    reStripeVisibleRows();
  });
  
  // Attach the search handler for the full row search.
  $('#all').on('keyup', function() {
    let value = $(this).val().toLowerCase();
    let regexLastName = new RegExp(
      escapeRegExp(value.toLowerCase()),
      'iu' // i = case insensitive, u = unicode.
    );
    
    // Look in all the lines.
    $('#users tbody tr').each(function(i, tr) {
      // Does the first td (the last name) match the search?
      let matches = $(tr).text().match(regexLastName);
      // Toggle the parent <tr> visibility depending on that.
      $(tr).toggle(matches !== null);
    })
      
    reStripeVisibleRows();
  })
});

html {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

#search-form {
  display: inline-flex;
  align-items: baseline; /* Align the h2 title with the text content. */
  background: #eee;
  margin-bottom: 1em;
  padding: .5em;
}

#search-form h2 {
  font-size: 1em;
  font-weight: bold;
  margin: 0 1em 0 0;
}

.separator {
  color: red;
  margin: 0 1em;
}

table {
  border: 1px solid gray;
  border-collapse: collapse;
}

table tbody tr {
  border-bottom: 1px solid silver;
}

table th,
table td {
  padding: .25em .5em;
  text-align: left;
}

table th {
  background: gray;
  color: white;
}

table tbody tr:last-child {
  border-bottom: none;
}

.zebra-stripe {
  background-color: #f8f8f8;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>

<form action="#" id="search-form">
  <h2>Search</h2>
  <div>
    <input type="text" id="last-name" placeholder="Last name starting with..."
           title="Searches all rows with a last name starting by...">
    <span class="separator">or</span>
    <input type="text" id="all" placeholder="Row contains..."
           title="Searches all rows containing...">
  </div>
</form>

<div id="table-container">
  <table id="users" class="striped">
    <thead>
      <tr>
        <th>Last Name</th>
        <th>First Name</th>
        <th>Section Name</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Robinson</td>
        <td>Frances</td>
        <td>Tranquility TB</td>
      </tr>
      <tr>
        <td>Smithson</td>
        <td>Walter</td>
        <td>Tranquility TB</td>
      </tr>
      <tr>
        <td>Sontag</td>
        <td>Arsene</td>
        <td>Peace</td>
      </tr>
      <tr>
        <td>Robertson (nee Sontag)</td>
        <td>Elizabeth</td>
        <td>Pioneer</td>
      </tr>
    </tbody>
  </table>
</div>

同样的解决方案，但使用更多随机数据：https://codepen.io/patacra/pen/YzOxMdr