Javascript 如何在将数据添加到html表格单元格时更改列跨度_Javascript_Jquery_Html

Javascript 如何在将数据添加到html表格单元格时更改列跨度

javascript jquery html

Javascript 如何在将数据添加到html表格单元格时更改列跨度,javascript,jquery,html,Javascript,Jquery,Html,我有学生注册的时间表，学生可以选择要添加到时间表中的班级现在，我有一个问题：我不知道当新的类被添加到时间表中时，如何自动添加列跨度我可以参考任何成熟的项目、jQuery或技术吗？你能和我分享一下吗？多谢各位首先，时间表是空白的：添加新类后：这是我的代码（没有javascript和JQuery，结果是我自己键入的）：运输署{ 填充物：5px； } 天/时间 07:00 08:00 09:00 10:00 11:00 12:00 01:00 02:00 03:00 04:00 05

我有学生注册的时间表，学生可以选择要添加到时间表中的班级

现在，我有一个问题：我不知道当新的类被添加到时间表中时，如何自动添加列跨度

我可以参考任何成熟的项目、jQuery或技术吗？你能和我分享一下吗？多谢各位

首先，时间表是空白的：

添加新类后：

这是我的代码（没有javascript和JQuery，结果是我自己键入的）：


运输署{
填充物：5px；
}
天/时间
07:00
08:00
09:00
10:00
11:00
12:00
01:00
02:00
03:00
04:00
05:00
08:00
09:00
10:00
11:00
12:00
01:00
02:00
03:00
04:00
05:00
06:00
周一
星期二
结婚
清华大学
星期五
提供的课程：
班
白天
时间
甲级
星期二
上午9时至12时
B类
周一
上午10时至下午1时
C类
清华大学
下午四时至五时
D类
星期五
下午一时至二时


类别：

我建议使用mixed with。这两个都是由编写的JavaScript表插件。

您必须检查可以在表中添加数据的位置，并且使用

.attr（）

可以

colspan

创建表

请尝试以下内容：

$（“#添加”）。单击（函数（）{
$（“.Mon”）.find（“td:eq（6）”）.html（$（“#classe”）.val（））.attr（“colspan”，“2”）
$（“.Mon”）.find（“td:last”）.remove（）
})

td{
填充物：5px；
}


天/时间
07:00
08:00
09:00
10:00
11:00
12:00
01:00
02:00
03:00
04:00
05:00
08:00
09:00
10:00
11:00
12:00
01:00
02:00
03:00
04:00
05:00
06:00
周一
星期二
结婚
清华大学
星期五
提供的课程：
班
白天
时间
甲级
星期二
上午9时至12时
B类
周一
上午10时至下午1时
C类
清华大学
下午四时至五时
D类
星期五
下午一时至二时


类别：

因此，请在此处查看我更新的工作代码：我已对其进行了更新，因此如果一个类超过1h，它将显示在t上

<!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>

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

    $(document).ready(function() {
      $("input[type='button']").click(function(event) {
        event.preventDefault();

        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;

                    var colspan = checkDurationOfClass() * 2

            $("#schema th:contains('" + day + "')")
            .siblings(":nth-of-type(" + (i + 1) + ")")
            .attr('colspan', colspan)
            .html(inputClass)
            .css('background', 'green')

            for(var j = 0; j < colspan - 1; j++){
            $("#schema th:contains('" + day + "')").siblings(":nth-of-type(" + (i + j) + ")").last().remove()
          }
          }
        })
    }

  function checkDurationOfClass(){
    time = time.split(' - ')

        var duration = ConvertTimeformat("24", time[1]) - ConvertTimeformat("24", time[0]);
    console.log(duration)

    return duration /= 60
  }

  function ConvertTimeformat(format, time) {
    var hours = Number(time.match(/^(\d+)/)[1]);
    var minutes = Number(time.match(/\.(\d+)/)[1]);
    var AMPM = time.match(/\D(\D.*)$/)[0];

    if (AMPM == "pm" && hours < 12) hours = hours + 12;
    if (AMPM == "am" && hours == 12) hours = hours - 12;

    minutes += hours * 60

    return minutes
  }

<!DOCTYPE html>
<html>
<head>
<style>
td{
    padding:5px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    var inputClass = "";
    var day = "";
    var time = "";
    var count = 1;
    $(document).ready(function() {
      $("input[type='button']").click(function(event) {
        event.preventDefault();

        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();

        }
      })
    }
    var timeGap = '';

    var colspanMon = 0;
    var colspanTue = 0;
    var colspanWed = 0;
    var colspanThu = 0;
    var colspanFri = 0;

    function bookClas() {

                var colspan = checkDurationOfClass() * 2
                var row = document.getElementById(day);

                var colspanNum = 0;
                if(day === "Mon")
                colspanNum += colspanMon
                if(day === "Tue")
                colspanNum += colspanTue
                if(day === "Wed")
                colspanNum += colspanWed
                if(day === "Thu")
                colspanNum += colspanThu
                if(day === "Fri")
                colspanNum += colspanFri

                for(var j = colspan; j < colspan + colspan ; j++){
                    row.deleteCell(timeGap + 1 - colspanNum);
                    }

                var cell = row.insertCell(timeGap + 1 - colspanNum);
                cell.innerHTML = inputClass;
                cell.setAttribute("colspan", colspan);
                cell.style.backgroundColor = "green";


            if(day === "Mon")
            colspanMon = colspan - 1;
            if(day === "Tue")
            colspanTue = colspan - 1;
            if(day === "Wed")
            colspanWed = colspan - 1;
            if(day === "Thu")
            colspanThu = colspan - 1;
            if(day === "Fri")
            colspanFri = colspan - 1;

    }

  function checkDurationOfClass(){
    time = time.split(' - ')

        var duration = ConvertTimeformat("24", time[1]) - ConvertTimeformat("24", time[0]);
         timeGap =  ConvertTimeformat("24", time[0]) - ConvertTimeformat("24", "07.00am");
         timeGap = (timeGap/60) * 2;
    console.log(timeGap);

    return duration /= 60
  }

  function ConvertTimeformat(format, time) {
    var hours = Number(time.match(/^(\d+)/)[1]);
    var minutes = Number(time.match(/\.(\d+)/)[1]);
    var AMPM = time.match(/\D(\D.*)$/)[0];

    if (AMPM == "pm" && hours < 12) hours = hours + 12;
    if (AMPM == "am" && hours == 12) hours = hours - 12;

    minutes += hours * 60

    return minutes
}

</script>
</head>
<body>

<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" id="Mon">
    <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></td>

  </tr>
  <tr align="center" id="Tue">
    <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" id="Wed">
    <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" id="Thu">
    <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" id="Fri">
    <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.30am - 12.00pm</td>
    </tr>
    <tr>
      <td>Class B</td>
      <td>Mon</td>
      <td>10.00am - 01.00pm</td>
    </tr>
    <tr>
      <td>Class C</td>
      <td>Mon</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>
</body>
</html>