如何将文本叠加到多个表格单元格?

时间:2018-04-11 09:21:43

标签: jquery html-table append overlay

我想将文字叠加到我的多个表格单元格中。就我而言,数据日期从jQuery(document).ready(function() { jQuery(".main-table").clone(true).appendTo('#table-scroll').addClass('clone'); }); $('.table-wrap').scrollLeft($('[data-date="2018-04-01"]').offset().left - 82); $('[data-date="2018-04-02"]').css("background-color", "yellow"); $('[data-date="2018-04-03"]').css("background-color", "yellow"); $('[data-date="2018-04-04"]').css("background-color", "yellow"); $('[data-date="2018-04-02"]').append("mycontent");.table-scroll { position: relative; margin: auto; overflow: hidden; } .table-wrap { width: 100%; overflow: auto; } .table-scroll table { width: 100%; margin: auto; border-collapse: separate; border-spacing: 0; } .table-scroll th, .table-scroll td { padding: 5px 10px; white-space: nowrap; vertical-align: top; } .clone { position: absolute; top: 0; left: 0; pointer-events: none; } .clone th, .clone td { visibility: hidden } .clone td, .clone th { border-color: transparent } .clone tbody th { visibility: visible; } .clone .fixed-side { visibility: visible; background-color: #fff; font-weight: normal; border: none; border-right: 2px solid #f4f4f4; } .clone thead, .clone tfoot { background: transparent; } .gantt-h { font-weight: normal; color: #b0b0b0; border-right: 2px solid #f4f4f4; } .last { border-right: 2px solid #f4f4f4; } .gantt td { border-right: 2px solid #f4f4f4; } .today{ background-color:pink; width:100px; cursor:pointer }的单元格。因此,它应该如下所示:

example

但我只能将文本附加到一个单元格。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>



<div id="table-scroll" class="table-scroll">
  <div class="table-wrap">
    <table class="main-table table gantt">
      <thead>
        <tr>
          <th class="fixed-side" scope="col" class="left-h" style="border-bottom:2px solid #f4f4f4;color:#b0b0b0">Task</th>

          <th scope="col" class="gantt-h" style="font-weight:normal;color:#b0b0b0;">30 Mar</th>
          <th scope="col" class="gantt-h">31 Mar</th>
          <th scope="col" class="gantt-h">01 Apr</th>
          <th scope="col" class="gantt-h">02 Apr</th>
          <th scope="col" class="gantt-h">03 Apr</th>
          <th scope="col" class="gantt-h">04 Apr</th>
          <th scope="col" class="gantt-h">05 Apr</th>
          <th scope="col" class="gantt-h">06 Apr</th>
          <th scope="col" class="gantt-h">07 Apr</th>
          <th scope="col" class="gantt-h">08 Apr</th>
          <th scope="col" class="gantt-h">09 Apr</th>
          <th scope="col" class="gantt-h">10 Apr</th>
          <th scope="col" class="gantt-h">11 Apr</th>
          <th scope="col" class="gantt-h">12 Apr</th>
          <th scope="col" class="gantt-h">13 Apr</th>
          <th scope="col" class="gantt-h">14 Apr</th>
          <th scope="col" class="gantt-h">15 Apr</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th class="fixed-side project"><i class="fa fa-folder-open-o" style="color:#9e9e9e"></i> Projekt 1</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>
        </tr>
        <tr>
          <th class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> blue</th>
          <td data-row="2" data-date="2018-03-30"></td>
          <td data-row="2" data-date="2018-03-31"></td>
          <td data-row="2" data-date="2018-04-01"></td>
          <td data-row="2" data-date="2018-04-02"></td>
          <td data-row="2" data-date="2018-04-03"></td>
          <td data-row="2" data-date="2018-04-04"></td>
          <td data-row="2" data-date="2018-04-05"></td>
          <td data-row="2" data-date="2018-04-06"></td>
          <td data-row="2" data-date="2018-04-07"></td>
          <td data-row="2" data-date="2018-04-08"></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
        </tr>
        <tr>
          <th class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> green</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>
        </tr>
        <tr>
          <th class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> yellow</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>
        </tr>
        <tr>
          <th class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> pink</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>
        </tr>
        <tr>
          <th class="fixed-side" style="padding-left:27px"><i class="fa fa-file-o" style="color:#9e9e9e"></i> orange</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>
        </tr>
      </tbody>

    </table>
  </div>
</div>
private void Form1_Paint(object sender, PaintEventArgs e)
{
    var graphics = e.Graphics; // this.CreateGraphics();
    var font = new Font("Georgia", 12.0F);
    var brush = new SolidBrush(Color.Black);

    var pointF = new PointF(20F, 20F);
    graphics.DrawString("Sunday", font, brush, pointF);

    graphics.ScaleTransform(1F, -1F);
    pointF = new PointF(10F, -210F);
    graphics.DrawString("Monday", font, brush, pointF);

    graphics.ScaleTransform(1, -1);
    pointF = new PointF(200F, 200F);
    graphics.DrawString("Tuesday", font, brush, pointF);

    brush.Dispose();
    font.Dispose();
}
g.ScaleTransform(1,-1);
g.DrawRectangle(new Pen(Brushes.Black,1),new Rectangle(10,10,100,100));

g.ScaleTransform(1,-1);
g.DrawString("Test",new Font("Segoei UI",9),Brushes.Green,new Point(10, -110));

0 个答案:

没有答案