时间戳

首页 > 解决方案 > 从选择输入中选择特定行和列时如何跨越html表？

javascript - 从选择输入中选择特定行和列时如何跨越html表？

问题描述

如果您选择插槽垂直旋转的日期和时间，例如根据选择更改 rowspan 和 colspan 的值，您可以在此博客 视图图像中的图像链接中查看单击此处 

$("#hour,#day").on("click",function(){
var id = $("#hour").children(":selected").attr("value");
var idi = $("#day").children(":selected").attr("value");
res=idi.concat(id);
document.getElementById("demo").innerHTML = res;
$("#"+res).css("color","red")
});
#timetable {
  font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
  border-collapse: separate;
  width: 100%;
}

#timetable td, #timetable th {
  border: 1px solid #ddd;
  padding: 8px;
}


#timetable th {
  padding-top: 12px;
  padding-bottom: 12px;
  text-align: left;
  background-color: #4CAF50;
  color: white;
}
<script 
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<form method="post" action="Select_lab.php">
<center>
<h4>Select Day And Time Where you want to add LABORATORY Slot in table</h4> 
<br>
<B><label>Select Day:</label></B><select id="day" name="day">
    <option value="0">Monday</option>
    <option value="1">Tuesday</option>
    <option value="2">Wednesday</option>
    <option value="3">Thursday</option>
    <option value="4">Friday</option>
    <option value="5">Saturday</option>
</select>
  <B> <label>Select Hour:</label></B><select name="hour" id="hour">
    <option value="0">10:30 To 11:30</option>
    <option value="1">11:30 To 12:30</option>
    <option value="3">2:00 To 3:00</option>
    <option value="4">3:00 To 4:00</option>
    <option value="5">4:00 To 5:00</option>
    <option value="6">5:00 To 6:00</option>
  </select>
  <input type="submit" id="submit" value="Submit" name="submit"><br>
  <p id="demo"></p>
</center>
<table id="timetable">
  <tr>
     <th></th>
     <th >Monday</th>
     <th>Tuesday</th>
     <th>Wednesday</th>
     <th>Thursday</th>
     <th>Friday</th>
     <th>Saturday</th>
  </tr>
  <tr>
    <th>10:30 to 11:30</th>
    <td id="00">00</td>
    <td id="10">10</td>
    <td id="20">20</td>
    <td id="30">30</td>
    <td id="40">40</td>   
    <td id="50">50</td> 
  </tr>
  <tr>
    <th>11:30 to 12:30</th>
    <td id="01">01</td>
    <td id="11">11</td>
    <td id="21">21</td>
    <td id="31">31</td>
    <td id="41">41</td>
    <td id="51">51</td>
  </tr>
  <tr>
    <th>12:30 to 1:30</th>
    <td id="02">02</td>
    <td id="12">12</td>
    <td id="22">22</td>
    <td id="32">32</td>
    <td id="42">42</td>
    <td id="52">52</td>
  </tr>
    <tr>
    <th>1:30 to 2:00</th>
    
    <td colspan="6"> <center>Reccess</center></td>
  
  </tr>
  
  <tr>
    <th>2:00 to 3:00</th>
    <td id="03">03</td>
    <td id="13">13</td>
    <td id="23">23</td>
    <td id="33">33</td>
    <td id="43">43</td>
    <td id="53">53</td>
  </tr>
  <tr>
    <th>3:00 to 4:00</th>
    <td id="04">04</td>
    <td id="14">14</td>
    <td id="24">24</td>
    <td id="34">34</td>
    <td id="44">44</td>
    <td id="54">54</td>
  </tr>
  <tr>
    <th>4:00 to 5:00</th>
    <td id="05">05</td>
    <td id="15">15</td>
    <td id="25">25</td>
    <td id="35">35</td>
    <td id="45">45</td>
    <td id="55">55</td>
  </tr>
  <tr>
    <th id="1">5:00 to 6:00</th>
    <td id="06">06</td>
    <td id="16">16</td>
    <td id="26">26</td>
    <td id="36">36</td>
    <td id="46">46</td>
    <td id="56">56</td>
  </tr>
</table>
</form>

dd LABORATORY Slot in table</h4></br>
 <B> <label>Select Day:</label></B><select id="day" name="day">
<option value="0">Monday</option>
<option value="1">Tuesday</option>
<option value="2">Wednesday</option>
<option value="3">Thursday</option>
<option value="4">Friday</option>
<option value="5">Saturday</otion>
</select>
<B> <label>Select Hour:</label></B><select name="hour" id="hour">
<option value="0">10:30 To 11:30</option>
<option value="1">11:30 To 12:30</option>
<option value="3">2:00 To 3:00</option>
<option value="4">3:00 To 4:00</option>
<option value="5">4:00 To 5:00</option>
<option value="6">5:00 To 6:00</option>
</select>
<input type="submit" id="submit" value="Submit" name="submit"></br>
<?php 
   if (isset($_POST['salarieid'])) {
      $_SESSION['div'] = $_POST['salarieid'];
      echo  $_SESSION['div'];}
     if (isset($_POST['day'])) {
      $_SESSION['day'] = $_POST['day'];
      echo  $_SESSION['day'];
  }
  if (isset($_POST['hour'])) {
      $_SESSION['hour'] = $_POST['hour'];
      echo  $_SESSION['hour'];}
?>
<p id="demo"></p>
</center>
<table id="timetable">
<tr>
 <th></th>
 <th>Monday</th>
 <th>Tuesday</th>
 <th>Wednesday</th>
 <th>Thursday</th>
 <th>Friday</th>
 <th>Saturday</th>
</tr>
<tr>
<th>10:30 to 11:30</th>
<td id="00" rowspan="2">00</td>
<td id="10" rowspan="2">10</td>
<td id="20">20</td>
<td id="30">30</td>
<td id="40">40</td>   
<td id="50">50</td>

</tr>
<tr>
<th>11:30 to 12:30</th>
<td id="01">01</td>
<td id="11">11</td>
<td id="21">21</td>
<td id="31">31</td>
<td id="41">41</td>
<td id="51">51</td>
</tr>
<tr>
<th>12:30 to 1:30</th>
<td id="02">02</td>
<td id="12">12</td>
<td id="22">22</td>
<td id="32">32</td>
<td id="42">42</td>
<td id="52">52</td>
</tr>
<tr>
<th>1:30 to 2:00</th>enter code here  
<td colspan="6"> <center>Reccess</center></td>
</tr> 
<tr>
<th>2:00 to 3:00</th>
<td id="03">03</td>
<td id="13">13</td>
<td id="23">23</td>
<td id="33">33</td>
<td id="43">43</td>
<td id="53">53</td>
</tr>
<tr>
<th>3:00 to 4:00</th>
<td id="04">04</td>
<td id="14">14</td>
<td id="24">24</td>
<td id="34">34</td>
<td id="44">44</td>
<td id="54">54</td>
</tr>
<tr>
<th>4:00 to 5:00</th>
<td id="05">05</td>
<td id="15">15</td>
<td id="25">25</td>
<td id="35">35</td>
<td id="45">45</td>
<td id="55">55</td>
</tr>
<tr>
<th id="1">5:00 to 6:00</th>
<td id="06">06</td>
<td id="16">16</td>
<td id="26">26</td>
<td id="36">36</td>
<td id="46">46</td>
<td id="56">56</td>
</tr>
</form>
<script type="text/javascript">
$("#hour,#day").on("click",function(){
var id = $("#hour").children(":selected").attr("value");
var idi = $("#day").children(":selected").attr("value");
res=idi.concat(id);
document.getElementById("demo").innerHTML = res;
$("#"+res).css("color","red")
});
</script>
</body>
</html>

标签： javascriptphphtmlcss

解决方案

推荐阅读