Javascript 如何从表数据（td）中获取值，方法是单击该值并将其作为数字传递给4个输入字段

我有一个otp表单，它需要将表td值中的值传递到四个不同的输入字段。我想要解决这个问题的方法？我已经完成了传递，但是值正在传递，即使在我提交时输入为空。当按下td时，数字应该不可见。但在输入数字后，就地星号应该可见

$（“#tblMain tbody td”）。在（'click'，function（）上{
if（$（“#empname”）.val（）=“”）{
$（“#empname”）.val（$（this.text（））；
}否则{
如果（$（“#empname2”）.val（）=”）{
$（“#empname2”）.val（$（this.text（））；
}否则{
如果（$（“#empname3”）.val（）=”）{
$（“#empname3”）.val（$（this.text（））；
}否则{
如果（$（“#empname4”）.val（）=”）{
$（“#empname4”）.val（$（this.text（））；
} } } }
});
$（“#退格”）。在（'click'，function（）上{
document.getElementById（“empname”）.value=“”；
document.getElementById（“empname2”）.value=“”；
document.getElementById（“empname3”）.value=“”；
document.getElementById（“empname4”）.value=“”；
});

1.
2.
3.
4.
5.
6.
7.
8.
9
0
*
返回
提交检察官办公室
不太确定，但可以使用数据属性存储值

$("#tblMain  tbody td").on('click', function() {
    if($("#empname").val()==="") {
      $('#empname').data('option',$(this).text()); //setter  
      $("#empname").val("*");
    } else {
    if($("#empname2").val()==="") {  
      $('#empname2').data('option',$(this).text()); //setter  
      $("#empname2").val("*");
    } else {
    if($("#empname3").val()==="") {
      $('#empname3').data('option',$(this).text()); //setter  
      $("#empname3").val("*");
    } else {
    if($("#empname4").val()==="") {  
      $('#empname4').data('option',$(this).text()); //setter  
      $("#empname4").val("*");
    } } } }
});
$("#backspace").on('click', function() {

   document.getElementById("empname").value="";
   $('#empname').data('option',""); //setter 
   document.getElementById("empname2").value="";
   $('#empname2').data('option',""); //setter                                    
   document.getElementById("empname3").value="";
   $('#empname3').data('option',""); //setter 
   document.getElementById("empname4").value="";
   $('#empname4').data('option',""); //setter 
  });

您可以使用queue而不是那么多if语句


编辑

不是队列而是数组

<input type="text" class="classIsBetter" id="empname" value=""/>
<input type="text" class="classIsBetter" id="empname2" value=""/>
<input type="text" class="classIsBetter" id="empname3" value=""/>
<input type="text" class="classIsBetter" id="empname4" value=""/>

elements = document.querySelectorAll(".classIsBetter");
currentPosition = 0;
$("td").click(function() {
  if ($(this).attr('id') == "backspace") {
    currentPosition -= 1;
    elements[currentPosition].dataset.option = "";
    elements[currentPosition].value = "";
    return;
  } else {
    elements[currentPosition].dataset.option = $(this).text(); //setter
    elements[currentPosition].value = $(this).text();
    currentPosition++;
  }
});


元素=document.queryselectoral（“.classIsBetter”）；
currentPosition=0；
$（“td”）。单击（函数（）{
if（$（this.attr（'id'）=“backspace”）{
当前位置-=1；
元素[currentPosition].dataset.option=“”；
元素[currentPosition]。值=”；
返回；
}否则{
元素[currentPosition].dataset.option=$（this）.text（）；//setter
元素[currentPosition]。值=$（this）.text（）；
currentPosition++；
}
});

如果我收到了你的问题，实现这一点的最简单方法是在每个输入字段中添加
required属性。这样，浏览器将检查所需输入字段是否为空（提交前）

另外，使用输入类型作为密码将其隐藏，并将值显示为星号（星形）



1.
2.
3.
4.
5.
6.
7.
8.
9
0
*
返回
提交检察官办公室
我不明白这个问题。也许您应该使用隐藏输入？我想要输入otp的表单输入字段？它是otp验证表单将数字存储在隐藏输入中，并在可见输入字段中显示
*
。如何获取表td值并将其传递给四个输入？谢谢，但它传递的是星号，而不是empname=“”中我可以看到的值它仍然是空的。你能用queue而不是那么多if语句吗？你能给我代码吗？请用标点符号。用这样的描述来定位您的程序流程有点困难。ya Ok Kairat Thankszone.js:195 Uncaught TypeError:elements[currentPosition]。数据不是HTMLTableCellElement.eval的函数（在webpackJsonp../node_modules/script loader/addScript.js.module.exports（addScript.js:9），：6:31）你能在js fiddel sapart中输入你的数组代码吗？这样对我来说就更容易理解了？这不是我的问题。谢谢，但我需要将表日期中的值传递到for4输入字段。该值不应该可见，但我希望在用户键入时星星应该可见？我已经更新了答案。检查这是否是您想要的。我已将输入类型从文本更改为密码。1.该值应从td表传递到输入字段。2.值sholud不可见，而应为*.3.后退按钮也可以删除输入的otp。