Question

我正在尝试将我的按钮选择显示在我的Web应用程序的表格中。 Bellow你找到与我的相关的代码片段1.我的功能允许选择（甚至可能不相关......），2。你可以选择的按钮来设置参数，3和表格类名和它们将去的行。我一直在努力解决这个问题！请帮忙！

我的功能：

function setClip(val) 
{
clip=val;
}

function setZoom(val) 
{
zoom=val;
}

function geoMap(val)
{
gmap=val;
}

function swap(imgNumber)
{
if(clip==true & zoom==false & gmap==false)
document.getElementById("default").src=imgNumber+"clip.jpg";

else if(clip==false & zoom==true & gmap==false) 
document.getElementById("default").src=imgNumber+"zoom.jpg";

else if(clip==false & zoom==true & gmap==true)
document.getElementById("default").src=imgNumber+"zoomp.jpg";

else if(clip==true & zoom==true & gmap==true)
document.getElementById("default").src=imgNumber+"clipzoomp.jpg";

else if(clip==true & zoom==false & gmap==true)
document.getElementById("default").src=imgNumber+"clipp.jpg";

else if(clip==true & zoom==true & gmap==false)
document.getElementById("default").src=imgNumber+"clipzoom.jpg"; 

else if(clip==false & zoom==false & gmap==true)
document.getElementById("default").src=imgNumber+"p.jpg";

else
document.getElementById("default").src=imgNumber+".jpg";

}

我的按钮：

<input type ="button" id="button3" value="Apply Mask" onclick="setClip(true)">
<input type ="button" id="button3" value="No Mask" onclick="setClip(false)">
<input type="button" id="button3" value="Maintain Zoom In" onClick="setZoom(true)"> 
<input type="button" id="button3"value="Maintain Full View" onClick="setZoom(false)">
<input type="button" id="button3" value="GeoMap On" onClick="geoMap(true)">
<input type="button" id="button3" value="GeoMap Off" onClick="geoMap(false)">

我希望我的选择显示在表格中，基本上我想要所选按钮的值，但是在选择它们之后放入表格

<table class="status" height="50" width="800">
<tr>
    <td  width="200" align="center">Step 1 Selection</td>
    <td  width="200" align="center">Step 2 Selection</td>
        <td  width="200" align="center">Step 3 Selection</td>
</tr>
</table>

Answer 1

我认为你最好的选择是使用jQuery。操作比Javascript容易得多，并且设计用于轻松操作对象。如果您了解CSS和一些Javascript，那么它也很容易掌握。您甚至无需托管它，因为Google会托管它。您需要做的就是将以下源代码添加到脚本所在的顶部：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var buttonCount=1;
   $(document).ready(function() {
    $("input[type='button']").click(function() {
        if(buttonCount <= 3) {
            //make sure that there are no duplicates
            if($(this).get(0).className != "buttonUsed")
            {
                $(this).get(0).className = "buttonUsed";

                var htmlString = $(this).attr('value');
                $('#sel' + buttonCount).html(htmlString);

                buttonCount++;
            }
        }
    });
});
... The rest of your script

我注意到您一直在使用ID，就像可能会使用类一样。我建议你考虑使用类属性来做“按钮”这样的事情，并使ID更加独特。它将使用Javascript进行编码变得更容易，因为JS通常遵循ID，并且如果每个ID仅针对一个元素，则效果最佳。无论如何我都重命名了你的ID。如果你有CSS，你可以重命名你的CSS类。请注意，在我的代码中，我重命名了一个类，以便您不能选择多个类。无论如何，这可能对你有用，因为你使用的按钮看起来与未使用的按钮不同。

无论如何，这是HTML，改编：

<table class="status" id="buttonStatus" height="50" width="800">
<tr>
    <td  width="200" align="center">Step 1 Selection</td>
    <td  width="200" align="center">Step 2 Selection</td>
        <td  width="200" align="center">Step 3 Selection</td>
</tr><tr>
    <td width="200" align="center" id="sel1"> </td>
    <td width="200" align="center" id="sel2"> </td>
    <td width="200" align="center" id="sel3"> </td>
</tr>   
</table>
</body>

让我知道这是否有效。

更新

要根据需要进行编辑，请使用：

$(document).ready(function() {
    $("input[type='button']").click(function() {
        //make sure that there are no duplicates
        var buttonClassName = $(this).get(0).className;
        if(buttonClassName != "buttonUsed")
        {
            var buttonID = $(this).attr('id');
            var firstPart = buttonID.substring(0,6);
            var secondPart = buttonID.substring(6,7);
            var thirdPart = buttonID.substring(7);


            var newThirdPart;
            switch(thirdPart) 
            {
                case "a"    :   newThirdPart = "b"; break;
                case "b"    :   newThirdPart = "a"; break;
            }
            $(this).get(0).className = "buttonUsed";
            $("#" + firstPart + secondPart + newThirdPart).get(0).className = "button";



            var htmlString = $(this).attr('value');
            $('#sel' + secondPart).html(htmlString);
        }
    });
});

和HTML

<body>
<input type ="button" class="button" id="button1a" value="Apply Mask" onclick="setClip(true)">
<input type ="button" class="button" id="button1b" value="No Mask" onclick="setClip(false)">
<input type="button" class="button" id="button2a" value="Maintain Zoom In" onClick="setZoom(true)"> 
<input type="button" class="button" id="button2b"value="Maintain Full View" onClick="setZoom(false)">
<input type="button" class="button" id="button3a" value="GeoMap On" onClick="geoMap(true)">
<input type="button" class="button" id="button3b" value="GeoMap Off" onClick="geoMap(false)"><BR><BR><BR>

<table class="status" id="buttonStatus" height="50" width="800">
<tr>
    <td  width="200" align="center">Step 1 Selection</td>
    <td  width="200" align="center">Step 2 Selection</td>
        <td  width="200" align="center">Step 3 Selection</td>
</tr><tr>
    <td width="200" align="center" id="sel1"> </td>
    <td width="200" align="center" id="sel2"> </td>
    <td width="200" align="center" id="sel3"> </td>
</tr>   
</table>
</body>

关于CSS

的注释

此JQuery将活动按钮的类名更改为buttonUsed，这意味着您可以创建一个CSS以使按钮看起来突出显示。如果您不想这样做，并且宁愿将所有内容保留为按钮，那么在新示例中实际上并不需要它（而在我最初的实际操作中，它是非常必要的。）

$(document).ready(function() {
    $("input[type='button']").click(function() {
        //make sure that there are no duplicates

        var buttonID = $(this).attr('id');
        var secondPart = buttonID.substring(6,7);


        var htmlString = $(this).attr('value');
        $('#sel' + secondPart).html(htmlString);
    });
});

事实上，更为简单。至少我向你展示了jQuery能够做到的事情。您是否选择使用它取决于您。快乐的编码！

按钮选择显示在表格中

1 个答案:

更新

和HTML

关于CSS