选择/突出显示行并更改同一行中突出显示的文本字段的值 [英] Selecting/Highlighting Rows AND Changing Value of Highlighted Text Field in the Same Row
问题描述
长期偷窃者，第一次张贴.
Long-time pilferer, first-time poster.
我正在尝试创建一个具有特定功能的基于Internet的交互式GUI，该GUI模仿我一个客户的产品的控制面板，但运气不高，很难做到 我想要的.我知道答案就在那里.我将尽我所能描述我要实现的目标，而不会太冗长.不过，确实，检查出叉子才是最好的解释.
I'm attempting to create an interactive internet-based GUI with specific features that mimics the control panel of a product of one of my clients, but haven't had much luck getting it to do exactly what I want. I know the answer is out there. I will do my best to describe what I am trying to achieve, without getting too wordy. Really, though, checking out the fork just explains it best.
我想做的是能够使用户选择使用html/css按钮的显示器上的行(在这种情况下，显示器"被呈现为无序列表).除此之外，我希望它们能够增加和减少文本框中的值.这是一个关键点:我希望它们仅在文本框突出显示时才能够增加和减少值.我遇到的问题是我无法让每个文本框都增加和减少；我只能让第一个改变.希望说明已经很清楚了，但是请查看Plunker以获得最佳理解.当您看到它时，它将更加清晰.
What I want to do is be able to have the user select rows on a display — in this case the "display" is being rendered as an unordered list — by using html/css buttons. In addition to that, I want them to be able to increase and decrease the value in the text box. Here's the kicker: I want them to be able to increase and decrease the values ONLY when the text box is highlighted. The issue I'm having is I can't get each of the text boxes to increase and decrease; I can only get the first one to change. Hopefully that explanation is clear enough, but please, check out the Plunker to get the best understanding. It will be much clearer when you see it live.
我为此做了许多不同的草稿/版本，并尝试使用表格，但这使我最接近.现在，我只需要克服困难.我完全愿意以其他方式执行此操作，但是似乎只需要在此处或此处进行调整即可使其开始.创建此帖子时，我有一个想法，该想法可能会起作用，并且不涉及无序列表或列表项，并且会以创意"作为边距和边距来执行突出显示.我还没有尝试过.
I've made many different drafts/versions of this and have tried using tables, but this has gotten me the closest. Now I just need to get over the hump. I'm completely open to doing this a different way, but it seems like this just needs a tweak here or there to get it going. I had an idea as I was creating this post that might work and doesn't involve a unordered list or list items, and gets "creative" with margins and padding to execute the highlighting. I haven't tried that yet, though.
我尝试在jsfiddle上进行设置，但是编写代码的方式与他们的软件无关，所以我尝试了Plunker，它似乎可以工作.无论哪种方式，这都是小提琴: http://jsfiddle.net/brettroby/f5jrL/，这是柱塞: http://plnkr.co/edit/BMSh19?p=preview .如果有人想在那把小提琴上工作，并让我知道为什么它不起作用，那将不胜感激.但是，Plunker仍可以正常工作.
I tried setting this up on jsfiddle, but something in the way my code is written doesn't jive with their software, so I tried Plunker and it seemed to work. Either way, here's the fiddle: http://jsfiddle.net/brettroby/f5jrL/, and here's the Plunker: http://plnkr.co/edit/BMSh19?p=preview. If someone wants to go to work on that fiddle and let me know why it's not working, that would be appreciated; however, the Plunker is working just fine as-is.
我还有一个较小的问题，待主要问题解决后再进行讨论.
I also have one other issue that is minor and can be discussed after the main issue is resolved.
感谢大家的帮助！
PS-感谢那里的所有代码编写者，我借用了他们的代码以达到目标.我会死在水中而没有stackoverflow.
PS — thanks to all the code writers out there whose code I borrowed to get this far. I'd be dead in the water without stackoverflow.
<!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>▲</div><div id="down"><p>▼</div>
<div id="left" onclick="decrementValue()"><p style="">◄</p></div><div id="right" onclick="incrementValue()"><p>►</div>
</div>
</div><!-- end wrapper -->
</body>
</html>
推荐答案
我已修复了您的代码，您可以看到正确的插件[a href ="http://plnkr.co/edit/KDrmpW?p = preview"rel =" nofollow>此处
I have manged to fixed your code, and you can see the correct plunker here
我所做的更正是
代替:
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;
}
并且还将元素名称从number更改为numberX
And also changed the elements name from number to numberX
原始
<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 = number0，并对所有其他li进行了编号
Added id = number0 and numbered all other li's
如果发现我的答案对您有帮助，请标记它并同时按UP键. 谢谢
if you find my answer helped you please mark it and press the UP key as well. Thanks
这篇关于选择/突出显示行并更改同一行中突出显示的文本字段的值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
