<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>信息表</title>
        <script type="text/javascript">
            function mute(param){
                document.getElementById("unmute").disabled=false;
                document.getElementById("mute").disabled=true;
                alert(param);
            }            function unmute(){
                document.getElementById("mute").disabled=false;
                document.getElementById("unmute").disabled=true;
                alert("unmute!");
            }
        </script>
    </head>
    <body>
        <table width="80%" border="1" cellpadding="0" cellspacing="1"
               style="border: 1px solid; border-color: #4DA0F4; border-collapse: collapse; border-top-color: #377CF0; border-top-width: medium;">
            <tbody>
                <tr>
                    <td bgcolor="#E6FAFF">序号</td>
                    <td bgcolor="#E6FAFF">信息</td>
                    <td bgcolor="#E6FAFF">操作</td>
                </tr>
                <?php
                   for($k=0;$k<count($array);$k++){
                ?>
                <tr>
                    <td><?php echo $k+1; ?></td>
                    <td><?php echo $array[$k]; ?></td>
                    <td>
                        <input type="button" id="mute" name="mute" value="mute" onclick="javascript:mute(<?php echo $array[$k]; ?>);" />&nbsp;
                        <input type="button" id="unmute" name="unmute" disabled="disabled" value="unmute" onclick="javascript:unmute();" />
                    </td>
                </tr>
                <?php
                   }
                ?>
            </tbody>
        </table>
    </body>
</html>请高人帮忙看看!功能是:起初,unmute按钮不能点。当我单击mute按钮时,unmute按钮就能点了,此时的mute按钮就不能点了;当我单击unmute按钮时,mute按钮就能点了,此时的unmute按钮就不能点了.
我的问题是,怎样让循环产生的这一对按钮都实现此功能?

解决方案 »

  1.   

    简单的很
    <html>
        <head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>信息表</title>
            <script type="text/javascript">
                function mute(param){
                    document.getElementById("unmute"+param).disabled=false;
                    document.getElementById("mute"+param).disabled=true;
                    alert(param);
                }            function unmute(param){
                    document.getElementById("mute"+param).disabled=false;
                    document.getElementById("unmute"+param).disabled=true;
                    alert("unmute!");
                }
            </script>
        </head>
        <body>
            <table width="80%" border="1" cellpadding="0" cellspacing="1"
                   style="border: 1px solid; border-color: #4DA0F4; border-collapse: collapse; border-top-color: #377CF0; border-top-width: medium;">
                <tbody>
                    <tr>
                        <td bgcolor="#E6FAFF">序号</td>
                        <td bgcolor="#E6FAFF">信息</td>
                        <td bgcolor="#E6FAFF">操作</td>
                    </tr>
                    <?php    $array = array("Peter","Quagmire","Joe");    for($k=0;$k<count($array);$k++){
                    ?>
                    <tr>
                        <td><?php echo $k+1; ?></td>
                        <td><?php echo $array[$k]; ?></td>
                        <td>
                            <input type="button" id="mute<?php echo $array[$k];?>" name="mute" value="mute" onclick="javascript:mute('<?php echo $array[$k];?>');" />&nbsp;
                            <input type="button" id="unmute<?php echo $array[$k];?>" name="unmute" disabled="disabled" value="unmute" onclick="javascript:unmute('<?php echo $array[$k];?>');" />
                        </td>
                    </tr>
                    <?php
                       }
                    ?>
                </tbody>
            </table>
        </body>
    </html>
      

  2.   

    1 循环产生的这一对按钮的id不能重复、
    ...
    <td>
                            <input type="button" id="mute1" name="mute" value="mute" onclick="javascript:mute(this,'unmute1');" />&nbsp;
                            <input type="button" id="unmute1" name="unmute" disabled="disabled" value="unmute" onclick="javascript:unmute(this,'mute1');" />
                        </td>
    .....
    <td>
                            <input type="button" id="mute2" name="mute" value="mute" onclick="javascript:mute(this,'unmute2');" />&nbsp;
                            <input type="button" id="unmute2" name="unmute" disabled="disabled" value="unmute" onclick="javascript:unmute(this,'mute2');" />
                        </td>
    ...2 js 可以这样写
    <script type="text/javascript">
                function mute(but1obj,but2id){
                    but1obj.disabled=false;
                    document.getElementById(but2id).disabled=true;
                    alert(param);
                }            function unmute(but2obj,but1id){
                    but2obj.disabled=false;
                    document.getElementById(but1id).disabled=true;
                    alert("unmute!");
                }
            </script>以上是参考,未测试。根据你的实际情况修改下
      

  3.   

    也可以用jQuery来得到name为mute和unmute的按钮,用each来给他们的每一个click事件定义函数