如何根据Jquery选择的选项在tr中添加输入字段

<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>

<table id="myTable">
  <thead>
    <tr>
      <th>选项</th>
      <th>输入字段</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <select class="optionSelect">
          <option value="option1">选项1</option>
          <option value="option2">选项2</option>
          <option value="option3">选项3</option>
        </select>
      </td>
      <td></td>
    </tr>
  </tbody>
</table>

$(document).ready(function() {
  $('.optionSelect').change(function() {
    var selectedOption = $(this).val(); // 获取选中的选项值
    var inputField = '<input type="text" class="inputField">'; // 创建输入字段的HTML

    // 根据选择的选项在对应的行中添加输入字段
    $(this).closest('tr').find('td:last').html(inputField);
  });
});