如何禁止在<td>中添加元素
在HTML中，<td>标签用于定义表格中的单元格。默认情况下，<td>元素只能包含文本内容，不能直接添加其他元素。然而，可以通过使用JavaScript来实现在<td>中添加元素的禁止。
以下是一种常见的方法，可以通过JavaScript禁止在<td>中添加元素：
- 给每个<td>元素添加一个事件监听器，以便在用户尝试添加元素时触发。
- 在事件监听器中，使用JavaScript的事件对象（event object）来获取用户尝试添加的元素。
- 检查用户尝试添加的元素是否为HTML元素节点（Element Node）。
- 如果是HTML元素节点，则阻止默认行为，即禁止元素被添加到<td>中。
以下是一个示例代码：
<!DOCTYPE html>
<html>
<head>
<title>禁止在<td>中添加元素</title>
<script>
// 获取所有的<td>元素
var tds = document.getElementsByTagName('td');
// 给每个<td>元素添加事件监听器
for (var i = 0; i < tds.length; i++) {
tds[i].addEventListener('DOMNodeInserted', function(event) {
// 获取用户尝试添加的元素
var addedElement = event.target;
// 检查用户尝试添加的元素是否为HTML元素节点
if (addedElement.nodeType === Node.ELEMENT_NODE) {
// 阻止默认行为，即禁止元素被添加到<td>中
event.preventDefault();
console.log('禁止在<td>中添加元素');
}
});
}
</script>
</head>
<body>
<table>
<tr>
<td>单元格1</td>
<td>单元格2</td>
</tr>
</table>
</body>
</html>在上述示例代码中，我们使用了addEventListener方法来给每个<td>元素添加了一个DOMNodeInserted事件监听器。当用户尝试在<td>中添加元素时，该事件监听器会触发。在事件监听器中，我们使用event.target来获取用户尝试添加的元素，并通过检查其节点类型来判断是否为HTML元素节点。如果是HTML元素节点，则调用event.preventDefault()方法来阻止默认行为，即禁止元素被添加到<td>中。
需要注意的是，这种方法只能阻止通过JavaScript动态添加元素到<td>中，无法完全阻止用户手动修改HTML代码来添加元素。要想完全禁止在<td>中添加元素，最好的方式是在后端进行验证和过滤，确保用户提交的数据不包含任何HTML标签或脚本。
相关·内容
下列代码不起作用：
return targets
.map(
(target, i) => `
<tr>
<td>${target.name}</td>
<td>${target.coordinates.join(':')}</td>
<td>${new Date(target.lastscan).toLocaleString()}</td>
<td>
${$
浏览 2提问于2021-10-15得票数 1
回答已采纳
我正在做一个网页，上面列出了一个数据库中的几个租用预订。我想我可能把自己逼到了一个角落。最初，我的每一行末尾都有3个单元格，每个单元格都包含一个由2或3个隐藏字段组成的小表单，并有一个按钮来“编辑”、“返回”或“取消”预订。
这些操作都很好，而且都是有效的，因为每个表单都在一个单元格内。
现在，我需要添加一些功能，以允许选择多个行，并将它们传递到另一个页面。因此，我不假思索地添加了一个围绕整个表的<form>，在每一行中添加了一个复选框，并在表的底部添加了一个提交按钮。
经过一些研究，我确信XHTML中不允许嵌套表单。但是，文档仍然以某种方式使用W3C验证器进行验证。我正在使用XH
浏览 1提问于2015-02-12得票数 2
回答已采纳
我开始在我的一个项目中使用CKEditor，并且喜欢它。有一件事我无法理解(或找到)，那就是如何在另一个元素中不允许一个元素。我不允许p出现在表单元格、th或td中。
这是：
<table>
<tr>
<td>
<p>Foo</p>
</td>
</tr>
</table>
应改为：
<table>
<tr>
<td>Foo</td>
浏览 2提问于2014-01-29得票数 1
回答已采纳
我在我的项目的一部分中使用了embed src，但是当它加载到mozilla中时，它要求插件不显示任何内容，而它在其他浏览器中是平滑的，并且可以显示embed的所有内容。
<table width="89%" border="0" align="center" id="activity_gallery" style="background-image:url(images/background/bg2_2.jpg)">
<tr >
<td>&nbs
浏览 1提问于2014-11-24得票数 0
1回答
我有一个非常奇怪的情况发生在我的本地个人电脑，我似乎无法解决。
最近，我被联系到扩展一个经典的ASP网站，这是我几年前写的。我将代码解压缩到运行XP的当前机器上的wwwroot的子文件夹中。它从来没有任何经典的ASP网站运行在上面。我设置IIS并创建一个应用程序，并在本地主机上运行该网站。该网站呈现正确，并似乎运行良好。除了一件事..。帖子的数据似乎丢失了。
我在一个页面的顶部输入了Response.Write("[" & Request.Form & "]")，只呈现了"[]“。有人能告诉我为什么我会丢失表格数据吗？这个网站过去在我的上
浏览 2提问于2010-09-05得票数 1
1回答
我已经在Rails 4中使用Simple_form创建了一个分部，但是当我呈现页面时，部分中的表单标记不会环绕控件，所以当我单击submit按钮时，表单不会发布。
以下是浏览器中呈现的部分的HTML源代码。您将注意到控件不在关闭窗体标记中。
<tr data-id="4">
<form id="edit_social_platform_4" class="simple_form edit_social_platform" novalidate="novalidate" method="post"
浏览 1提问于2014-01-08得票数 0
回答已采纳
1回答
我有两个表，一个是源表，另一个是目标表。当我将行从源表拖到目标表时，我可以拖动行，但在目标表中，被拖动的行引用源表实例，因此，当我在源表中筛选行，然后拖到目标表时，会将错误的数据拖放到目标表中。我是新手，如果我做错了，请指导我。我已经更新了这个代码：-
来源表:- FinedTunedData目标表:- PlanningBoardData
<tbody [dragula]='"bag"' [dragulaModel]='FineTunedDatas'>
<!-- <tr *ngFor="
浏览 0提问于2018-03-26得票数 0
我做了这个函数来设置id的属性：
function set_atr($id, $attribute, $value, $source){
$dom = new DomDocument();
$dom->loadHTML('<meta http-equiv="content-type" content="text/html; charset=utf-8">'.$source);
$xp = new DOMXPath($dom);
$element = $xp->query('//
浏览 0提问于2013-05-28得票数 0
回答已采纳
我有一个模板，其中包含表单上表格的所有HTML。对于我的模型，我使用了一个通用的形式。我的模型是这样的： class Program(models.Model):
air_date = models.DateField(default="0000-00-00")
air_time = models.TimeField(default="00:00:00")
service = models.CharField(max_length=10)
block_time = models.Time
浏览 19提问于2021-02-02得票数 0
2回答
如果您只有一行，那么省略表中的tr元素有效吗？如果它是无效的，是否所有当前的浏览器都按照预期来解释它？
换句话说，这个.
<table>
<td>column 1</td>
<td>column 2</td>
</table>
..。表现得像这样..。
<table>
<tr>
<td>column 1</td>
<td>column 2</td>
</tr>
</table>
浏览 4提问于2016-03-04得票数 5
回答已采纳
1回答
我读过一些关于吊装的文章，但我不确定它在这种情况下是如何应用的。我有一个动态显示和隐藏的选择值，而这个select元素的值始终是未定义的。请帮帮我！谢谢
HTML
<tr>
<td>Type:</td>
<td>
<select id="type" onchange="rulesShown()">
<option value="ATC">ATC</option>
<option
浏览 2提问于2015-12-15得票数 0
5回答
我有一个“添加”按钮，每次单击它时都会插入此行。每行都有一个编辑和删除按钮。
//html
<tr class="insertedRow">
<td><input type="hidden" class="name" /></td>
<td><input type="hidden" class="age" /></td>
<td>
<input type="butto
浏览 0提问于2012-10-19得票数 0
回答已采纳
1回答
我试图在PHP中发布一些JSON数据。但有些地方不对劲。
这是我的html --
<tbody>
{% for x in sets %}
<tr class="">
<td>
<div class="form-group">
{% if x is defined %}{{x}}</div>{% else %}{% endif %}
</td>
浏览 3提问于2015-11-09得票数 2
回答已采纳
我希望在td和div中包含较长的代码。它可以在Chrome中运行，但我无法让它在Firefox中运行。在Firefox中，文本会一直进入下一个td元素。有谁能帮帮我吗？对我的代码的其他评论也是受欢迎的(例如，“不要使用这么多div”之类的)
<tr class="line">
<td class="lineNumber">38</td>
<td class="code"><div class="divCode"><code>
浏览 0提问于2012-07-10得票数 0
回答已采纳
3回答
当选中<tr>元素中的复选框时，我希望禁用它中的所有元素。我的代码如下：
<tr>
<td style="width:25px" id="td_CheckBoxClickable">
<asp:CheckBox runat="server" ClientIDMode="Static" ID="CheckBox_EnableRow" OnCheckedChanged="CheckBox_EnableRow_CheckedChanged"
浏览 7提问于2013-08-26得票数 2
回答已采纳
1回答
我有一个文本字段，可以包含一些文本。我的页面中有一个输入类型文件的表单(不能更改此表单)。当单击submit按钮(链接到文本字段而不是表单)时，我想要的是文本应该存储在某个文件中，并且这个文件被自动上传到表单中。
更准确地说，我不关心将文本存储在文件中，而是实际通过表单上传文本(而不必更改表单结构)。以下是表格：
<form action=submit.cgi enctype='multipart/form-data' method=POST
onSubmit="checkIT(this.form)">
<input type=hi
浏览 2提问于2016-04-18得票数 1
1回答
我只是跟着它，但是我的是php，我也想要相同的选项，如果我从下拉列表中选择一项所有的列都想隐藏，特别是我不了解这一点，以及如何用php编写这段代码。
<table width="100%">
<tr>
<td>Tipo de Equipo :</td>
<td><% =Html.DropDownList("TipoId", (SelectList)ViewData["tiposdeEquipo"], "--Seleccione--", new { @id =
浏览 3提问于2016-05-31得票数 0
回答已采纳
我为待办事项列表应用程序生成了一个脚手架，并遗漏了一些列供以后添加。
我运行命令来创建一个迁移以添加一个名为client的新列，并且我更改了我的文件，以便它显示在项目index和form上，但是当我在客户端字段中输入一些内容并提交时，它不会保存信息，仍然是空的。
更新1:
下面是我的路线：
‘
Rails.application.routes.draw do
root :to => 'projects#index'
resources :projects
end
‘
以下是我的索引视图：
‘
<h1 id="title">Pr
浏览 0提问于2014-12-07得票数 0
回答已采纳
2回答
在我们的web应用程序中，我们使用多个“响应”的HTML表--如果它们的内容太宽，它们可以水平滚动(CSS规则：width:100%; overflow-x: auto;)。这样就可以在表中显示所有必要的信息，而不会破坏布局，并使整个页面水平滚动。
在我们的示例中，这只适用于小屏幕(在调整大小的浏览器窗口上，或者如果用户将字体大小增加了200%以上)，因为我们的表并不大(请注意，应用程序是内部的，只能在笔记本/桌面屏幕上使用)。
不幸的是，键盘用户无法使用overflow-x水平滚动内容--滚动内容的唯一方法是使用鼠标；只有当整个页面可滚动或元素具有焦点时，才能使用箭头键。
因此，为了使我们的
浏览 2提问于2018-12-03得票数 0
回答已采纳
我有以下代码：
javascript如下所示：
$(document).ready(function() {
$('#btnHide').click(function() {
$('td:nth-child(1)').nextUntil(':nth-child(4)').toggle();
});
});
，html如下所示：
<table id="tableone" border="1">
<tr>
<
浏览 1提问于2014-06-17得票数 0
我有一套调查问题，每一项都安排在一张排在一张桌子上。我希望第一个条目作为提示符并一直用于该单元格，如下所示：
<table style='width:100% table-layout:fixed;border-collapse: collapse;'>
<tr>
<th style='width:40%'>
<b>How long were you on active surveillance?</b>
</th>
<td style='
浏览 6提问于2016-02-24得票数 3
回答已采纳
1回答
我有一个问题，我不知道如何解决它。
我有一个小网站，在共享文件夹上，可以只在里面使用，所以我不能在这个网站上使用后端。只有JS，只有HTML，只有硬核！我需要修改HTML并永久保存它。例如：
<html>
<body>
<script type="text/javascript">
function addRow(id){
var tbody = document.getElementById('sem')
var row = document.createElement("TR")
v
浏览 1提问于2013-10-14得票数 0
回答已采纳
2回答
我想使用CURL解析XHTML内容。如何在标记之间废弃事务号、权重、高度、宽度。如何仅将文档中的内容废弃，并使用CURL将其作为数组获取？
transactions.php
<table border=0 cellspacing=0 width=100%>
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td width="30%" class="Me
浏览 5提问于2011-07-26得票数 3
5回答
标题本身是不言自明的。
作为一种好奇，我想知道在表中将ID分配给TR或TD是否可行，最重要的是是否有效？
比如：
<td class = "xyz" id = "abc"></td>
或
<tr class = "xyz" id = "abc">
<td> </td>
</tr>
我搜索了它，但找不到相关的答案，所以我想我可以问这里。
谢谢！
浏览 8提问于2015-03-25得票数 26
回答已采纳
我尝试在中输入以下内容，但即使我使用了"Validate HTML fragment“选项，它也无法进行验证：
<table>
<form action="foo">
<tr>
<td>tables + forms = BOOM</td>
</tr>
</form>
</table>
我认为我在这里尝试做的事情非常清楚，但是验证器似乎告诉我这是不允许的:(.
如果我想让一个表包含多个表单，该怎么办？我猜如何将a拆分成几种形式的可能性很多，但
浏览 0提问于2010-08-19得票数 0
回答已采纳
3回答
如何使表508中突出显示的文本符合要求？目前，我正在用em标签包装文本，并添加一个咏叹调标签，以提请注意它的背景是黄色的。显然，这个替代标记是不兼容的，因为屏幕阅读器没有读取它。
<table style="border: solid 1px black;">
<p>Search results for the term "will"</p>
<thead>
<th>first name</th>
<th>last name<
浏览 5提问于2013-11-05得票数 3
回答已采纳
假设我有一张桌子：
+------+------+------+
| Col1 | Col2 | Col3 |
+------+------+------+------+
| Row1 | D1.1 | D1.2 | D1.3 |
+------+------+------+------+
| Row2 | D2.1 | D2.2 | D2.3 |
+------+------+------+------+
| Row3 | D3.1 | D3.2 | D3.3 |
+------+------+------+------+
我想用HTML5来表示它。棘手的是，像这
浏览 1提问于2013-11-07得票数 17
回答已采纳
在ajax调用的成功函数中，我是从php脚本检索数据到表的.append()行。下面是构建行的代码：
$.each(data, function(index,element) {
$('table#tblMovieList tbody').delay(200).append('<tr class="viewMovieRow">' +
'<td class="listEditMovie">' +
'<a class="lin
浏览 0提问于2013-02-16得票数 0
回答已采纳
1回答
我有一个html代码保存为php，表单验证工作在谷歌chrome，但不是在IE。在IE中，当我点击submit按钮后，页面会自动转到process，而不管是否有错误。
这是我的代码：
<!DOCTYPE html>
<html>
<head>
<title>Week 8 Lab - JavaScript DOM and Arrays</title>
<meta charset="utf-8">
<link href="css/style.
浏览 2提问于2014-11-12得票数 0
我有一张桌子如下；
<table id="mytable">
<tr>
<td>cola1</td>
<td>cola2</td>
<td>cola3</td>
<td class="rem">cola4</td>
</tr>
<tr>
<td>colb1</td>
<td
浏览 8提问于2012-03-11得票数 2
回答已采纳
我的localStorage发生了一些奇怪的事情。数据保存在我的localStorage中，但从不在ng-repeat中显示。但是，当数据少于2个项目时，它会显示在屏幕上。当它大于2时，它不会显示。这是我的控制器代码
$scope.saved = localStorage.getItem('todos');
if($scope.saved != null ) {
$scope.invoice = { items: JSON.parse($scope.saved) };
} else {
$scope.invoice = { `enter code here`
浏览 2提问于2015-08-08得票数 0
我使用jquery在页面中动态创建表格内容，如何获取这个动态表格的行号索引？在下面的代码中，当我单击"show more“链接时，我在下面的代码中使用了index函数，但它不起作用。如何解决这个问题？谢谢。
$.getJSON(JsonURL,
function(data){
$.each(data, function(index, item){
var obj = item;
books.push(book);
});
for (
浏览 5提问于2014-03-27得票数 10
回答已采纳
有没有在jQuery中创建祖先元素和子元素的解决方案？
$('#tblSample tr:last').after('<tr><td></td><td></td></tr>');
看起来像是
<tr>
<td></td>
<td></td>
</tr>
但是如何在<tr>和</tr>标记之间生成动态的<td></td>子元素呢？
浏览 1提问于2012-02-02得票数 0
回答已采纳
我尝试根据特定<tr>元素中的<td>元素的行跨距，在表中的其他<tr>元素之后添加<td>元素。在同一函数中，在<td>元素中单击此按钮时，每次行跨度都会增加1，因此它还需要增加行数。我不知道该怎么做。也许以某种方式使用slice()函数。
例如，假设我们有这样的表结构。
<table>
<tr>
<td>Content 1</td>
<td>Content 2</td>
<td>Content 3</td>
浏览 0提问于2012-02-29得票数 2
回答已采纳
示例：
<table id ='table'>
<tr>
<td>1</td>
<td><select id='old' name='old'></select></td>
<td><select id='old2' name='old2'></select></td>
<td><div id='old3' name='old3&#
浏览 1提问于2012-02-29得票数 3
回答已采纳
所以我有这个javascript函数
function validation(step){
var lines = [];
$.each($('#part1row').find('.countall').html().split(/<br\s*\/?>/), function(i, line){
var lineremnbsp = line.replace(/ /gi,'');
var lineremspace = lineremnbsp.replace(/ /gi,'
浏览 0提问于2017-08-10得票数 1
回答已采纳
2回答
我有一张桌子，在一个单元格里，我有这样的东西。。
<td class="quantity">
[a bunch of spans and divs and all stuff]
</td>
我想知道在jquery中如何在单元格的底部插入文本，因此结果将是：
<td class="quantity">
[a bunch of spans and divs and all stuff]
inserted text
</td>
我需要它工作，不管td中
浏览 0提问于2011-10-15得票数 7
回答已采纳
如何使用JQuery在<td>中插入<div>，并将<td>的所有子元素放在<div>中
假设我以下面提到的格式呈现了HTML。
<td class="known_td">
<input ../>
<img ../>
</td>
更新后的HTML应该如下所示：
<td class="known_td">
<div>
<input ../>
<img ../>
</div>
&l
浏览 1提问于2012-02-24得票数 5
回答已采纳
我的混合应用程序的index.htm和main.js文件中有以下代码，它们使用jQuery、Mobile和Icenium开发。我试图在HTML表中显示从对web服务的ajax调用中获得的JSON数据(对象数组)。在下面的jQuery代码中，保存这个JSON对象数组的变量称为'msg‘。
问题是，在这个问题的末尾，我的表会被扭曲为html。如何确保我的输出是正确的而不是倾斜的？
index.html
<div id="dataDiv" ><table bgcolor="aliceblue" id="employeesTable&
浏览 2提问于2013-12-28得票数 0
回答已采纳
3回答
我在django模板中获得了以下代码：
{% for item in items %}
<tr onclick="{% url collection:viewitem item_id=item.id %}">
<td>{{ item.name }}</td>
<td>{{ item.date }}</td>
<td>
<button onclick="{% url collection:edititem item_id=item.id %}" t
浏览 0提问于2011-05-30得票数 12
回答已采纳
1回答
<tr ng-repeat="transaction in transactionDetails">
<td>{{ transaction.FromParty }}</td>
<td>{{ transaction.CreatedState}}</td>
<td><a href="file:///home/moulali/Desktop/samp_cc.go">Open File<
浏览 0提问于2017-09-14得票数 0
2回答
我在一个网站上有多张桌子，如下所示：
<table>
<tr>
<td>Name</td>
<td>foo</td>
</tr>
<tr>
<td>Count</td>
<td>15</td>
</tr>
<tr>
<td>Date</td>
<td>2014-11-17</td>
</tr>
&l
浏览 0提问于2014-11-17得票数 2
我尝试递增索引值以创建一个数字为1、2、3、4的列表
<tbody>
<tr *ngFor="let item of queue.truckQueus; let i = index" [attr.data-index]="i">
<td>{{i ++ }}</td> //this throws an error
<td>{{item.truck.reg_no}}</td>
</tr>
</tbody>
如何将1中的数字相加
我还
浏览 0提问于2018-08-01得票数 0
下面的工作在Chrome (最新的)和奇怪的过时的IE版本--但在最新的IE版本(11)，它似乎不像我想要的行为。
在Chrome (最新版)和过时的IE版本中，第1列不改变其宽度以适应列2中的大图像，但是在最新的IE版本(11)中，它确实改变了--如何纠正？
<table>
<tr>
<td class="header">
Column 1
</td>
<td class="header">
Column 2
</td>
</tr>
&
浏览 7提问于2015-07-05得票数 6
回答已采纳
1回答
我在chrome中看到了底部边框，但在IE8中看不到。如何在IE8中修复此问题？
<table>
<tr>
<td>test</td>
</tr>
<tr>
<td style="border-bottom: 1px solid black;"></td>
</tr>
</table>
浏览 3提问于2013-03-05得票数 0
回答已采纳
1回答
有人能帮我介绍一下在jquery数据表的每一行中添加诸如编辑、删除之类动作按钮的最佳方法吗？
我已经通过了一些链接，但没有找到解决办法。
$(document).ready(function () {
$.ajax({
url: '@Url.Action("GetStudentGridData", "UserManagement")',
type: "GET",
dataType: 'json',
success: function (dat
浏览 3提问于2017-05-23得票数 2
3回答
我正在使用一个自定义的用户控件(我没有修改的权限)，它呈现一个表格的HTML，如下所示：
<tr>
<td></td>
<td></td>
</tr>
它允许我在标签中动态添加任何控件。我的问题是如何设置表格单元格的单元格样式。通常，我会使用<td class="myClass">。因为我没有修改它的源代码，所以我使用的变通方法是创建一个<div>，设置CSS类并将其添加到<td>中。代码看起来像这样：
HtmlGenericControl divContro
浏览 0提问于2009-02-09得票数 0
1回答
我在一个td元素中做了一个横幅img。我已经包括了一个重置脚本，以删除所有的空白，垫子和空格到处。
<td><img /></td>
但仍有一条空白处。如何删除空白行？
浏览 3提问于2013-12-14得票数 1
回答已采纳
场景
我有一个带有预定义样式的.CSS文件。我已经将此链接到我的HTML文件中。我希望为html文件中的所有TD元素分配一个特定的类名(myclass)。
问题
如何在不对每个TD元素执行class="myclass"的情况下为文档中的所有TD分配类名(myclass)。
我可以在<style>部分引用类名吗？
减少重复的意图
i.e
myCss.css有以下内容
.myclass{text-weight:bold;}
}
我使用这个CSS (我不能修改上面的CSS文件)。是否可以在重新显示在.css文件之上的单独的HTML文件中使用下面的内容
<style&
浏览 3提问于2014-08-10得票数 0
1回答
我有一个由多个tbody元素组成的表，这些元素由多个tr行组成：
<table>
<thead>[...]</thead>
<tbody>
<tr><td></td></tr>
<tr><td></td></tr>
</tbody>
<tbody>
<tr><td></td
浏览 2提问于2020-07-19得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
