使用 jQuery onkeyup 将字符插入表格单元格答案

【问题标题】：Insert Characters into table cells onkeyup using jQuery使用 jQuery onkeyup 将字符插入表格单元格
【发布时间】：2017-11-10 06:28:16
【问题描述】：

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

如果作为用户键入例如名称 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而不是在它自己的单元格中插入每个字符

任何知道如何解决这个问题的人都可以帮助

【问题讨论】：

那么这里的错误是什么
哪张图片没有图片
错误是它在第一个单元格中插入了整个单词，例如 TABLE，而不是在它自己的单元格中插入每个字符
@Bhargav 小子运行代码看看
但当输入为table 1 时，哪个单元格获取值只有5个单元格

标签： jquery html-table onkeyup

【解决方案1】：

试试这个你想要什么。并且必须使用类而不是 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++;
    });

  });
});

【讨论】：

非常感谢@addy。像魅力一样工作。

【解决方案2】：

您对表中的每个 td 使用 id 我建议您对多个相同元素使用一个类而不是 id，因为 id 用于 HTML 中的单个元素。如果您想在相同的所有 td 中添加值时间你可以使用下面的代码。 现在将您的 test id 更改为 test 类。

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

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

});
});

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

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

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

【讨论】：

谢谢@addy。我看你已经理解我的问题了。但是现在 In 对您的方法有另一个问题。当我输入名称 12345.. 它在所有单元格中重复。但我想要的是当我输入 12345 1 to be on 1st cell, 2 on second, 3 on third, ...5 to be on 5th.
您的输入文本中是否最多只有 5 个字符。
是的。现在我想使用 5.. 以便它们适合表格单元格中提供的 5 个空格

【解决方案3】：

试试这个代码，我觉得它很有帮助

$(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>

【讨论】：

谢谢@Bhargav。但在这方面几乎没有问题。当我输入12345 时，它会在所有单元格中重复。但我想要的是当我输入 12345 1 to be on 1st cell, 2 on second, 3 on third, ...5 to be on 5th.
关于 8 和 *
没有8和*
但认为它发生的用户输入 12345678 比什么
我想使用 5 个字符 ie12345.. 以便它们适合表格单元格中提供的 5 个空格.. kindly ignore 12345678。我希望它现在可以使用 5 个字符。

【解决方案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>

【讨论】：