如何在td元素中删除单元格内容中文本周围的额外空格？
在td元素中删除单元格内容中文本周围的额外空格，可以使用JavaScript的trim()方法。trim()方法可以去除字符串两端的空格，将其应用于td元素的文本内容，即可删除额外的空格。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>删除td元素中的额外空格</title>
<script>
function removeExtraSpaces() {
var tdElement = document.getElementById("myTd");
var text = tdElement.innerText.trim();
tdElement.innerText = text;
}
</script>
</head>
<body>
<table>
<tr>
<td id="myTd"> Hello World </td>
</tr>
</table>
<button onclick="removeExtraSpaces()">删除额外空格</button>
</body>
</html>在上述代码中，我们使用了JavaScript的trim()方法来删除td元素中文本周围的额外空格。通过点击按钮，调用removeExtraSpaces()函数，该函数获取td元素的innerText，并使用trim()方法去除额外空格，然后将处理后的文本重新赋值给td元素的innerText。
这样，当用户点击按钮时，td元素中的文本将被更新为没有额外空格的内容。
腾讯云相关产品和产品介绍链接地址：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库 MySQL 版：https://cloud.tencent.com/product/cdb_mysql
- 云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 人工智能平台（AI Lab）：https://cloud.tencent.com/product/ailab
- 物联网开发平台（IoT Explorer）：https://cloud.tencent.com/product/iothub
- 移动推送服务（信鸽）：https://cloud.tencent.com/product/xgpush
- 对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯区块链服务（TBaaS）：https://cloud.tencent.com/product/tbaas
- 腾讯云游戏引擎（GSE）：https://cloud.tencent.com/product/gse
请注意，以上链接仅供参考，具体产品选择应根据实际需求进行评估。
相关·内容
我在td中有一些文本，但不知何故在文本的左右两边有额外的空格。我试过把padding放到0里，不起作用，但是把padding 0放进图片里就行了。我已将文本居中。图片如下：因此，我希望td足够大，以适应“嘟嘟声”文本。
浏览 12提问于2016-07-22得票数 2
我有一个表中的内容：<td>2</td>表格单元格本身有样式(如背景颜色和边框)，但我希望在数字周围有一个圆圈(不使用图像)，使用边框半径(高度，宽度等)……但我不想添加额外的标签。:before
浏览 1提问于2013-05-09得票数 1
我有一个固定宽度的表格单元格和跨度元素(里面有额外的元素，文本+按钮)的问题。我不希望这些span内容被包装(span元素被放在那个单元格中)，如下所示： <span>Test<button>Remove</button></<em
浏览 0提问于2013-12-09得票数 1
我会为那些想看现场直播的人提供直接的链接。
只需将鼠标悬停在其中一个表格列表上，您就会看到图像下面总是有一个很小的空间。我想要你的帮助。问题出在哪里?我遗漏了什么？
浏览 0提问于2013-01-31得票数 10
回答已采纳
1回答
我所处的情况是，需要来使用table，但我也希望它是响应。对于某些方面，under max-width: 500px，我想将我的第三个<td>元素转换为第二行，分别使用100% width和50% width。我知道，有了display: block在<td>上，我可以把它们放在另一个下面，这是我最终会做的事情，但我希望能在两者之间迈出一步。 background-color: gr
浏览 3提问于2015-03-17得票数 6
回答已采纳
我有一个设置宽度的表格容器，它将包含3个由单个字符(>)分隔的文本元素。这些文本元素可能包含不能与其余文本一起放入容器中的单行文本，并且必须换行。问题是，当文本换行时，单元格将在右侧包含额外的空格，然后强制其他元素换行，而通常情况下，如果没有空格，后面的元素将分别放在一行中。 以下是所需的行为： ? 其中第一个文本<
浏览 39提问于2020-08-18得票数 1
如何为所有表格单元格的内容指定文本颜色？我所有单元格中的</em
浏览 4提问于2018-11-14得票数 0
回答已采纳
我使用PHP简单的HTML解析器从HTML表中提取单元格值内容，并将它们存储在数组中。<td class="inflexion">so<span class="deviation">y</span></td>
<td class="inflexion"><span class="deviation">
浏览 4提问于2017-01-17得票数 0
回答已采纳
2回答
我使用CSS换行属性(设置为break-word)在固定宽度和可变高度的div元素中完整地显示单个无间距字符串。div元素本身位于表单元格<td>中。单词分隔符按预期工作，在定义的固定宽度处对单词进行分隔符。但是，在IE9 (使用IE7文档标准)中，div后面似乎有一些额外的空格，导致表单元格在宽度上延伸(这不是我们想要的)。div宽
浏览 7提问于2012-05-26得票数 0
回答已采纳
4回答
我有一个很长的词。V4p7BaJKPkegMzXgWGnFVmz1tdLFiYUGq0MvVgqWiepcTFmwgSd9g1pGRiCSDHJUDwcc+NidiW4/ixw4QIDAQAB" <td>TXT</td>
<td>"v=DKIM1; k=rsa; p=MIGfMA
浏览 27提问于2012-10-03得票数 17
回答已采纳
3回答
我有一个网页，其中包含一个表格单元格内的图片。但是，在表格单元格中，底部还有一个额外的5 5px。<!DOCTYPE html><head></head><table><td style="border:
浏览 3提问于2014-04-11得票数 2
回答已采纳
1回答
看看我的html代码之后，apache和已经有了他们的方式。观察我的TD-元素(突出显示)是如何具有维度的:1056x196.14。还请注意，在代码中的几个八进制上，可以清楚地表示维数应该是1056x192。
突出显示父TR-元素将显示auto x 192，而突出显示子IMG-元素将再次显示1056 x 192。那么为什么我的TD元素的</em
浏览 2提问于2015-01-15得票数 1
回答已采纳
我有一个，在最后一列的每个单元格中放置一个正则表。我需要将数据准确地显示在这些表中，但是我注意到如果两个单词之间有额外的空格，它就会被移除，因此只有一个空格字符。但是，当我将white-space:pre;应用于datatable的<td>元素以避免删除空格时，它会破坏表上的CSS：
与它的外观相比，在向每个单元格</e
浏览 0提问于2021-04-26得票数 0
回答已采纳
> <td>16.1 (22.2-24.0)</td>我使用以下函数查找表格单元格的内容，并将其带入数组中：
var l1 = $('#datatable td:nth-child(2)
浏览 2提问于2010-04-11得票数 0
回答已采纳
5回答
我正在使用fieldset中的一个表格，在图例下面有一个间隙，我想要删除它。我尝试在fieldset和图例内联样式上使用padding:0px和margin:0px。但没有一个管用。编辑： <legend><b>Options</b></legend> &l
浏览 3提问于2012-09-23得票数 1
回答已采纳
我正在尝试找出如何在HTML中删除表行中表数据之间的额外空格。例如，在下面的代码中，当在我的web浏览器IE中查看代码时，'First Name‘表数据和'input name’表数据之间有额外的空格。示例如下：<td>First Name:</td>
<<e
浏览 2提问于2010-02-15得票数 2
回答已采纳
假设我们有一个HTML表，它基本上如下所示：3|8|5|10|我想选择只包含8的细胞，也就是row2的第二细胞和row3的第三细胞。这就是我尝试过的：//table//td[contains(.,'8')]。它给了我所有包含8的单元格，所以，我也得到了不想要的值28和18。
我该怎么解决这个问题？编辑:这里的是一个示例表，如果您想尝
浏览 0提问于2016-09-22得票数 8
回答已采纳
2回答
我想在font-variant: small-caps的文本上使用TDfont-variant: small-caps;当TD只包含文本时，我只想应用于TD，而不想应用与a href或input等相关的文本。我试过：font-variant: small-caps;但这似乎没什么
浏览 5提问于2022-05-05得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
