将数据添加到html表格单元格时如何更改col-span

【问题标题】：how to change col-span when a data is added to html table cell将数据添加到html表格单元格时如何更改col-span
【发布时间】：2016-10-24 17:51:06
【问题描述】：

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

现在，我有一个问题：我不知道如何在将新课程添加到时间表时自动添加 col-span。

我可以参考任何完善的项目或 jQuery 或技术吗？你能和我分享吗？谢谢。

首先时间表是空白的：

添加新类后：

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

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

【问题讨论】：

    标签： javascript jquery html


    【解决方案1】：

    我建议将this 与that 混合使用。两者都是Darko Bunic写的JavaScript表格插件。

    【讨论】：

      【解决方案2】：

      您必须检查可以在表中添加数据的位置，使用.attr() 可以colspan 表。

      请尝试以下：

      $("#add").click(function(){
  $(".Mon").find("td:eq(6)").html($("#classe").val()).attr("colspan","2")
  $(".Mon").find("td:last").remove()
})
      td{
  padding:5px;
  }
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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 class="Mon" 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 id="classe" type="text"/> <input id="add" type="button" value="Add"/>
</div>
<table>

      【讨论】：

      • 感谢您的回答，在研究了您的代码后，我注意到您的代码仅与我的情况完全匹配，这很好。但是，对于其他情况，我的意思是如果有很多选择，您的代码将不再适合，因为您的代码不可扩展。
      【解决方案3】：

      所以，请在此处查看我更新后的工作代码：jsfiddle 我已经更新了它，所以如果一个类超过 1h，它将显示在 Schema 上。

          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
  }

      【讨论】：

      • 你为什么不投票给我的答案？
      • 非常感谢，您的代码在 colspan 上运行良好，但是在我插入一个新类后，右侧会弹出一个额外的单元格...
      • 你是什么意思？请编辑我的小提琴并在此处发布链接。
      • 你试试你的代码吗？如果不是你试试看，你会注意到如果你插入新类，就会从右侧添加一个新列...
      • 抱歉，没有先看到。现在我的代码已更新，我添加了 .next('td').remove();到元素选择器来处理添加的列。
      【解决方案4】：

      在我去研究一些代码之后，这将是我更好的解决方案：

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

      【讨论】：

        猜你喜欢
        • 1970-01-01
        • 2020-02-23
        • 1970-01-01
        • 1970-01-01
        • 2011-04-12
        • 2013-12-27
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多
        热门标签
        Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode