如何使用功能相同的同一列的HTML多行

复选框功能只工作了ROW1，当从数据库中添加多行则显示复选框，但复选框功能并没有为他们如何使用功能相同的同一列的HTML多行

function selectOnlyThis(id) { 
 
    for (var i = 1; i <= 2; i++) { 
 
    document.getElementById(i).checked = false; 
 
    } 
 
    document.getElementById(id).checked = true; 
 
} 
 

 
function myFunction() { 
 
    var x = document.getElementById("demo"); 
 
    x.style.color = "blue"; 
 
} 
 

 
function myFunction1() { 
 
    var x = document.getElementById("demo"); 
 
    x.style.color = "Red"; 
 
}

.dropbtn { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 6px; 
 
    font-size: 16px; 
 
    border: none; 
 
    cursor: pointer; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 

 
.dropdown-content { 
 
    display: none; 
 
    position: absolute; 
 
    background-color: #f9f9f9; 
 
    min-width: 160px; 
 
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2); 
 
    z-index: 1; 
 
} 
 

 
.dropdown-content a { 
 
    color: black; 
 
    padding: 12px 16px; 
 
    text-decoration: none; 
 
    display: block; 
 
} 
 

 
.dropdown-content a:hover { 
 
    background-color: #f1f1f1 
 
} 
 

 
.dropdown:hover .dropdown-content { 
 
    display: block; 
 
} 
 

 
.dropdown:hover .dropbtn { 
 
    background-color: #3e8e41; 
 
} 
 

 
.myCheckbox2 { 
 
    margin-left: 4px; 
 
}

<link href="http://fonts.googleapis.com/css?family=Exo:400,800" rel="stylesheet" type="text/css"> 
 

 
<body data-spy="scroll"> 
 
    <!-- TOP MENU NAVIGATION --> 
 
    <div class="navbar navbar-fixed-top"> 
 
    <div class="navbar-inner" style="font-size:40px"> 
 
     <img class="" alt="" style="padding-top:10px;padding-left:40px;width:50px;height:40px;" src="img/icon.png"> </img> 
 
     &nbsp;&nbsp;&nbsp;&nbsp; Welcome to Electronic Notice Board 
 
    </div> 
 

 
    <div class="container"> 
 
     <a class="brand pull-left" href="#" style="color:Grey;padding-left:10px;"></a> 
 
     <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     <span class="icon-bar"></span> 
 
     </a> 
 
     <div class="nav-collapse collapse"></div> 
 
    </div> 
 
    </div> 
 
    </div> 
 
    <br> 
 
    <br> 
 
    <br> 
 

 
    <!-- MAIN CONTENT --> 
 
    <div class="" id="home"> 
 
    <!-- HOME --> 
 
    <div class="row-fluid"> 
 
     <!-- PHONES IMAGE FOR DESKTOP MEDIA QUERY --> 
 
     <div class="span3 visible-desktop"> 
 
     <div id="myCarousel" class="carousel slide"> 
 
      <div class="carousel-inner"> 
 
      <div class="item active"> 
 
       <img src="img/slide1.jpg" class="img-responsive"> 
 
       <div class="carousel-caption"> 
 
       <h3>WELCOME</h3> 
 
       <p>UIIT Department</p> 
 
       </div> 
 
      </div> 
 
      <div class="item"> 
 
       <img src="img/slide2.jpg" class="img-responsive"> 
 
      </div> 
 
      <div class="item"> 
 
       <img src="img/slide3.jpg" class="img-responsive"> 
 
      </div> 
 
      </div> 
 
      <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
 
      <span class="icon-prev"></span> 
 
      </a> 
 

 
      <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
 
      <span class="icon-next"></span> 
 
      </a> 
 
     </div> 
 
     <ul> 
 
      <button class="btn btn-primary" style="font-size:20px;">Student Information</button> 
 
     </ul> 
 

 
     <?php 
 
\t \t \t \t \t $link = mysqli_connect("localhost","root","","timetable"); 
 
\t \t \t \t \t if($link) { 
 
\t \t \t \t \t \t //echo "coonected succesfuuly"; 
 
\t \t \t \t \t } 
 
\t \t \t \t \t $query1 ="select * from notice"; 
 
\t \t \t \t \t 
 
\t \t \t \t \t $run = mysqli_query($link,$query1); \t 
 
\t \t \t \t \t 
 
\t \t \t \t \t while($row = mysqli_fetch_assoc($run)){ 
 
\t \t \t \t \t ?> 
 
      <ul> 
 
       <li style="color:grey; font-size:25px;line-height:1.5; "> 
 
       <?php echo $row['student_notice']; ?> 
 
       </li> 
 
      </ul> 
 
      <?php \t } \t ?> 
 

 
      <ul> 
 
      <button class="btn btn-primary" style="font-size:20px;"> News & Events</button> 
 
      </ul> 
 

 
      <marquee id="test" behavior="auto" direction="up" height="auto" scrollamount="2" onmouseover="this.stop()" onmouseout="this.start()" style=" width:400px;height:320px;text-align:justify;"> 
 
      <?php 
 
\t \t \t \t \t \t $link = mysqli_connect("localhost","root","","timetable"); 
 
\t \t \t \t \t \t if($link) { 
 
\t \t \t \t \t \t \t //echo "coonected succesfuuly"; 
 
\t \t \t \t \t \t } 
 
\t \t \t \t \t \t $query1 ="select * from event"; 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t $run = mysqli_query($link,$query1); \t 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t \t while($row = mysqli_fetch_assoc($run)){ 
 
\t \t \t \t \t \t ?> 
 
       <p> 
 
       <a href="#" style="color:grey; font-size:25px;line-height:2;"><img src="img/New.gif" style="width:20px; height:20px; font-size:18px; text-align:; "> 
 
        <?php echo $row['event']; ?> 
 
       </a> 
 
       </p> 
 
      <?php \t } \t ?> 
 
      </marquee>   
 
      <br><br> 
 
      <table border="3px" align="center" width: "" style="font-size:15px;height:350px;width:400px;"> 
 
      <tr> 
 
       <td style="text-align:center;color:grey;background-color:lightblue;font-size:22px"> 
 
       <B> Time: </B> </td> 
 
       <td Style=" border:3px;text-align:center;font-size:20px"> 
 
       <select style="text-align:center;color:grey;background-color:lightblue;font-size:20px;width:200px; height:60px;"> 
 
     \t \t \t \t \t <option > 8:00 AM to 9:20 AM </option> 
 
     \t \t \t \t \t <option > 9:30 AM to 10:20 AM</option> 
 
     \t \t \t \t \t <option> 10:30 AM to 11:20 AM</option> 
 
     \t \t \t \t \t <option> 11:30 AM to 12:20 PM</option> 
 
    \t \t \t \t  </select> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td style="text-align:center;color:grey;background-color:lightblue;font-size:22px"> 
 
       <B> Total Class: </B> </td> 
 
       <td Style=" border:3px;"> 
 
       <select style="text-align:center;color:grey;background-color:lightblue;font-size:20px;width:200px; height:60px;"> 
 
     \t \t \t \t \t <option>0</option> 
 
     \t \t \t \t \t <option>1</option> 
 
        <option>2</option> 
 
        <option>3</option> 
 
        <option>4</option> 
 
     \t \t \t \t \t <option>5</option> 
 
        <option>6 </option> 
 
     \t \t \t \t \t <option>7</option> 
 
     \t \t \t \t \t <option>8</option> 
 
     \t \t \t \t \t <option>9</option> 
 
     \t \t \t \t \t <option>10</option> 
 
     \t \t \t \t \t <option>11</option> 
 
     \t \t \t \t \t <option>12</option> 
 
     \t \t \t \t \t <option>13</option> 
 
     \t \t \t \t \t <option>14</option> 
 
     \t \t \t \t \t <option>15</option> 
 
     \t \t \t \t \t <option>16</option> 
 
     \t \t \t \t \t <option>17</option> 
 
     \t \t \t \t \t <option>18</option> 
 
     \t \t \t \t \t <option>19</option> 
 
     \t \t \t \t \t <option>20</option> 
 
     \t \t \t \t \t <option>21</option> 
 
     \t \t \t \t \t <option>22</option> 
 
     \t \t \t \t \t <option>23</option> 
 
     \t \t \t \t \t <option>24</option> 
 
     \t \t \t \t \t <option>25</option> \t \t \t \t \t 
 
\t \t \t \t   </select> 
 
       </td> 
 
      </tr> 
 
      <tr> 
 
       <td style="text-align:center;color:grey;background-color:lightblue;font-size:22px"> 
 
       <B> Class being Held: </B> 
 
       </td> 
 
       <td Style=" border:3px;"> 
 
       <select style="text-align:center;color:grey;background-color:lightblue;font-size:20px;width:200px; height:60px;"> 
 
     \t \t \t \t \t <option>0</option> 
 
     \t \t \t \t \t <option>1</option> 
 
        <option>2</option> 
 
        <option>3</option> 
 
        <option>4</option> 
 
     \t \t \t \t \t <option>5</option> 
 
        <option>6 </option> 
 
     \t \t \t \t \t <option>7</option> 
 
     \t \t \t \t \t <option>8</option> 
 
     \t \t \t \t \t <option>9</option> 
 
     \t \t \t \t \t <option>10</option> 
 
     \t \t \t \t \t <option>11</option> 
 
     \t \t \t \t \t <option>12</option> 
 
     \t \t \t \t \t <option>13</option> 
 
     \t \t \t \t \t <option>14</option> 
 
     \t \t \t \t \t <option>15</option> 
 
     \t \t \t \t \t <option>16</option> 
 
     \t \t \t \t \t <option>17</option> 
 
     \t \t \t \t \t <option>18</option> 
 
     \t \t \t \t \t <option>19</option> 
 
     \t \t \t \t \t <option>20</option> 
 
     \t \t \t \t \t <option>21</option> 
 
     \t \t \t \t \t <option>22</option> 
 
     \t \t \t \t \t <option>23</option> 
 
     \t \t \t \t \t <option>24</option> 
 
     \t \t \t \t <option>25</option> 
 
       </select> 
 
       </td> 
 
      </tr> 
 
      </tr> 
 
      <tr> 
 
       <td style="text-align:center;color:grey;background-color:lightblue;font-size:22px"> 
 
       <B> Cancel Class: </B> 
 
       </td> 
 
       <td Style="border:3px;"> 
 
       <select style="text-align:center;color:grey;background-color:lightblue;font-size:20px;width:200px; height:60px;"> 
 
      \t \t \t \t <option>0</option> 
 
      \t \t \t \t <option>1</option> 
 
      \t \t \t \t <option>2</option> 
 
      \t \t \t \t <option>3</option> 
 
      \t \t \t \t <option>4</option> 
 
      \t \t \t \t <option>5</option> 
 
      \t \t \t \t <option>6</option> 
 
      \t \t \t \t <option>7</option> 
 
      \t \t \t \t <option> 8</option> 
 
      \t \t \t \t <option>9</option> 
 
      \t \t \t \t <option>10</option> 
 
      \t \t \t \t <option>11</option> 
 
      \t \t \t </select> 
 
       </td> 
 
      </tr> 
 
      </table> 
 
      <br> 
 
      <table border="3px" align="center" style="font-size:15px;height:350px;width:400px "> 
 
      <tr> 
 
       <tr> 
 
       <td style="text-align:center;color:grey;background-color:lightblue;font-size:22px"> 
 
        <B>Rescheduled Class:</B> </td> 
 
       </tr> 
 

 
       <?php 
 
     \t \t \t \t //$day1=date("l"); 
 
     \t \t \t \t // $shift1='morning'; 
 
     \t \t \t \t $day1=$_POST['selectday']; 
 
     \t \t \t \t $shift1=$_POST['selectshift']; 
 
     \t \t \t \t // echo date('e'); 
 
     \t \t \t \t //$date11=date('d-m-Y');   \t \t \t \t 
 
     \t \t \t \t 
 
     \t \t \t \t //$date11=$_POST['date']; 
 
     \t \t \t \t //echo "$date11"; 
 
     \t \t \t \t $link = mysqli_connect("localhost","root","","timetable"); 
 
     \t \t \t \t if($link) { 
 
     \t \t \t \t \t //echo "coonected succesfuuly"; 
 
     \t \t \t \t } 
 
     \t \t \t \t $query1 ="SELECT * from rescheduleclass where shift='$shift1' && day='$day1' "; 
 
     \t \t \t \t 
 
     \t \t \t \t $run = mysqli_query($link,$query1); \t 
 
\t \t \t \t 
 
     \t \t \t \t while($row = mysqli_fetch_assoc($run)){ 
 
     \t \t \t \t ?> 
 
       <tr> 
 
        <td style="font-size:18px; width:450px;"> 
 
        <B> <?php echo $row['reclass1']; ?> </B> </td> 
 
       </tr> 
 
       <tr> 
 
        <td style="font-size:18px; width:450px;"> 
 
        <B> <?php echo $row['reclass2']; ?> </B> </td> 
 
       </tr> 
 
       <tr> 
 
        <td style="font-size:18px; width:450px;"> 
 
        <B> <?php echo $row['reclass3']; ?> </B> </td> 
 

 
       </tr> 
 
       <?php 
 
      \t \t \t \t } 
 
      \t \t \t ?> 
 
      </table> 
 
     </div> 
 
     <!-- APP DETAILS --> 
 
     <div class="span3"> 
 
     <!-- ICON --> 
 
     <div class="visible-desktop" id="icon"> 
 
      <?php 
 
\t \t \t \t // $day1=date("l"); 
 
\t \t \t \t // $shift1='morning'; 
 
\t \t \t \t 
 
\t \t \t \t $day1=$_POST['selectday']; 
 
\t \t \t \t $shift1=$_POST['selectshift']; 
 
\t \t \t  ?> 
 
      <h1 style="text-align:center;font-size:20px; color:red;"> Time Table Spring-2017 Semester (Morning) &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; 
 
      <button class="btn btn-primary" type="" style="position:center;font-size:20px;"><?php echo $day1; ?> </button> </h1> 
 
      <div class="table-responsive"> 
 
       <table width="1300" heigth="900" border="1"> 
 
       <tr> 
 
        <th scope="col" style="color:black;background-color:lightblue;"> 
 
        <B> Class </B> 
 
        </th> 
 
        <th scope="col" style="color:black;background-color:lightblue;"> 8:30 AM to 9:20 AM</th> 
 
        <th scope="col" style="color:black;background-color:lightblue;"> 9:30 AM to 10:20 AM</th> 
 
        <th scope="col" style="color:black;background-color:lightblue;"> 10:30 AM to 11:20 AM</th> 
 
        <th scope="col" style="color:black;background-color:lightblue;"> 11:30 AM to 12:20 PM</th> 
 
       </tr> 
 
       <?php 
 
     \t \t \t \t \t \t //$day1=date("l"); 
 
     \t \t \t \t \t \t //  $shift1='morning'; 
 
     \t \t \t \t \t \t $shift1=$_POST['selectshift']; 
 
     \t \t \t \t \t \t $day1=$_POST['selectday']; 
 
     \t \t \t \t \t \t //$shift1=$_POST['shift']; 
 
     \t \t \t \t \t \t $link = mysqli_connect("localhost","root","","timetable"); 
 
     \t \t \t \t \t \t if($link) { 
 
     \t \t \t \t \t \t \t //echo "coonected succesfuuly"; 
 
     \t \t \t \t \t \t } 
 
     \t \t \t \t \t \t $query1 ="select * from timetable_morning where shift='$shift1'&& day='$day1'"; 
 
     \t \t \t \t \t \t 
 
     \t \t \t \t \t \t $run = mysqli_query($link,$query1);  \t \t \t \t \t \t 
 
     \t \t \t \t \t \t 
 
     \t \t \t \t \t \t while($row = mysqli_fetch_assoc($run)){ 
 
     \t \t \t \t \t \t ?> 
 
        <tr> 
 
        <td scope="col" style="border: 1px solid ;text-align: left;padding: 8px;color:black; background-color:grey;"> 
 
         <button style="width:150px; height:50px; background-color:lightblue; color:black; font-weight:900px; font-size:16px; font-family:Comic Sans MS;" onclick="this.style.backgroundColor = 'red';" ondblclick="this.style.backgroundColor = 'lightblue';"><B> <?php echo $row['class']; ?> </B></button>      
 
        </td> 
 
        <td scope="col" style="border: 1px solid ;text-align: left;padding: 8px;color:black; background-color:pink;"> 
 
         <h3 id="demo"> Class: 
 
         <div class="dropdown"> 
 
          <button class="dropbtn">Class Option</button> 
 
          <div class="dropdown-content"> 
 
          <a href="#"><input type="checkbox" id="1" onclick="myFunction(); selectOnlyThis(this.id); " value="box1" name="checkbox[]" Size="12"><label for="1">Held</label></input> 
 
          </a> 
 
          <a href="#"><input type="checkbox" id="2" onclick="myFunction1(); selectOnlyThis(this.id); " value="box2" name="checkbox[]" Size="12"><label for="2">Cancel</label></input> 
 
          </a> 
 
          </div> 
 
         </div> 
 
         </h3> 
 
         <?php echo $row['slot1']; ?> 
 
        </td> 
 
        <td scope="col" style="border: 1px solid ;text-align: left;padding: 8px; color:black; background-color:grey;"> 
 
         <button style="width:320px; height:50px; background-color:white; color:black; font-weight:900px; font-size:16px; font-family:Comic Sans MS;" onclick="this.style.backgroundColor = 'red';" ondblclick="this.style.backgroundColor = 'lightgreen';"> <?php echo $row['slot2']; ?> </button> 
 
        </td> 
 
        <td scope="col" style="border: 1px solid ;text-align: left;padding: 8px;color:black; background-color:grey;"> 
 
         <button style="width:320px; height:50px; background-color:white; color:black; font-weight:900px; font-size:16px; font-family:Comic Sans MS; " onclick="this.style.backgroundColor = 'red';" ondblclick="this.style.backgroundColor = 'lightgreen';"> <?php echo $row['slot3']; ?> </button> 
 
        </td> 
 
        <td scope="col" style="border: 1px solid ;text-align: left;padding: 8px; color:black; background-color:grey;"> 
 
         <button style="width:320px; height:50px; background-color:white; font-weight:900px; font-size:16px; color:black; font-family:Comic Sans MS; " onclick="this.style.backgroundColor = 'red';" ondblclick="this.style.backgroundColor = 'lightgreen';"> <?php echo $row['slot4']; ?> </button> 
 
        </td> 
 
        </tr> 
 
        <?php 
 
     \t \t \t \t \t \t } 
 
     \t \t \t \t \t ?> 
 
       </table> 
 
       <!-- end slider --> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <!-- APP NAME --> 
 
    </div> 
 
    <!-- FOOTER --> 
 
    <div class="footer container container-fluid"> 
 
     <!-- COPYRIGHT - EDIT HOWEVER YOU WANT! --> 
 
     <div id="copyright">&copy; Copyright 2017 <a href="#">UIIT @ PMAS AAUR </a>. All Rights Reserved</div> 
 
     <!-- CREDIT - PLEASE LEAVE THIS LINK! --> 
 
    </div> 
 
    <script src="js/jquery-1.7.2.min.js"></script> 
 
    <script src="js/bootstrap.min.js"></script> 
 
    <script src="js/bootstrap-collapse.js"></script> 
 
    <script src="js/bootstrap-scrollspy.js"></script> 
 
    <script src="fancybox/jquery.mousewheel-3.0.4.pack.js"></script> 
 
    <script src="fancybox/jquery.fancybox-1.3.4.pack.js"></script> 
 
    <script src="js/init.js"></script> 
 
</body> 
 
</html>

工作

来源

2017-08-17 kakarot

'的getElementById（ '1'）'是一个坏主意。 Id必须表示元素类型的元素+前缀的用途。所以它可以是'chkSelectRow1'' – Rajesh

'Id必须代表元素的目的' - 必须有点强，也许“应该”会是一个更好的词来使用'+前缀元素类型' - 再次，这就是你的*意见*或您的*编码风格*，它不是HTML/javascript/css的要求 –

你可以用生成的内容填充代码。添加一些更多的HTML元素作为例子（这将从数据库中产生） –

在以下功能

function selectOnlyThis(id) { 
    for (var i = 1; i <= 2; i++) { 
    document.getElementById(i).checked = false; 
    } 
    document.getElementById(id).checked = true; 
}

当你正在做getElemen tById，它将始终为您提供与给定ID匹配的DOM上的第一个元素。因此它不适用于第二行和以上行。

你可以更通用的，只传递的 “本”，而不是 “this.id”

function selectOnlyThis(elem) { 
     var parentDiv = elem.parentElement.parentElement; 
     var buttons = parentDiv.getElementsByTagName("input"); 
     for(var i =0; i< buttons.length; i++){ 
      if(buttons[i] !== elem) 
      buttons[i].checked = false; 
     } 
     elem.checked = true; 
     }

这里是工作示例https://jsfiddle.net/v8zbpynz/

来源

2017-08-17 06:21:42 Nemani

如何通过'this'将有所作为，而取消选中其他 –

与'this'可以参照父元素，比到elemet你可以找到elementsByTagName（“按钮”） – Nemani

然后我必须改变onclick事件吗？功能名称？ – kakarot

如何使用功能相同的同一列的HTML多行

回答

相关问题