Search code examples
jqueryhtml-tableonkeyup

Insert Characters into table cells onkeyup using jQuery

I want to insert characters from the html input into table cells as users types them using jQuery. The Image below illustrates what I need to achieve:

enter image description here

That if as user keys in for example name TABLE, in replaces the stars in the first column.

This what I have tried to do:

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

The error is that it's inserting the whole word eg TABLE in the first cell instead insert each character in it's own cell

Anyone with an idea how to solve this kindly assist

Solution

  • Try this for what you want exactly. and must use the class instead of 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++;
    });

  });
});