javascript - 入力が満たされたときにいくつかの div を表示または非表示にします。2 つの入力が同じ値の場合にアラートを表示し、最後の入力を消去します

Question

入力に入力されたテキストに応じて、いくつかの div を表示または非表示にしようとしています。

実際に私はこの機能を実行しました:

<script type="text/javascript">
function checkdiv()
    {
    var position1= document.getElementById("position1").value;
        if(position1==1)
        {
         document.getElementById("a1").style.visibility = "hidden"                        
        }
        else
        {
         document.getElementById("a1").style.visibility= "visible"                        
        }
        if(position1=="2")
        {
         document.getElementById("a2").style.visibility = "hidden"                        
        }
        if(position1!="2")
        {
         document.getElementById("a2").style.visibility= "visible"                        
        }
        if(position1=="3")
        {
         document.getElementById("a3").style.visibility = "hidden"                        
        }
        if(position1!="3")
        {
         document.getElementById("a3").style.visibility= "visible"                        
        }
         if(position1=="4")
        {
         document.getElementById("a4").style.visibility = "hidden"                        
        }
        if(position1!="4")
        {
         document.getElementById("a4").style.visibility= "visible"                        
        }  
         if(position1=="5")
        {
         document.getElementById("a5").style.visibility = "hidden"                        
        }
        if(position1!="5")
        {
         document.getElementById("a5").style.visibility= "visible"                        
        }
        if(position1=="6")
        {
         document.getElementById("a6").style.visibility = "hidden"                        
        }
        if(position1!="6")
        {
         document.getElementById("a6").style.visibility= "visible"                        
        }
         if(position1=="7")
        {
         document.getElementById("a7").style.visibility = "hidden"                        
        }
        if(position1!="7")
        {
         document.getElementById("a7").style.visibility= "visible"                        
        }
         if(position1=="8")
        {
         document.getElementById("a8").style.visibility = "hidden"                        
        }
        if(position1!="8")
        {
         document.getElementById("a8").style.visibility= "visible"                        
        }          
        if(position1=="9")
        {
         document.getElementById("a9").style.visibility = "hidden"                        
        }
        if(position1!="9")
        {
         document.getElementById("a9").style.visibility= "visible"                        
        }
         if(position1=="10")
        {
         document.getElementById("a10").style.visibility = "hidden"                        
        }
        if(position1!="10")
        {
         document.getElementById("a10").style.visibility= "visible"                        
        }          
        if(position1=="11")
        {
         document.getElementById("a11").style.visibility = "hidden"                        
        }
        if(position1!="11")
        {
         document.getElementById("a11").style.visibility= "visible"                        
        }   
        if(position1=="12")
        {
         document.getElementById("a12").style.visibility = "hidden"                        
        }
        if(position1!="12")
        {
         document.getElementById("a12").style.visibility= "visible"                        
        } 


    }
       checkdiv();  
  </script>

そして、この過去のすべては、次の表の列 Ordre で:

<form action="#" method="post">
<table width='100%' id='boxa' align='center' ><thead><tr><th scope='col' width='3%'><strong>CODE CLIENT</strong></th><th scope='col' width='10%'><strong>TITRE</strong></th><th scope='col' width='15%'><strong>POSTE</strong></th><th scope='col' width='3%'><strong>ORDRE</strong></th><th scope='col' width='25%'><strong>DESCRIPTION</strong></th><th scope='col' width='10%'><strong>VU CLIENT</strong></th><th scope='col' width='10%'><strong>VU TIERS</strong></th></tr></thead><tbody> <tr>

        <td>
        <input name="data[1][code_client]" type="text"  id="code_client1" size="5"  onkeyup="clientventilation()" /></td>
        <td><input name="data[1][libelle]" type="text" size="10" id="libelle1" onkeyup="titreventilation()"  /></td>
        <td><input name="data[1][poste]" type="text" value="Principal" size="30" /></td>
        <td><input name="data[1][ordre]" id="position1" type="text" size="2"  onblur="checkdiv()" /></td>
        <td><input name="data[1][description]" type="text" value="Montant de la dette" size="40" /></td><td><select name="data[1][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[1][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[2][code_client]" type="text" size="5" id="code_client2"  /></td>
        <td><input name="data[2][libelle]" type="text" size="10" id="libelle2"   /></td>
        <td><input name="data[2][poste]" type="text" value="Int&eacute;r&ecirc;ts" size="30" /></td>
        <td><input name="data[2][ordre]" type="text" size="2" id="position2" onblur="checkdiv()" /></td>
        <td><input name="data[2][description]" type="text" value="Int&eacute;r&ecirc;ts (sur soldes des factures d&ucirc;es)" size="40" /></td><td><select name="data[2][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[2][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>

        <tr>

        <td><input name="data[3][code_client]" type="text" size="5" id="code_client3"  /></td>
        <td><input name="data[3][libelle]" type="text" size="10" id="libelle3"  /></td>
        <td><input name="data[3][poste]" type="text" value="Clause p&eacute;nale" size="30" /></td>
        <td><input name="data[3][ordre]" type="text" size="2" id="position3" onblur="checkdiv()" /></td>
        <td><input name="data[3][description]" type="text" value="Clause p&eacute;nale contractuelle" size="40" /></td><td><select name="data[3][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[3][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[4][code_client]" type="text" size="5" id="code_client4"  /></td>
        <td><input name="data[4][libelle]" type="text" size="10" id="libelle4"  /></td>
        <td><input name="data[4][poste]" type="text" value="Dommages et Int&eacute;r&ecirc;ts" size="30" /></td>
        <td><input name="data[4][ordre]" type="text" size="2" id="position4" onblur="checkdiv()" /></td>
        <td><input name="data[4][description]" type="text" value="Montant des Dommages et Int&eacute;r&ecirc;ts" size="40" /></td><td><select name="data[4][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[4][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[5][code_client]" type="text" size="5" id="code_client5"  /></td>
        <td><input name="data[5][libelle]" type="text" size="10" id="libelle5"  /></td>
        <td><input name="data[5][poste]" type="text" value="Article 700 du CPC" size="30" /></td>
        <td><input name="data[5][ordre]" type="text" size="2" id="position5" onblur="checkdiv()" /></td>
        <td><input name="data[5][description]" type="text" value="Montant correspondant &agrave; la condamnation" size="40" /></td><td><select name="data[5][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[5][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[6][code_client]" type="text" size="5" id="code_client6"  /></td>
        <td><input name="data[6][libelle]" type="text" size="10" id="libelle6"  /></td>
        <td><input name="data[6][poste]" type="text" value="Frais AR" size="30" /></td>
        <td><input name="data[6][ordre]" type="text" size="2" id="position6" onblur="checkdiv()" /></td>
        <td><input name="data[6][description]" type="text" value="Montant des frais d'accus&eacute;s r&eacute;ception et de courriers" size="40" /></td><td><select name="data[6][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[6][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[7][code_client]" type="text" size="5" id="code_client7"  /></td>
        <td><input name="data[7][libelle]" type="text" size="10" id="libelle7"  /></td>
        <td><input name="data[7][poste]" type="text" value="Art. 441-6 CC" size="30" /></td>
        <td><input name="data[7][ordre]" type="text" size="2" id="position7" onblur="checkdiv()" /></td>
        <td><input name="data[7][description]" type="text" value="Article 441-6 du code du commerce" size="40" /></td><td><select name="data[7][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[7][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[8][code_client]" type="text" size="5" id="code_client8"  /></td>
        <td><input name="data[8][libelle]" type="text" size="10" id="libelle8"  /></td>
        <td><input name="data[8][poste]" type="text" value="Frais et Agios" size="30" /></td>
        <td><input name="data[8][ordre]" type="text" size="2" id="position8" onblur="checkdiv()" /></td>
        <td><input name="data[8][description]" type="text" value="Montant des frais &amp; agios bancaires" size="40" /></td><td><select name="data[8][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[8][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[9][code_client]" type="text" size="5" id="code_client9"  /></td>
        <td><input name="data[9][libelle]" type="text" size="10" id="libelle9"  /></td>
        <td><input name="data[9][poste]" type="text" value="D&eacute;pens" size="30" /></td>
        <td><input name="data[9][ordre]" type="text" size="2" id="position9" onblur="checkdiv()" /></td>
        <td><input name="data[9][description]" type="text" value="Total calcul&eacute;" size="40" /></td><td><select name="data[9][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[9][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>

        <tr>

        <td><input name="data[10][code_client]" type="text" size="5" id="code_client10"  /></td>
        <td><input name="data[10][libelle]" type="text" size="10" id="libelle10"  /></td>
        <td><input name="data[10][poste]" type="text" value="Article 475-1-CPP" size="30" /></td>
        <td><input name="data[10][ordre]" type="text" size="2" id="position10" onblur="checkdiv()" /></td>
        <td><input name="data[10][description]" type="text" value="Article 475-1 Du code de Proc&eacute;dure p&eacute;nale" size="40" /></td><td><select name="data[10][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[10][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[11][code_client]" type="text" size="5" id="code_client11"  /></td>
        <td><input name="data[11][libelle]" type="text" size="10" id="libelle11"  /></td>
        <td><input name="data[11][poste]" type="text" value="Frais d'ex&eacute;cution" size="30" /></td>
        <td><input name="data[11][ordre]" type="text" size="2" id="position11" onblur="checkdiv()" /></td>
        <td><input name="data[11][description]" type="text" value="Montant des frais d'ex&eacute;cution" size="40" /></td><td><select name="data[11][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[11][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>

        <tr>
                <td><input name="data[12][code_client]" type="text" size="5" id="code_client12"  /></td>
        <td><input name="data[12][libelle]" type="text" size="10" id="libelle12"  /></td>
        <td><input name="data[12][poste]" type="text" value="Contribution &agrave; l'aide juridiqu" size="30" /></td>
        <td><input name="data[12][ordre]" type="text" size="2" id="position12" onblur="checkdiv()" /></td>
        <td><input name="data[12][description]" type="text" value="Contribution à l'aide juridique" size="40" /></td><td><select name="data[12][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[12][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[13][code_client]" type="text" size="5" id="code_client13"  /></td>
        <td><input name="data[13][libelle]" type="text" size="10" id="libelle13"  /></td>
        <td><input name="data[13][poste]" type="text" value="Frais de greffe" size="30" /></td>
        <td><input name="data[13][ordre]" type="text" size="2" id="position13" onblur="checkdiv()" /></td>
        <td><input name="data[13][description]" type="text" value="Montant des frais de greffe" size="40" /></td><td><select name="data[13][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[13][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
   </tbody>
</table>

しかし、関数を機能させようとすると、null のプロパティ スタイルを読み取れないと表示されます。数字が列「ordre」の入力に入力されている場合、数字でオレンジ色のボックスを非表示にしたいだけです。そして、誰かがアラートを表示するためだけに、別のボックスに存在するのと同じ番号を 2 回書いた場合。このビギニングがうまくいかないので本当に負けました。

どんなアドバイスや助けも大歓迎です

これがjsfiddleです。http://jsfiddle.net/uXcQh/

Answer 1

head タグに JavaScript を含めている場合、関数が呼び出されたときに DOM が完全に読み込まれていないことが原因である可能性があります。

<html>
   <head>
       <script></script>
   </head>
   <body>
   </body>
</html>

私の提案は、代わりにこれを行うことです。

<html>
   <head>
   </head>
   <body>
       All your html goes here.
       FINALLY.
       <script></script>
   </body>
</html>

これは私のために働くコードです

<html>
<body>
<form action="#" method="post">
<table width='100%' id='boxa' align='center' ><thead><tr><th scope='col' width='3%'><strong>CODE CLIENT</strong></th><th scope='col' width='10%'><strong>TITRE</strong></th><th scope='col' width='15%'><strong>POSTE</strong></th><th scope='col' width='3%'><strong>ORDRE</strong></th><th scope='col' width='25%'><strong>DESCRIPTION</strong></th><th scope='col' width='10%'><strong>VU CLIENT</strong></th><th scope='col' width='10%'><strong>VU TIERS</strong></th></tr></thead><tbody>    <tr>

        <td>
        <input name="data[1][code_client]" type="text"  id="code_client1" size="5"  onkeyup="clientventilation()" /></td>
        <td><input name="data[1][libelle]" type="text" size="10" id="libelle1" onkeyup="titreventilation()"  /></td>
        <td><input name="data[1][poste]" type="text" value="Principal" size="30" /></td>
        <td><input name="data[1][ordre]" id="position1" type="text" size="2"  onblur="checkdiv()" /></td>
        <td><input name="data[1][description]" type="text" value="Montant de la dette" size="40" /></td><td><select name="data[1][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[1][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[2][code_client]" type="text" size="5" id="code_client2"  /></td>
        <td><input name="data[2][libelle]" type="text" size="10" id="libelle2"   /></td>
        <td><input name="data[2][poste]" type="text" value="Int&eacute;r&ecirc;ts" size="30" /></td>
        <td><input name="data[2][ordre]" type="text" size="2" id="position2" onblur="checkdiv()" /></td>
        <td><input name="data[2][description]" type="text" value="Int&eacute;r&ecirc;ts (sur soldes des factures d&ucirc;es)" size="40" /></td><td><select name="data[2][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[2][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>

        <tr>

        <td><input name="data[3][code_client]" type="text" size="5" id="code_client3"  /></td>
        <td><input name="data[3][libelle]" type="text" size="10" id="libelle3"  /></td>
        <td><input name="data[3][poste]" type="text" value="Clause p&eacute;nale" size="30" /></td>
        <td><input name="data[3][ordre]" type="text" size="2" id="position3" onblur="checkdiv()" /></td>
        <td><input name="data[3][description]" type="text" value="Clause p&eacute;nale contractuelle" size="40" /></td><td><select name="data[3][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[3][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[4][code_client]" type="text" size="5" id="code_client4"  /></td>
        <td><input name="data[4][libelle]" type="text" size="10" id="libelle4"  /></td>
        <td><input name="data[4][poste]" type="text" value="Dommages et Int&eacute;r&ecirc;ts" size="30" /></td>
        <td><input name="data[4][ordre]" type="text" size="2" id="position4" onblur="checkdiv()" /></td>
        <td><input name="data[4][description]" type="text" value="Montant des Dommages et Int&eacute;r&ecirc;ts" size="40" /></td><td><select name="data[4][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[4][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[5][code_client]" type="text" size="5" id="code_client5"  /></td>
        <td><input name="data[5][libelle]" type="text" size="10" id="libelle5"  /></td>
        <td><input name="data[5][poste]" type="text" value="Article 700 du CPC" size="30" /></td>
        <td><input name="data[5][ordre]" type="text" size="2" id="position5" onblur="checkdiv()" /></td>
        <td><input name="data[5][description]" type="text" value="Montant correspondant &agrave; la condamnation" size="40" /></td><td><select name="data[5][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[5][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[6][code_client]" type="text" size="5" id="code_client6"  /></td>
        <td><input name="data[6][libelle]" type="text" size="10" id="libelle6"  /></td>
        <td><input name="data[6][poste]" type="text" value="Frais AR" size="30" /></td>
        <td><input name="data[6][ordre]" type="text" size="2" id="position6" onblur="checkdiv()" /></td>
        <td><input name="data[6][description]" type="text" value="Montant des frais d'accus&eacute;s r&eacute;ception et de courriers" size="40" /></td><td><select name="data[6][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[6][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[7][code_client]" type="text" size="5" id="code_client7"  /></td>
        <td><input name="data[7][libelle]" type="text" size="10" id="libelle7"  /></td>
        <td><input name="data[7][poste]" type="text" value="Art. 441-6 CC" size="30" /></td>
        <td><input name="data[7][ordre]" type="text" size="2" id="position7" onblur="checkdiv()" /></td>
        <td><input name="data[7][description]" type="text" value="Article 441-6 du code du commerce" size="40" /></td><td><select name="data[7][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[7][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[8][code_client]" type="text" size="5" id="code_client8"  /></td>
        <td><input name="data[8][libelle]" type="text" size="10" id="libelle8"  /></td>
        <td><input name="data[8][poste]" type="text" value="Frais et Agios" size="30" /></td>
        <td><input name="data[8][ordre]" type="text" size="2" id="position8" onblur="checkdiv()" /></td>
        <td><input name="data[8][description]" type="text" value="Montant des frais &amp; agios bancaires" size="40" /></td><td><select name="data[8][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[8][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[9][code_client]" type="text" size="5" id="code_client9"  /></td>
        <td><input name="data[9][libelle]" type="text" size="10" id="libelle9"  /></td>
        <td><input name="data[9][poste]" type="text" value="D&eacute;pens" size="30" /></td>
        <td><input name="data[9][ordre]" type="text" size="2" id="position9" onblur="checkdiv()" /></td>
        <td><input name="data[9][description]" type="text" value="Total calcul&eacute;" size="40" /></td><td><select name="data[9][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[9][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>

        <tr>

        <td><input name="data[10][code_client]" type="text" size="5" id="code_client10"  /></td>
        <td><input name="data[10][libelle]" type="text" size="10" id="libelle10"  /></td>
        <td><input name="data[10][poste]" type="text" value="Article 475-1-CPP" size="30" /></td>
        <td><input name="data[10][ordre]" type="text" size="2" id="position10" onblur="checkdiv()" /></td>
        <td><input name="data[10][description]" type="text" value="Article 475-1 Du code de Proc&eacute;dure p&eacute;nale" size="40" /></td><td><select name="data[10][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[10][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[11][code_client]" type="text" size="5" id="code_client11"  /></td>
        <td><input name="data[11][libelle]" type="text" size="10" id="libelle11"  /></td>
        <td><input name="data[11][poste]" type="text" value="Frais d'ex&eacute;cution" size="30" /></td>
        <td><input name="data[11][ordre]" type="text" size="2" id="position11" onblur="checkdiv()" /></td>
        <td><input name="data[11][description]" type="text" value="Montant des frais d'ex&eacute;cution" size="40" /></td><td><select name="data[11][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[11][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>

        <tr>
                <td><input name="data[12][code_client]" type="text" size="5" id="code_client12"  /></td>
        <td><input name="data[12][libelle]" type="text" size="10" id="libelle12"  /></td>
        <td><input name="data[12][poste]" type="text" value="Contribution &agrave; l'aide juridiqu" size="30" /></td>
        <td><input name="data[12][ordre]" type="text" size="2" id="position12" onblur="checkdiv()" /></td>
        <td><input name="data[12][description]" type="text" value="Contribution à l'aide juridique" size="40" /></td><td><select name="data[12][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[12][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
        <tr>

        <td><input name="data[13][code_client]" type="text" size="5" id="code_client13"  /></td>
        <td><input name="data[13][libelle]" type="text" size="10" id="libelle13"  /></td>
        <td><input name="data[13][poste]" type="text" value="Frais de greffe" size="30" /></td>
        <td><input name="data[13][ordre]" type="text" size="2" id="position13" onblur="checkdiv()" /></td>
        <td><input name="data[13][description]" type="text" value="Montant des frais de greffe" size="40" /></td><td><select name="data[13][vu_client]" ><option value="oui">oui</option><option value="non">non</option></select></td><td><select name="data[13][vu_tiers]" ><option value="oui">oui</option><option value="non">non</option></select></td>
        </tr>
   </tbody>
</table>
    <table width="100%" border="0" cellspacing="5" cellpadding="5">
  <tbody><tr>
    <th scope="col"><div id="a1" style="width: 35px; height: 35px; border: 5px solid rgb(255, 127, 80); text-align: center; visibility: visible; "><font color="coral" size="+3"><strong>1</strong></font></div></th>
    <th scope="col"><div id="a2" style="width: 35px; height: 35px; border: 5px solid rgb(255, 127, 80); text-align: center; visibility: visible; "><font color="coral" size="+3"><strong>2</strong></font></div></th>
    <th scope="col"><div id="a3" style="width: 35px; height: 35px; border: 5px solid rgb(255, 127, 80); text-align: center; visibility: visible; "><font color="coral" size="+3"><strong>3</strong></font></div></th>
    <th scope="col"><div id="a4" style="width: 35px; height: 35px; border: 5px solid rgb(255, 127, 80); text-align: center; visibility: visible; "><font color="coral" size="+3"><strong>4</strong></font></div></th>
    <th scope="col"><div id="a5" style="width: 35px; height: 35px; border: 5px solid rgb(255, 127, 80); text-align: center; visibility: visible; "><font color="coral" size="+3"><strong>5</strong></font></div></th>
    <th scope="col"><div id="a6" style="width: 35px; height: 35px; border: 5px solid rgb(255, 127, 80); text-align: center; visibility: visible; "><font color="coral" size="+3"><strong>6</strong></font></div></th>
    <th scope="col"><div id="a7" style="width: 35px; height: 35px; border: 5px solid rgb(255, 127, 80); text-align: center; visibility: visible; "><font color="coral" size="+3"><strong>7</strong></font></div></th>
    <th scope="col"><div id="a8" style="width: 35px; height: 35px; border: 5px solid rgb(255, 127, 80); text-align: center; visibility: visible; "><font color="coral" size="+3"><strong>8</strong></font></div></th>
    <th scope="col"><div id="a9" style="width: 35px; height: 35px; border: 5px solid rgb(255, 127, 80); text-align: center; visibility: visible; "><font color="coral" size="+3"><strong>9</strong></font></div></th>
    <th scope="col"><div id="a10" style="width: 35px; height: 35px; border: 5px solid rgb(255, 127, 80); text-align: center; visibility: visible; "><font color="coral" size="+3"><strong>10</strong></font></div></th>
    <th scope="col"><div id="a11" style="width: 35px; height: 35px; border: 5px solid rgb(255, 127, 80); text-align: center; visibility: visible; "><font color="coral" size="+3"><strong>11</strong></font></div></th>
    <th scope="col"><div id="a12" style="width: 35px; height: 35px; border: 5px solid rgb(255, 127, 80); text-align: center; visibility: visible; "><font color="coral" size="+3"><strong>12</strong></font></div></th>
    <th scope="col"><div id="a13" style="width: 35px; height: 35px; border: 5px solid rgb(255, 127, 80); text-align: center; visibility: hidden; "><font color="coral" size="+3"><strong>13</strong></font></div></th>
  </tr>
</tbody></table>
?
<script type="text/javascript">
function checkdiv()
{
    var position1= document.getElementById("position1").value;
    if(position1== 1 )
    {
    alert(document.getElementById("a1"));
        document.getElementById("a1").style.visibility = "hidden"                        
    }
    else
    {
     document.getElementById("a1").style.visibility= "visible"                        
    }
    if(position1=="2")
    {
     document.getElementById("a2").style.visibility = "hidden"                        
    }
    if(position1!="2")
    {
     document.getElementById("a2").style.visibility= "visible"                        
    }
    if(position1=="3")
    {
     document.getElementById("a3").style.visibility = "hidden"                        
    }
    if(position1!="3")
    {
     document.getElementById("a3").style.visibility= "visible"                        
    }
     if(position1=="4")
    {
     document.getElementById("a4").style.visibility = "hidden"                        
    }
    if(position1!="4")
    {
     document.getElementById("a4").style.visibility= "visible"                        
    }  
     if(position1=="5")
    {
     document.getElementById("a5").style.visibility = "hidden"                        
    }
    if(position1!="5")
    {
     document.getElementById("a5").style.visibility= "visible"                        
    }
    if(position1=="6")
    {
     document.getElementById("a6").style.visibility = "hidden"                        
    }
    if(position1!="6")
    {
     document.getElementById("a6").style.visibility= "visible"                        
    }
     if(position1=="7")
    {
     document.getElementById("a7").style.visibility = "hidden"                        
    }
    if(position1!="7")
    {
     document.getElementById("a7").style.visibility= "visible"                        
    }
     if(position1=="8")
    {
     document.getElementById("a8").style.visibility = "hidden"                        
    }
    if(position1!="8")
    {
     document.getElementById("a8").style.visibility= "visible"                        
    }          
    if(position1=="9")
    {
     document.getElementById("a9").style.visibility = "hidden"                        
    }
    if(position1!="9")
    {
     document.getElementById("a9").style.visibility= "visible"                        
    }
     if(position1=="10")
    {
     document.getElementById("a10").style.visibility = "hidden"                        
    }
    if(position1!="10")
    {
     document.getElementById("a10").style.visibility= "visible"                        
    }          
    if(position1=="11")
    {
     document.getElementById("a11").style.visibility = "hidden"                        
    }
    if(position1!="11")
    {
     document.getElementById("a11").style.visibility= "visible"                        
    }   
    if(position1=="12")
    {
     document.getElementById("a12").style.visibility = "hidden"                        
    }
    if(position1!="12")
    {
     document.getElementById("a12").style.visibility= "visible"                        
    }
}  
  </script>

  </body>
  </html>