Question

如何在表格单元格中换行文字，因此它应该从bar <code> bar更改为<p>bar <code> bar</p>？

这是我目前所拥有的：

<style>
    table { width: 100%; border-collapse: collapse; }
    td { border: 1px solid black; }
    td p { color: red; }
</style>

<table>
    <tr>
        <td><p>foo <code>code</code> foo</p></td>
        <td>bar <code>code</code> bar</td>
    </tr>
</table>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
    $('td').contents()
        .filter(function() {
            return (this.nodeType === 1 || this.nodeType === 3)
        })
        .wrap('<p />');
</script>

所以，期望的结果应该是：

<table>
    <tr>
        <td><p>foo <code>code</code> foo</p></td>
        <td><p>bar <code>code</code> bar</p></td> <!-- fixed -->
    </tr>
</table>

Answer 1

嗯......没有答案。也许我会问一些太明显的东西？

烨！你回答了你的问题..

但如果你真的试图将数据拆分成块，这里有一个片段：

＆＃13;

p {
  display: table-caption;
}

＆＃13;

<table border=1px>
  <tr>
    <td>
      <p>
        row11 row12 row13
      </p>
    </td>
    <td>
      <p>
        row21 <code>row22</code> row23
      </p>
    </td>
  </tr>
</table>

＆＃13;

Answer 2

您只能使用.wrapInner()

执行此操作

.wrapInner（）函数可以接受任何可以传递给$（）工厂函数的字符串或对象来指定DOM结构。这个结构可以嵌套几层深，但应该只包含一个inmost元素。该结构将围绕匹配元素集中每个元素的内容进行包装。

在你的情况下：

 $('td').wrapInner('<p> <p/>');

table { width: 100%; border-collapse: collapse; }
td { border: 1px solid black; }
td p { color: red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td><p>foo <code>code</code> foo</p></td>
        <td>bar <code>code</code> bar</td>
        <td>foo <code>code</code> foo</td>
        <td>bar <code>code</code> bar</td>
    </tr>
</table>

.wrapInner()适用于element，class，id。

您可以使用css来更改颜色，字体样式等视觉方面

$('.c').wrapInner('<p class = "p1"> <p/>');
$('#c1').wrapInner('<p class = "p2"> <p/>');
$('#c2').wrapInner('<p id = "p3"> <p/>');

table { width: 100%; border-collapse: collapse; }
    td { border: 1px solid black; }
    td .p1 { color: red; }
    td .p2 { color: blue;}
    td #p3 { color: blue; font-style: italic;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<table>
    <tr>
        <td><p class = "p1" >foo <code>code</code> foo</p></td>
        <td class = "c">foo <code>code</code> foo</td>
        <td class = "c">bar <code>code</code> bar</td>
        <td id = "c1">bar <code>code</code> bar</td>
        <td id = "c2">foo <code>code</code> foo</td>
    </tr>
</table>

在p标签中的表格中包装文本

2 个答案: