使用jQuery同时为td标签和输入标签设置文本和值

Question

我试图同时为text标签和value标签设置td和input。但是单击该按钮后，td标签将充满数据，而输入标签将消失。

什么是最佳解决方案？

function myfunction() {
  $("#sel").val("Kannan");
  $(".sel").html("Kannan");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <th>name</th>
  </tr>
  <tr>
    <td class="sel">
      <input type="text" id="sel">
    </td>
  </tr>
</table>
<button onClick="myfunction();">click</button>

Answer 1

您需要删除JS中不必要的行

function myfunction() {
  $("#sel").val("Kannan");
  //$(".sel").html("Kannan"); Remove this line.
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <th>name</th>
  </tr>
  <tr>
    <td class="sel">
      <input type="text" id="sel">
    </td>
  </tr>
</table>
<button onClick="myfunction();">click</button>