选择/突出显示行并更改同一行中突出显示的文本字段的值

Selecting/Highlighting Rows AND Changing Value of Highlighted Text Field in the Same Row

本文关键字：显示 一行 文本 字段 选择      更新时间：2023-09-26

长期偷窃者，第一次海报。

我

正在尝试创建一个基于互联网的交互式GUI，具有模仿我的一个客户的产品的控制面板的特定功能，但运气不佳，无法让它完全按照我想要的方式进行。我知道答案就在那里。我会尽力描述我想要实现的目标，而不会太啰嗦。不过，实际上，检查分叉只是最好地解释了它。

我想做的是能够让用户通过使用html/css按钮在显示器上选择行 - 在这种情况下，"显示"被呈现为无序列表。除此之外，我希望他们能够增加和减少文本框中的值。这是踢球者：我希望他们能够在突出显示文本框时才能够增加和减少值。我遇到的问题是我无法让每个文本框增加和减少;我只能让第一个改变。希望这个解释足够清楚，但请查看 Plunker 以获得最佳理解。当你看到它直播时，它会更加清晰。

我已经制作了许多不同的草稿/版本，并尝试使用表格，但这让我最接近。现在我只需要克服驼峰。我完全愿意以不同的方式做到这一点，但似乎这只需要在这里或那里进行调整即可使其继续。我在创建这篇文章时有一个想法，它可能有效并且不涉及无序列表或列表项，并且通过边距和填充来执行突出显示而变得"有创意"。不过，我还没有尝试过。

我尝试在jsfiddle上设置它，但是我的代码编写方式中的某些内容与他们的软件不符，所以我尝试了Plunker，它似乎有效。无论哪种方式，这是小提琴：http://jsfiddle.net/brettroby/f5jrL/，这是Plunker：http://plnkr.co/edit/BMSh19?p=preview。如果有人想去处理那个小提琴并让我知道为什么它不起作用，那将不胜感激;但是，Plunker 按原样工作得很好。

我还有一个小问题，可以在主要问题解决后讨论。

感谢大家的帮助！

PS - 感谢所有的代码编写者，我借用了他们的代码来达到这一步。如果没有堆积溢出，我会死在水里。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 TRANSITIONAL//EN">
<html>
<head>
<title></title>
<style type="text/css">
#wrapper {
width: 800px;
height: 400px;
padding: 10px;
border: 1px solid #474747;
}
#screen-container {
float: left;
background: #6799ea;
width: 485px;
height: 300px;
border: 3px solid #efefef;
border-radius: 15px;
color: #ffffff;
}
#d-pad {
position: relative;
float: right;
width: 300px;
height: 300px;
border: 3px solid #efefef;
border-radius: 15px;
}
ul {
margin: 20px 10px 0 -30px;
font-family: arial, helvetica, sans-serif;
text-transform: uppercase;
font-size: 1.5em;
}
li {
list-style-type: none;
line-height: 50px;
}
li:selected {
color: #000;
}
#up {
position: absolute;
margin: 5px 0 0 0;
left: 120px;
width: 50px;
height: 50px;
background-color: #efefef;
cursor: n-resize;
}
#up, #down, #left, #right {
text-align: center;
}
#down {
position: absolute;
margin: 0 0 5px 0;
bottom: 0;
left: 120px;
width: 50px;
height: 50px;
background-color: #efefef;
cursor: s-resize;
}
#left {
position: absolute;
left: 0px;
top: 110px;
width: 50px;
height: 50px;
margin: 5px;
background-color: #b7d9ef;
cursor: w-resize;
}
#right {
position: absolute;
right: 0px;
top: 110px;
width: 50px;
height: 50px;
margin: 5px;
background-color: #b7d9ef;
cursor: e-resize;
}
.number-input {
float: right;
width: 50px;
font-size: 1.5em;
text-align: right;
color: #ffffff;
background-color: 6799ea;
border: 0px;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
a {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
</style>
<script type="text/javascript">
// For: http://www.codingforums.com/showthread.php?t=223429
var SBoxPtr = 0;
function SBoxPrevNext(amt) {
  var sel = document.getElementById('screen-container').getElementsByTagName('li');
  SBoxPtr += amt;
  if (SBoxPtr < 0) { SBoxPtr = 0; }
  if (SBoxPtr > sel.length-1) { SBoxPtr = sel.length-1; }
  for (var i=0; i<sel.length; i++) {
    if (i == SBoxPtr) { sel[i].style.backgroundColor = 'cyan'; }
                 else { sel[i].style.backgroundColor = '6799ea'; }
  }
}
document.onkeyup = changeChars;

function changeChars(e) {
  var KeyID = (window.event) ? event.keyCode : e.keyCode;   //  alert(KeyID);
  if (KeyID == 187) { SBoxPrevNext(1); }    // Key '+'
  if (KeyID == 189) { SBoxPrevNext(-1); }   // Key '-'
  if (KeyID == 40) { SBoxPrevNext(1); }     // Key 'DownArrow'
  if (KeyID == 38) { SBoxPrevNext(-1); }    // Key 'UpArrow'
}
window.onload=function(){
SBoxPrevNext(0)
 document.getElementById("up").onclick=function(){SBoxPrevNext(-1)}
 document.getElementById("down").onclick=function(){SBoxPrevNext(1)}
}
</script>
<script type="text/javascript">
function incrementValue()
{
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value++;
    document.getElementById('number').value = value;
}
</script>
<script type="text/javascript">
function decrementValue()
{
    var value = parseInt(document.getElementById('number').value, 10);
    value = isNaN(value) ? 0 : value;
    value--;
    document.getElementById('number').value = value;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="screen-container">
<ul>
<li>Program Line 1 <input class="number-input" type="number" min="0" max="80" value="0" id="number"></li>
<li>Program Line 2 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 3 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 4 <input class="number-input" type="number" min="0" max="80" value="0"></li>
<li>Program Line 5 <input class="number-input" type="number" min="0" max="80" value="0" ></li>
</ul>
</div>
<div id="d-pad">
<div id="up"><p>&#9650</div><div id="down"><p>&#9660</div>
<div id="left" onclick="decrementValue()"><p style="">&#9668;</p></div><div id="right" onclick="incrementValue()"><p>&#9658;</div>
</div>
</div><!-- end wrapper -->
</body>
</html>

我已经修复了您的代码，您可以在此处看到正确的 plunker

我所做的更正是

而不是：

function incrementValue()
{
   var value = parseInt(document.getElementById('number').value, 10);
   value = isNaN(value) ? 0 : value;
   value++;
   document.getElementById('number').value = value;
}

我已将其修复为：

function incrementValue()
{
   var value = parseInt(document.getElementById('number' + SBoxPtr).value, 10);
   value = isNaN(value) ? 0 : value;
   value++;
   document.getElementById('number'+ SBoxPtr).value = value;
}

并且还将元素名称从数字更改为数字X

源语言

<li>Program Line 1
<input id="number" class="number-input" type="number" min="0" max="80" value="0" ></li>

固定：

 <li>Program Line 1 
 <input id="number0" class="number-input" type="number" min="0" max="80" value="0" </li>

添加了 id = 数字 0 并编号了所有其他 li

如果您发现我的答案对您有所帮助，请标记它并按 UP 键。谢谢

相关文章：