更改具有相同尺寸的html标签答案

【问题标题】：Change html tag with same dimensions更改具有相同尺寸的html标签
【发布时间】：2013-06-03 02:57:48
【问题描述】：

我有一个包含不同条目的长表，其中一些被标记为“xxx”。生成html代码时，xxx所在的行如下（由插件生成）：

<td style="vertical-align:middle; text-align:center; border:2px solid #000000; width:504pt; height:29pt" colspan="12">xxx</td>

我想将其更改为具有相同尺寸的文本区域，这样它就不会扭曲表格。

我认为 jQuery 可以完成这项工作，但我不知道如何准确提取 colspan、宽度或高度，并将其设置为新的 textarea。我有这段代码，它将所有 xxx 实例替换为 textareas，但它们的大小都相同，会扭曲表格格式。

<script>
    var replaced = $("body").html().replace(/xxx/g,'<textarea></textarea>');
    $("body").html(replaced);
</script>

感谢任何建议。

PS：我用的是CakePHP 2.0，用PHPExcel把excel转成html，在xxx处生成textareas。

【问题讨论】：

标签： javascript jquery cakephp html-parsing phpexcel

【解决方案1】：

如果你总是替换“xxx”，我不明白你为什么需要“提取”任何东西。如果您使用宽度属性一段时间，您将获得不扭曲表格所需的确切像素并将其硬编码为<textarea style="width:XXpx"> 定义。

您可以做的其他事情是在 textarea 定义中设置 cols 和 rows 属性

var replaced = $("body").html().replace(/xxx/g,'<textarea cols="3" rows="1"></textarea>');

而不是 with，如果单词总是 3 个字母长，则使用 cols="3"。

但是，如果我误解了您想要做的事情，并且您需要动态更改样式和 attributes，则可以使用此方法从 <td> 中提取 colspan

$("#the-td").attr("colspan");

不过，您需要引用正确的 <td>。而对于提取style，代码是

$("#the-td").css("width");

【讨论】：

好吧，在某些情况下这可能会解决问题，但在我的情况下，我有一个具有不同尺寸框的表格。所以我只需要 textarea 来填充整个框。例如，在这种情况下设置 cols=3 是不合适的，但我会接受答案，因为它在某些情况下可能会起作用。谢谢！！！

【解决方案2】：

我可以使用以下代码解决这个问题：

var replaced = $("body").html().replace(/xxx/g,'<textarea style=" width: 100%; height: 100%; min-height:3em; box-sizing: border-box; resize: none; display:block;"></textarea>'); $("body").html(replaced);

这会在 xxx 处创建完全符合大纲表格式的表格。最后，不需要复杂的数据提取。我的情况很特别，所以我不知道它是否会帮助任何人，但希望它会。

【讨论】：