在按键上的 td 内添加多个 div jQuery

Question

我在 div 中有一个输入文本框，它在 td 中，现在当用户输入一些文本并按回车键时，它应该添加一个额外的 div 和输入框到相同的 td。目标是在后续行中有多个值。

我可以在按键上添加 div，但这里的问题是我无法让按键只触发一次。我已经使用 flag 让它只触发一次，但它在我的情况下不起作用。

在按键事件之前

<div id="grid">
<table>
<tr>
<td class="first-row">
<div><input class ="td-input"></input></div>
</td>
</tr></table>

在按键上添加 div 后 dom 将如下所示

<div id="grid">
<table>
<tr>
<td class="first-row">
<div><input class ="td-input"></input></div>
<div><input class="td-input"></input></div>
</td>
</tr></table>

JQuery

$('#grid').on('keypress','td.first-row > div input.td-input', 
function(event){
var key = (event.keyCode ? event.keyCode : event.which);
var currentTD,addDiv;
if(key == '13'){
currentTD = $(this).closest('td');
addDiv = '<div><input class="td-input"></input></div>';
currentTD.append(addDiv);
}
});

我希望 'div' 在输入文本框上每次按键时只添加一次。使用我的代码，如果按 enter 两次，将添加 2 divs。

输出请参考下图。

$('#grid').on('keypress', 'td.first-row > div input.td-input', function(event){
    var key = (event.keyCode ? event.keyCode : event.which);
    var currentTD,addDiv;
    if(key == '13'){
     currentTD = $(this).closest('td');
     addDiv = '<div class="additional-row"><input class="td-input"></input></div>';
     currentTD.append(addDiv);
   }
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grid">
<table>
<tr>
<td>
<div><input class ="td-input" placeholder="Enter here column 1"></input></div>
</td>
<td class="first-row">
<div><input class ="td-input" placeholder="Enter here column 2"></input></div>
</td>
</tr>
</table>

Answer 1

您只需使用命名的事件处理程序，然后 .off() JQuery method 在之前注册的处理程序完成之前注销它。

此外，keypress 是测试 ENTER 键的错误事件（对于不可打印的字符不会触发）。为此，请使用 keydown.

最后，input 元素没有结束标记 (</input>)。这是无效的 HTML.

$('td.first-row > div input.td-input').on('keydown', makeInput);

function makeInput(event){
  var key = event.keyCode || event.which;  // Just need to check which one exists
  if(key == '13'){
    // Doesn't make sense to set up variables for values you'll only use once
    $(this).closest('td').append('<div><input class="td-input"></div>');
    
    // Just de-register the currently registered callback
    $('td.first-row > div input.td-input').off('keydown', makeInput);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grid">
  <table>
    <tr>
      <td class="first-row">
        <div><input class ="td-input"></div>
      </td>
    </tr>
  </table>
</div>

Answer 2

尝试使用 <template> 标签

let data = [''];

function setValue(inp, i) {
  data[i] = inp.value;
}

function add(e,i) {
  if (e.key != 'Enter' || i+1<data.length) return;
  data.splice(i+1,0,'');
  show(data);
  cell.children[i+1].children[0].focus();
}

function show(data) {
  let t= item.innerHTML;
  let inj = (s,o)=>s.replace(/${(.*?)}/g,(x,g)=>o[g]);
  cell.innerHTML=data.map((v,i)=>inj(t,{val:v.replace(/"/g,"&quot;"),i})).join('')
}


show(data);

td { border: 1px solid black; }

<div id="grid">
  <table>
    <tr>
      <td class="first-row" id="cell"></td>
    </tr>
  </table>
</div>

<template id="item">
  <div>
    <input 
      class="td-input" 
      onkeypress="add(event,${i})" 
      oninput="setValue(this,${i})" 
      value="${val}" />
  </div>
</template>

Answer 3

如果您只想允许对输入进行单次输入以插入新输入，因为您已经在使用委托，您可以更改它以测试输入没有 class。一旦为输入处理了事件处理程序，通过向其添加 class，您可以确保它不会在以后的输入中重复。

$('#grid').on('keypress', 'td.first-row > div input.td-input:not(.processed)', function(event) {
  var key = (event.keyCode ? event.keyCode : event.which);

  if (key == 13) {
    var $this = $(this);
    var $td = $this.closest('td');
    
    $td.append('<div class="additional-row"><input class="td-input"></input></div>');
    $this.addClass('processed');
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="grid">
  <table>
    <tr>
      <td>
        <div><input class="td-input" placeholder="Enter here column 1"></input>
        </div>
      </td>
      <td class="first-row">
        <div><input class="td-input" placeholder="Enter here column 2"></input>
        </div>
      </td>
    </tr>
  </table>

在按键上的 td 内添加多个 div jQuery

Add multiple divs inside the td on keypress jQuery

html

javascript

jquery

event-handling

jquery-events