无论如何在更多细胞周围创建非常细的边界线

Question

有谁能告诉我如何围绕更多具有相同价值的tds制作边界线？

<table>
   <tr>
      <td>101</td>
      <td>101</td>
      <td>102</td>
      <td>103</td>
      <td>103</td>
   </tr>
</table>

Answer 1

//NOTE: if you want "Text" to have borders with "text", remove all "//" in front of ".toLowerCase()"

tds = document.getElementsByTagName("td");
tdsL = tds.length;

for (i = 0; i < tdsL; i++) {
  td = tds[i];

  val = td.innerHTML//.toLowerCase();
  // if this is the last element, nextVal = 7, (a number that will != a string), else nextVal = the next element's innerHTML
  nextVal = i + 1 == tdsL ? 7 : td.nextElementSibling.innerHTML//.toLowerCase();
  // if this is the first element, prevVal = 7, (a number that will != a string), else prevVal = the previous element's innerHTML
  prevVal = i == 0 ? 7 :  td.previousElementSibling.innerHTML//.toLowerCase();

  if (prevVal == val && val == nextVal) {
    td.className += " same prev-side next-side";
  } else if (prevVal == val && val !== nextVal) {
    td.className += " same prev-side";
  } else if (prevVal !== val && val == nextVal) {
    td.className += " same next-side";
  }

}

.same {
  border: 1px solid black;
}

.next-side {
  border-right: none;
}

.prev-side {
  border-left: none;
}

<table style="border-collapse: collapse;">
   <tr>
      <td>101</td>
      <td>101</td>
      <td>102</td>
      <td>103</td>
      <td>103</td>
      <td>104</td>
      <td>105</td>
      <td>105</td>
      <td>105</td>
   </tr>
</table>

此代码适合您吗？

jQuery版

(function($) {
  
  $("td").each(function() {
    $this = $(this);
    val = $this.text();
    nextVal = $this.next().text();
    prevVal = $this.prev().text()
    
    if (val == nextVal) {
      $this.next().addBack().addClass("same")
    }
    
    if (prevVal == val && val == nextVal) {
      $this.addClass("prev-side next-side");
    } else if (prevVal == val && val !== nextVal) {
      $this.addClass("prev-side");
    } else if (prevVal !== val && val == nextVal) {
      $this.addClass("next-side");
    }
      
    
  });
  
})(jQuery)

.same {
  border: 1px solid black;
}
.next-side {
  border-right: none;
}
.prev-side {
  border-left: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table style="border-collapse: collapse;">
  <tr>
    <td>101</td>
    <td>101</td>
    <td>102</td>
    <td>103</td>
    <td>103</td>
    <td>104</td>
    <td>105</td>
    <td>105</td>
    <td>105</td>
  </tr>
</table>

Answer 2

写出td值相同的同一个类名

.class {
     border: 1px solid black;
}

Answer 3

在你的CSS中

只需要设置类似

的设置

td {
border-width: 15px;
border-color: #000;
}

td只是单元格的标识符，border-width是边框颜色的粗细是颜色......

Answer 4

请让您的问题更清晰，但对于桌子，您可以添加一个大小与您相同的边框，如下所示：

`

<table border="1">
   <tr>
      <td>101</td>
      <td>101</td>
      <td>102</td>
      <td>103</td>
      <td>103</td>
   </tr>
</table>

`

而且，你要划定的特定细胞是什么样的：

`

<table border="1">
   <tr>
      <td>101</td>
      <td>101</td>
      <td style="border:2px solid black;">102</td>
      <td>103</td>
      <td>103</td>
   </tr>
</table>

`

Answer 5

写出相同的类名，其中tds具有相同的值，然后取类名并编写css，如： -