[英]how to use same function on multiple rows of same column html
复选框功能仅适用于row1，当从数据库中添加多行时，它会显示复选框，但复选框功能不适用于它们
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> 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('dm-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) <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">© 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>
在下面的功能
function selectOnlyThis(id) {
for (var i = 1; i <= 2; i++) {
document.getElementById(i).checked = false;
}
document.getElementById(id).checked = true;
}
当您执行getElementById时，它将始终为您提供DOM上与给定id匹配的第一个元素。 因此，它不适用于第二行及以上行。
您可以更通用，只传递“ this”而不是“ 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;
}
如何在具有相同类的多个 HTML div 上使用相同的 javascript 函数
[英]How to use the same javascript function on multiple HTML divs with the same class
Laravel 5.0：如何在同一列数据库中保存多行输入？
[英]Laravel 5.0: How to save multiple inputs of rows in the same column of database?
如何在if语句中使用多个元素，多个事件但功能相同
[英]how to use multiple elements, multiple events, but same function in an if statement
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.