Question

我有一个index.html文件，如下所示：

span {
        outline: 2px solid black;   
    }

.wrapped {
    outline: 2px solid red;
}

.wrapped span {
    border: 1px solid white;
    background-color: white;
    position: relative;
    z-index: 1000;
}

<body>

<div class="container">
    <table align="center">
        <tr>
            <th bgcolor="#f0a00c">Col1</th>
            <th bgcolor="#f0a00c">Col2</th>
            <th bgcolor="#f0a00c">Col3</th>
            <th bgcolor="#f0a00c">Col4</th>
            <th bgcolor="#f0a00c">Col5</th>
        </tr>
        <script>var dictionary = {}</script>
        {% for b in obj %}
        <tr>
            <td>{{ b.col1 }}</td>
            <td><span class="wrapped"><span>{{ b.col2 }}</span></span></td>
            <td>{{ b.col3 }}</td>
            <script> if (!dictionary["{{ b.col2 }}"]) {
        dictionary["{{ b.col2 }}"] = [];
    }
    dictionary["{{ b.col2 }}"].push("{{ b.col3 }}");</script>
            <td>{{ b.col4 }}</td>
            <td>{{ b.col5 }}</td>
        </tr>
        {% endfor %}
        <script>
         delete dictionary[""];
console.log(dictionary)
for (var key in dictionary)
{

    if (dictionary[key].length > 1) {
        var name1 = []
        var id = []
        for (i in dictionary[key]) {    

            var reg1 = dictionary[key][i].split("(")[0];
            name1.push(reg1);
            var reg2 = dictionary[key][i].split("_")[1].match(/[A-Z0-9]*/i);  
            id.push(reg2[0]);
            }
    console.log(name1);
    console.log(id);
    }
}
</script>
        </table>
</div> <!-- /container -->
</body>

我正在从mysql数据库中读取一个表，如下所示：

Col2   | Col3                   | Col4
1      | Name1(something_1234)  | Some_date
1      | Name1(something_3456)  | Some_date
2      | Name3(something_7890)  | Some_date
2      | Name4(something_0988)  | Some_date

上述代码段中dictionary的输出如下：

{'1': ['Name1(something_1234)', 'Name1(something_3456)'], '2': 'Name3(something_7890)', 'Name4(something_0988)']}

name1和id分别从col3为每个键返回名称部分和ID部分（即['Name1', 'Name1']＆amp; ['1234', '3456']键1）。

现在，我想知道如何在显示的表格上添加css（有点像条件css，就像所有相同的col2值在它周围添加一个框，然后检查它的名称部分的值，如果它们是然后在它们周围添加一个框，否则在那时添加单独的框以及类似的id部分），这样我得到以下输出：

更新：更新了上面的代码。我能够在每个Col2元素周围绘制框。但是我想检查col2单元格的值是否等于前一个值，然后在框中一起绘制框。以及如何仅在单元格中的部分文本周围绘制一个框，即在Col3中的名称和id部分周围？

Answer 1

好的，但我仍然不明白如何使用css / html创建该框。你能告诉我一个例子吗？

是的，我用js小提琴做了一些类似于你的绘画：https://jsfiddle.net/tq0u0876/

现在轮到您使用Blade语法和JS生成HTML。

HTML：

<table>
 <tr>
   <td><span class="border-top">1</span></td>
   <td>
     <span class="border-top">Name1</span>
     <span>(something_</span>
     <span class="border-top border-bottom">1234</span>
     <span>)</span>
   </td>
   <td><span>some data</span></td>
 </tr>
 <tr>
   <td><span class="border-bottom">1</span></td>
   <td>
     <span class="border-bottom">Name1</span>
     <span>(something_</span>
     <span class="border-top border-bottom">3456</span>
     <span>)</span>
   </td>
   <td><span>some data</span></td>
 </tr>
 <tr>
   <td><span class="border-top">2</span></td>
   <td>
     <span class="border-top border-bottom">Name2</span>
     <span>(something_</span>
     <span class="border-top border-bottom">7890</span>
     <span>)</span>
   </td>
   <td><span>some data</span></td>
 </tr>
 <tr>
   <td><span class="border-middle">2</span></td>
   <td>
     <span class="border-top border-bottom">Name3</span>
     <span>(something_</span>
     <span class="border-top border-bottom">0988</span>
     <span>)</span>
   </td>
   <td><span>some data</span></td>
 </tr>
 <tr>
   <td><span class="border-bottom">2</span></td>
   <td>
     <span class="border-top border-bottom">Name4</span>
     <span>(something_</span>
     <span class="border-top border-bottom">7890</span>
     <span>)</span>
   </td>
   <td><span>some data</span></td>
 </tr>
</table>

CSS：

.border-top { 
  border-top: 2px solid;
  border-left: 2px solid;
  border-right: 2px solid;
}

.border-bottom {
  border-bottom: 2px solid;
  border-left: 2px solid;
  border-right: 2px solid;
}

.border-middle {
  border-left: 2px solid;
  border-right: 2px solid;
}

table { border-collapse: collapse; }
span { display:inline-block; line-height:26px; margin-bottom:-6px; }
td:nth-child(1) span { border-color:red; min-width:20px; }
td:nth-child(2) span:nth-child(1) { border-color:green; min-width:60px; }
td:nth-child(2) span:nth-child(3) { border-color:blue; min-width:60px; }

根据HTML / CSS

1 个答案: