表格中显示的按钮选择

Question

我正在尝试让我的按钮选择显示在我的 Web 应用程序的表格中。您可以在下面找到与我相关的代码 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，就像使用类一样。我建议您考虑将 class 属性用于“按钮”之类的东西，并使 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 的能力。是否选择使用它取决于您。编码愉快！