中心文本水平遍历表

Question

我有一张时间表。 我想要的是，如果有两个或两个以上的相同任务相继出现，那么它们之间的边界就可以了。 （我已经这样做了）。此外，我希望文本在桌子中间居中。

参见示例以获得澄清

https://jsfiddle.net/79bs6Lhb/3/

＆＃13;

＆＃13;

var tds = document.querySelectorAll("td")
for (var o = 0; o < tds.length; o++) {
  if ($(tds[o]).next().html() === $(tds[o]).html() && $(tds[o]).prev().html() === $(tds[o]).html()) {
    $(tds[o]).css("borderRight", "none");
    $(tds[o]).css("borderLeft", "none");
  } else if ($(tds[o]).next().html() === $(tds[o]).html()) {
    $(tds[o]).css("borderRight", "none");
  } else if ($(tds[o]).prev().html() === $(tds[o]).html()) {
    $(tds[o]).css("borderLeft", "none");
  }
}

＆＃13;

table {
  border-collapse: collapse;
}
td {
  border: 2px solid grey;
  padding: 25px;
  text-align: center;
}
th {
  border: 2px solid grey;
  padding: 25px;
  text-align: center;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>1:00</th>
      <th>2:00</th>
      <th>3:00</th>
      <th>4:00</th>
      <th>5:00</th>
      <th>6:00</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Sleep</td>//Should Only be one "Sleep" and it should be centered through all the "Sleep td"
      <td>Sleep</td>
      <td>Sleep</td>
      <td>Sleep</td>
      <td>Sleep</td>
      <td>Wake Up</td>

    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用colspan。

var tds = document.querySelectorAll("td")
    for (var o = 0; o < tds.length; o++) {
            if ($(tds[o]).next().html() === $(tds[o]).html() && $(tds[o]).prev().html() === $(tds[o]).html()) {
                $(tds[o]).css("borderRight", "none");
                $(tds[o]).css("borderLeft", "none");
            } else if ($(tds[o]).next().html() === $(tds[o]).html()) {
                $(tds[o]).css("borderRight", "none");
            } else if ($(tds[o]).prev().html() === $(tds[o]).html()) {
                $(tds[o]).css("borderLeft", "none");
            }
        }

table {
        border-collapse: collapse;
    }

    td {
        border: 2px solid grey;
        padding: 25px;
        text-align: center;
    }

    th {
        border: 2px solid grey;
        padding: 25px;
        text-align: center;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>1:00</th>
            <th>2:00</th>
            <th>3:00</th>
            <th>4:00</th>
            <th>5:00</th>
            <th>6:00</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td colspan="5">Sleep</td> //Should Only be one "Sleep" and it should be centered through all the "Sleep td"        
            <td>Wake Up</td>            

        </tr>
    </tbody>

Answer 2

只需删除所有

即可

<td>Sleep</td>

并输入： -

<td colspan="5">Sleep</td>