使用 jQuery 将字符插入 table 单元格 onkeyup

Question

我想将 html 输入 中的字符插入到 table 单元格 中，因为用户使用jQuery。下图说明了我需要实现的目标：

如果用户键入名称 TABLE，将替换第一列中的星号。

这是我尝试做的：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Test</title>
</head>


<body>
<script>
$(document).ready(function(){
$("#inputv").keyup(function(){
  var ttt = $("#inputv").val();
 
  $("#test").html(ttt);
    
});
});

</script>
<style>
td {
    padding: 2px;
    background-color: #EEEEEE;
    border: 1px solid #000000;
    width: 20px;
    height: 20px;}

</style>
<input type="text" id="inputv">
<table width="200" border="1">
  <tr>
    <td id="test">*</td>
    <td  id="test">*</td>
    <td  id="test">*</td>
    <td  id="test">*</td>
    <td  id="test">*</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

错误是它在第一个单元格中插入整个单词 例如 TABLE 而不是将每个字符插入它自己的单元格中

任何知道如何解决这个问题的人请协助

Answer 1

table 中的每个 td 使用 id 我建议你使用 class 而不是多个相同元素的 id，因为 id 用于 [=23= 中的单个元素] 你想在所有 td 中同时添加值，你可以使用以下代码。 我将您的 test id 更改为 test class。

$(document).ready(function(){
$("#inputv").keyup(function(){

     $("td.test").each(function(){
            $(this).html($("#inputv").val());
   });

});
});

else 对于单个列，您可以使用以下内容： 我给你的 td 分配了一个 test id。

$(document).ready(function(){
$("#inputv").keyup(function(){

   $("#test").html($("#inputv").val());
});
});

Answer 2

试试这个代码，我认为它很有用

$(document).ready(function() {
  $("#inputv").keyup(function() {

    $("td.test").each(function() {
      $(this).html($("#inputv").val());
    });

  });
});

td {
  padding: 2px;
  background-color: #EEEEEE;
  border: 1px solid #000000;
  width: 20px;
  height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Test</title>
</head>

<body>

  <input type="text" id="inputv">
  <table width="200" border="1">
    <tr>
      <td class="test">*</td>
      <td class="test">*</td>
      <td class="test">*</td>
      <td class="test">*</td>
      <td class="test">*</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
      <td>&nbsp;</td>
    </tr>
  </table>
</body>

</html>

Answer 3

试试看你想要什么。并且必须使用 class 而不是 id.

$(document).ready(function() {
  $("#inputv").keyup(function() {
    var i = 0;
    var id = $("#inputv").val();
    $("td.test").each(function() {
     if(i <= $("#inputv").val().length)
     {
         $(this).html(id[i]);
     }


      i++;
    });

  });
});

Answer 4

试试这个代码。我想这就是你想要的。希望对你有帮助。

$(document).ready(function() {
  $("#inputv").keypress(function(e) {
    $('td').eq($("#inputv").val().length).html(String.fromCharCode(e.which));
  });
});

td {
  padding: 2px;
  background-color: #EEEEEE;
  border: 1px solid #000000;
  width: 20px;
  height: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="inputv">
<table width="200" border="1">
  <tr>
    <td class="test">*</td>
    <td class="test">*</td>
    <td class="test">*</td>
    <td class="test">*</td>
    <td class="test">*</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>

使用 jQuery 将字符插入 table 单元格 onkeyup

Insert Characters into table cells onkeyup using jQuery

jquery

html-table

onkeyup