Chong Zheng Lun Chong Zheng Lun - 1 month ago 6
HTML Question

how to change col-span when a data is added to html table cell

I have the timetable for a student to register,a student can select the class to add to the timetable.

Now, I have a problem: I don't know how to add col-span automatically when the new class is added to the timetable.

Any well-developed project or jQuery or technique I can refer to? Can you share it with me? Thank you.

First the timetable is blank:
enter image description here

After add a new class:
enter image description here

Here's my code (no javascript and JQuery, the result I typed it by myself):

<!DOCTYPE html>
<html>

<head>
<style>
td {
padding: 5px;
}

</style>
</head>

<body>

<table width="80%" align="center" cellpadding="0" cellspacing="0" border="1">
<tr valign="middle">
<th rowspan="2" width="50" scope="col">Day/Time</th>
<th colspan="2" class="col">
<div align="center">07:00</div>
</th>
<th colspan="2" class="col">
<div align="center">08:00</div>
</th>
<th colspan="2" class="col">
<div align="center">09:00</div>
</th>
<th colspan="2" class="col">
<div align="center">10:00</div>
</th>
<th colspan="2" class="col">
<div align="center">11:00</div>
</th>
<th colspan="2" class="col">
<div align="center">12:00</div>
</th>
<th colspan="2" class="col">
<div align="center">01:00</div>
</th>
<th colspan="2" class="col">
<div align="center">02:00</div>
</th>
<th colspan="2" class="col">
<div align="center">03:00</div>
</th>
<th colspan="2" class="col">
<div align="center">04:00</div>
</th>
<th colspan="2" class="col">
<div align="center">05:00</div>
</th>
</tr>
<tr>
<th colspan="2" scope="col">
<div align="center">08:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">09:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">10:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">11:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">12:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">01:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">02:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">03:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">04:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">05:00</div>
</th>
<th colspan="2" scope="col">
<div align="center">06:00</div>
</tr>
<tr align="center">
<th>Mon</th>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
</tr>
<tr align="center">
<th>Tue</th>
<td></td>
<td></td>
</td>
<td>
<td></td>
<td></td>
<td></td>
<td></td>
</td>
<td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
</tr>
<tr align="center">
<th>Wed</th>
<td></td>
<td></td>
</td>
<td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
</tr>
<tr align="center">
<th>Thu</th>
<td></td>
<td></td>
</td>
<td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
</tr>
<tr align="center">
<th>Fri</th>
<td></td>
<td></td>
</td>
<td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td>
</tr>
</table>

<div style="padding-left: 150px">
<h4>Class Available:</h3>
<table border="1">
<tr>
<th>Class</th>
<th>Day</th>
<th>Time</th>
</tr>
<tr>
<td>Class A</td>
<td>Tue</td>
<td>09.00am - 12.00am</td>
</tr>
<td>Class B</td>
<td>Mon</td>
<td>10.00am - 01.00pm</td>
</tr>
<td>Class C</td>
<td>Thu</td>
<td>04.00pm - 05.00pm</td>
</tr>
<td>Class D</td>
<td>Fri</td>
<td>01.00pm - 02.00pm</td>
</tr>
</table>
<br/>
<label>Class: </label><input type="text"/> <input type="button" value="Add"/>
</div>
<table>
</body>
</html>

Answer

Try this, this is a complete solution to your problem: You can also have a look at my fiddle

    var inputClass = "";
	var day = "";
	var time = "";

	$(document).ready(function() {

	  $("input[type='button']").click(function() {
	    inputClass = $("input[type='text']").val()
	    getDayAndtime();
	  })
	})

	function getDayAndtime() {
	  $("#classAvailable td").each(function() {

	    if ($(this).text() === inputClass) {
	      day = $(this).siblings(":nth-of-type(2)").text();
	      time = $(this).siblings(":nth-of-type(3)").text();
          bookClas();
	    }
	  })
	}

	function bookClas() {
	  $("#schema div").each(function(i) {
	      if ($(this).is(":contains('" + time.match(/\d+/) + "')")) {
	        i *= 2;

	        $("#schema th:contains('" + day + "')")
          	  .siblings(":nth-of-type(" + (i + 1) + ")")
              .attr('colspan', 2)
              .html(inputClass)
              .css('background', 'green')
              .next('td')
              .remove();
	      }
	    })
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table id="schema" width="80%" align="center" cellpadding="0" cellspacing="0" border="1">
  <tr valign="middle">
    <th rowspan="2" width="50" scope="col">Day/Time</th>
    <th colspan="2" class="col">
      <div align="center">07:00</div>
    </th>
    <th colspan="2" class="col">
      <div align="center">08:00</div>
    </th>
    <th colspan="2" class="col">
      <div align="center">09:00</div>
    </th>
    <th colspan="2" class="col">
      <div align="center">10:00</div>
    </th>
    <th colspan="2" class="col">
      <div align="center">11:00</div>
    </th>
    <th colspan="2" class="col">
      <div align="center">12:00</div>
    </th>
    <th colspan="2" class="col">
      <div align="center">01:00</div>
    </th>
    <th colspan="2" class="col">
      <div align="center">02:00</div>
    </th>
    <th colspan="2" class="col">
      <div align="center">03:00</div>
    </th>
    <th colspan="2" class="col">
      <div align="center">04:00</div>
    </th>
    <th colspan="2" class="col">
      <div align="center">05:00</div>
    </th>
  </tr>
  <tr>
    <th colspan="2" scope="col">
      <div align="center">08:00</div>
    </th>
    <th colspan="2" scope="col">
      <div align="center">09:00</div>
    </th>
    <th colspan="2" scope="col">
      <div align="center">10:00</div>
    </th>
    <th colspan="2" scope="col">
      <div align="center">11:00</div>
    </th>
    <th colspan="2" scope="col">
      <div align="center">12:00</div>
    </th>
    <th colspan="2" scope="col">
      <div align="center">01:00</div>
    </th>
    <th colspan="2" scope="col">
      <div align="center">02:00</div>
    </th>
    <th colspan="2" scope="col">
      <div align="center">03:00</div>
    </th>
    <th colspan="2" scope="col">
      <div align="center">04:00</div>
    </th>
    <th colspan="2" scope="col">
      <div align="center">05:00</div>
    </th>
    <th colspan="2" scope="col">
      <div align="center">06:00</div>
  </tr>
  <tr align="center">
    <th>Mon</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
  </tr>
  <tr align="center">
    <th>Tue</th>
    <td></td>
    <td></td>

    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>

    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr align="center">
    <th>Wed</th>
    <td></td>
    <td></td>
    <td></td>

    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr align="center">
    <th>Thu</th>
    <td></td>
    <td></td>
    <td></td>

    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
  </tr>
  <tr align="center">
    <th>Fri</th>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td></td>
    <td>
  </tr>
</table>


<div style="padding-left: 150px">
  <h4>Class Available:</h4>
  <table id="classAvailable" border="1">
    <tr>
      <th>Class</th>
      <th>Day</th>
      <th>Time</th>
    </tr>
    <tr>
      <td>Class A</td>
      <td>Tue</td>
      <td>09.00am - 12.00am</td>
    </tr>
    <tr>
      <td>Class B</td>
      <td>Mon</td>
      <td>10.00am - 01.00pm</td>
    </tr>
    <tr>
      <td>Class C</td>
      <td>Thu</td>
      <td>04.00pm - 05.00pm</td>
    </tr>
    <tr>
      <td>Class D</td>
      <td>Fri</td>
      <td>01.00pm - 02.00pm</td>
    </tr>
  </table>
  <br/>
  <label>Class:</label>
  <input type="text" />
  <input type="button" value="Add" />
</div>

Comments