doulei6330 2017-08-17 05:53 采纳率: 0%
浏览 137

如何在同一列html的多行上使用相同的函数

The Checkbox Function only working for the row1, when multiple rows added from database it shows the checkbox but checkbox function did not work for them

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

          <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
                        $link = mysqli_connect("localhost","root","","timetable");
                        if($link) {
                            //echo "coonected succesfuuly";
                        }
                        $query1 ="select * from event";
                        
                        $run = mysqli_query($link,$query1); 
                        
                        while($row = mysqli_fetch_assoc($run)){
                        ?>
              <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    }   ?>
          </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;">
                            <option > 8:00 AM to 9:20 AM </option>
                            <option > 9:30 AM to 10:20 AM</option>
                            <option> 10:30 AM to 11:20 AM</option>
                            <option> 11:30 AM to 12:20 PM</option>
                      </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;">
                            <option>0</option>
                            <option>1</option> 
                  <option>2</option> 
                  <option>3</option> 
                  <option>4</option>
                            <option>5</option> 
                  <option>6 </option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                            <option>11</option>
                            <option>12</option>
                            <option>13</option>
                            <option>14</option>
                            <option>15</option>
                            <option>16</option>
                            <option>17</option>
                            <option>18</option>
                            <option>19</option>
                            <option>20</option>
                            <option>21</option>
                            <option>22</option>
                            <option>23</option>
                            <option>24</option>
                            <option>25</option>                 
                        </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;">
                            <option>0</option>
                            <option>1</option> 
                  <option>2</option> 
                  <option>3</option>
                  <option>4</option>
                            <option>5</option> 
                  <option>6 </option>
                            <option>7</option>
                            <option>8</option>
                            <option>9</option>
                            <option>10</option>
                            <option>11</option>
                            <option>12</option>
                            <option>13</option>
                            <option>14</option>
                            <option>15</option>
                            <option>16</option>
                            <option>17</option>
                            <option>18</option>
                            <option>19</option>
                            <option>20</option>
                            <option>21</option>
                            <option>22</option>
                            <option>23</option>
                            <option>24</option>
                          <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;">
                        <option>0</option>
                        <option>1</option>
                        <option>2</option>
                        <option>3</option>
                        <option>4</option>
                        <option>5</option>
                        <option>6</option>
                        <option>7</option>
                        <option> 8</option>
                        <option>9</option>
                        <option>10</option>
                        <option>11</option>
                    </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
                        //$day1=date("l");
                        //    $shift1='morning';
                        $day1=$_POST['selectday'];
                        $shift1=$_POST['selectshift'];
                        // echo date('e');
                        //$date11=date('d-m-Y');                        
                        
                        //$date11=$_POST['date'];
                        //echo "$date11";
                        $link = mysqli_connect("localhost","root","","timetable");
                        if($link) {
                            //echo "coonected succesfuuly";
                        }
                        $query1 ="SELECT * from rescheduleclass where  shift='$shift1' && day='$day1'  ";
                        
                        $run = mysqli_query($link,$query1); 
                
                        while($row = mysqli_fetch_assoc($run)){
                        ?>
                <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
                        }
                    ?>
          </table>
      </div>
      <!-- APP DETAILS -->
      <div class="span3">
        <!-- ICON -->
        <div class="visible-desktop" id="icon">
          <?php
                  //    $day1=date("l");
                  //    $shift1='morning';
                  
                  $day1=$_POST['selectday'];
                  $shift1=$_POST['selectshift'];
                ?>
          <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
                            //$day1=date("l");
                            //     $shift1='morning';
                            $shift1=$_POST['selectshift'];
                            $day1=$_POST['selectday'];
                            //$shift1=$_POST['shift'];
                            $link = mysqli_connect("localhost","root","","timetable");
                            if($link) {
                                //echo "coonected succesfuuly";
                            }
                            $query1 ="select * from timetable_morning where shift='$shift1'&& day='$day1'";
                            
                            $run = mysqli_query($link,$query1);                             
                            
                            while($row = mysqli_fetch_assoc($run)){
                            ?>
                  <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
                            }
                        ?>
              </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>

</div>
  • 写回答

1条回答 默认 最新

  • douran7929 2017-08-17 06:21
    关注

    In Below function

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

    when you are doing getElementById, it will always get you the first element on the DOM matching the given id. Hence it wont work for 2nd and above row.

    You can be more generic and pass only "this" instead of "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;
      }

    here is the working example https://jsfiddle.net/v8zbpynz/

    评论

报告相同问题？