Вставка символов в ячейки таблицы onkeyup с помощью jQuery

Я хочу вставлять символы из ввода html в ячейки таблицы по мере того, как пользователи вводят их с помощью 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>

Ошибка заключается в том, что он вставляет все слово например, ТАБЛИЦА в первую ячейку вместо того, чтобы вставлять каждый символ в свою собственную ячейку

Все, у кого есть идеи, как решить эту проблему, пожалуйста, помогите


jquery html-table onkeyup
person Nicholas Macharia    schedule 10.11.2017    source источник
comment
так в чем тут ошибка   -  person Satya    schedule 10.11.2017
comment
какой образ нет изображения   -  person Bhargav Chudasama    schedule 10.11.2017
comment
Ошибка заключается в том, что он вставляет все слово, например ТАБЛИЦА, в первую ячейку вместо того, чтобы вставлять каждый символ в свою собственную ячейку.   -  person Nicholas Macharia    schedule 10.11.2017
comment
@Bhargav по-детски запусти код, чтобы увидеть   -  person Nicholas Macharia    schedule 10.11.2017
comment
но когда ввод равен table 1, тогда какая ячейка получает значение, есть только 5 ячеек   -  person Bhargav Chudasama    schedule 10.11.2017
comment
id — это уникальный идентификатор элемента, поэтому вы не можете назначить один и тот же идентификатор для всех   -  person Bhargav Chudasama    schedule 10.11.2017
comment
@Bhargav это проблема, с которой я столкнулся. Я хочу, чтобы каждый символ занимал место в ячейке, отмеченное знаком «*». Я думал, что этот подход (один и тот же идентификатор для всех ячеек) будет работать, но это не так. У вас есть лучший подход?   -  person Nicholas Macharia    schedule 10.11.2017
comment
вы недостаточно объяснили свою проблему   -  person Bhargav Chudasama    schedule 10.11.2017

Ответы (4)


arrow_upward
1
arrow_downward

Попробуйте это для того, что вы хотите точно. и должен использовать класс вместо идентификатора.

$(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++;
    });

  });
});
person A.D.    schedule 10.11.2017
comment
Большое спасибо @addy. Работает как шарм. - person Nicholas Macharia; 10.11.2017

arrow_upward
1
arrow_downward

Там вы используете идентификатор для каждого td в таблице. Я предлагаю вам использовать класс вместо идентификатора для нескольких одинаковых элементов, потому что идентификатор используется для отдельного элемента в HTML. Если вы хотите добавить значение во все td одновременно, вы можете используйте следующий код. Ваш test идентификатор будет изменен на test класс.

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

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

});
});

иначе для отдельного столбца вы можете использовать следующее: здесь я назначаю идентификатор test вашему td.

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

   $("#test").html($("#inputv").val());
});
});
person A.D.    schedule 10.11.2017
comment
Спасибо @эдди. Я вижу, вы поняли мою проблему. Но теперь у меня есть еще одна проблема с вашим подходом. Когда я набираю имя 12345.. оно повторяется во всех ячейках. Но я хочу, когда я набираю 12345 1 to be on 1st cell, 2 on second, 3 on third, ...5 to be on 5th. - person Nicholas Macharia; 10.11.2017
comment
во входном тексте не более 5 символов. - person A.D.; 10.11.2017
comment
Да. На данный момент я хочу использовать 5.. чтобы они соответствовали 5 пробелам, указанным в ячейках таблицы. - person Nicholas Macharia; 10.11.2017

arrow_upward
1
arrow_downward

попробуйте этот код, я думаю, это полезно

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

person Bhargav Chudasama    schedule 10.11.2017
comment
Спасибо @Bhargav. Но с этим мало проблем. Когда я набираю 12345, это повторяется во всех ячейках. Но я хочу, когда я набираю 12345 1 to be on 1st cell, 2 on second, 3 on third, ...5 to be on 5th. - person Nicholas Macharia; 10.11.2017
comment
насчет 8 и * - person Bhargav Chudasama; 10.11.2017
comment
нет 8 и * - person Nicholas Macharia; 10.11.2017
comment
но думаю, что это произошло с вводом пользователем 12345678, чем то, что - person Bhargav Chudasama; 10.11.2017
comment
Я хочу использовать 5 символов, т.е.12345.. чтобы они помещались в 5 пробелов, предусмотренных в ячейках таблицы.. kindly ignore 12345678. Я хочу, чтобы он работал с 5 символами на данный момент. - person Nicholas Macharia; 10.11.2017
comment
но никаких ограничений на ввод - person Bhargav Chudasama; 10.11.2017

arrow_upward
1
arrow_downward

Попробуйте этот код. Я думаю, это то, что вы хотите. надеюсь, это поможет вам.

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

person Makarand Patil    schedule 10.11.2017