在数据表中添加新行时，如何向元素(<td>标签)添加数据属性？
在数据表中添加新行时，可以通过使用JavaScript来向元素(<td>标签)添加数据属性。具体的步骤如下：
- 首先，获取到要添加数据属性的元素。可以通过JavaScript的DOM操作方法，如
getElementById()、getElementsByClassName()、getElementsByTagName()等来获取元素对象。 - 然后，使用元素对象的
setAttribute()方法来设置数据属性。该方法接受两个参数，第一个参数是要设置的属性名称，以"data-"开头，后面跟上自定义的属性名，例如"data-id"、"data-name"等。第二个参数是要设置的属性值。 - 最后，将新添加的元素插入到数据表中的指定位置。
以下是一个示例代码，演示如何向数据表中的元素添加数据属性：
<!DOCTYPE html>
<html>
<head>
<title>添加数据属性示例</title>
</head>
<body>
<table id="myTable">
<tr>
<td>数据1</td>
<td>数据2</td>
</tr>
</table>
<script>
// 获取要添加数据属性的元素
var tdElement = document.createElement("td");
tdElement.textContent = "新数据";
// 设置数据属性
tdElement.setAttribute("data-id", "123");
tdElement.setAttribute("data-name", "John");
// 将新元素插入到表格中
var table = document.getElementById("myTable");
var trElement = document.createElement("tr");
trElement.appendChild(tdElement);
table.appendChild(trElement);
</script>
</body>
</html>在上述示例中，我们创建了一个新的<td>元素，并使用setAttribute()方法为该元素设置了两个数据属性，分别是"data-id"和"data-name"。然后，将新创建的元素插入到了数据表中。
请注意，这只是一个示例代码，实际应用中可能需要根据具体的需求进行适当的修改和调整。
相关·内容
我正在生成一个HTML数据表使用谷歌应用程序脚本，并试图获得的URL结果是可点击的。
我应该在哪里添加这个？它应该是另一个函数吗？
function createTable(dataArray) {
if(dataArray){
var result = "<table class='table table-sm' style='font-size:0.8em'>"+
"<thead style='white-space: nowrap'>
浏览 3提问于2021-03-02得票数 0
回答已采纳
我想为响应式数据表添加data-title属性。td data-title包含break语句标签。但是break语句标记不起作用。下面是我的示例代码，
<td data-title='Goods<br>Code'></td>
我想把'Goods‘和'Code’都放在两行。
浏览 3提问于2018-11-26得票数 1
1回答
调用存储过程将数据绑定到jQuery数据表(v1.10.16)。当删除一条记录时，Ajax调用成功地从数据库中删除了该记录。在delete的回调中，我重新绑定了jQuery数据表，但我刚刚删除的记录仍然存在。如果我刷新页面，我刚刚删除的记录将不再存在于datatable中。
function DeleteFundingSource(id)
{
function callBack(response) {
if (response.d == 'OK') {
$('#<%=lblMessage.Clien
浏览 1提问于2018-03-17得票数 0
我正在从多个工作表中读取google电子表格中的数据，并以表格格式显示检索到的数据。一旦检索到数据，我将在ajax调用中创建包含数据的表行。
$tbody.append('<tr><td>'+rows[i][6]+'</td>'+'<td>'+rows[i][0]+'</td><td>'+rows[i][1]+'</td><td>'+rows[i][2]+'</td><td>'+r
浏览 3提问于2016-03-06得票数 1
1回答
下面是我的引导数据表staff_look。当页面加载时，它包含大约50条记录。
$(document).ready(function () {
$('#staff_look').DataTable({
'ordering': true,
'lengthMenu': [10, 25, 50, 75, 100]
});
});
单击按钮时，我删除所有行并将新行附加到表主体。
$.post("<?php echo
浏览 3提问于2017-11-23得票数 0
3回答
我在<td>中使用<pre>标签时遇到问题。我有JSF数据表和它的三列。我需要所有三列来包含预先格式化的文本。
如果我使用<pre>标签，文本会按照需要预先格式化，但是列的宽度会比文本大得多。
我可以在css中通过在<pre>标签的样式中指定white-space: pre-line;来解决这个问题。但它只适用于firefox和IE，chrome忽略了这种风格。
所以我的问题是:有没有可能解决内部包含<pre>标签的<td>的宽度问题？
编辑：
我的css类：
.dt_row {
height: 8px;
浏览 3提问于2012-05-06得票数 15
回答已采纳
未调用以下事件：
<script>
$("#inputTxt").change(function() {
alert("changed");
});
</script>
inputTxt的代码如下：
<p:inputText id ="inputTxt" name="inputTxt" value="#{article.description}"
style="border:no
浏览 0提问于2012-02-21得票数 4
回答已采纳
我希望在多个特定行中填充json数据。杰森：
{"locations":[{"Location":"27|","Name":"Al Jamia Distric B ,"branch":"23","MaleStaff":"20","FemaleStaff":"30"},{"Location":"26|","Name":"Al Kharj Branch ",
浏览 4提问于2015-07-05得票数 0
回答已采纳
1回答
我有一个数据表，其中显示的信息像"id“、”理由“、"errorMessage”和"stackTrace“。我运行一个有角度的for-循环来显示这些信息，但是当我单击数组中的数据时，我试图跟踪索引并以一个模式显示这些信息。如何将索引解析为我的模式，以便在那里显示信息？
这是我的数据表：
<!-- Data Table -->
<table class="table table-hover">
<thead class="thead-dark">
<tr>
<
浏览 1提问于2018-03-21得票数 0
回答已采纳
2回答
我正在尝试使用xsl设计一个表单，它可以解析一个简单的xml文件；如下所示：
<tests>
<agent ID="1" Name="Name 1" />
<agent ID="2" Name="Name 2" />
<agent ID="3" Name="Name 3" />
</tests>
和xsl文件：
<form action="." method="post"
浏览 1提问于2012-08-15得票数 0
回答已采纳
1回答
我使用Xcode中的“”菜单选项来为我们的翻译器生成XLIFF文件。
其中许多标签将在使用数据填充的运行时进行更改。是否有方法将这些标签、按钮等标记为不需要翻译，以使它们不被转换到XLIFF文件？现在我把标签保留为“标签”。是否有一种方法将其标记为不可译，并可以将在运行时将更改的样本数据放入其中？
浏览 3提问于2015-08-13得票数 4
回答已采纳
嗨，我正在做一个教程项目，第一部分我试图做一个表格，接受图书ISBN号码，然后在网上查询它的价格。
首先，我制作了一个图书数组作为样本数据，一个表来显示它们，还有一个表单来接受ISBN。
在这个阶段，我只希望表单将ISBN添加到现有的数组中，但这是行不通的。当我提交表单时，数据不会添加到表中，而是会添加一个空表行。所以有些事情正在发生，但不知何故不正确
我的应用程序
(function() {
var app = angular.module('booksApp', []);
app.controller('BooksController', function
浏览 0提问于2014-12-10得票数 0
回答已采纳
当我使用这个数据表的添加一个新行时，如何设置一个TD的"id“属性？假设我只有一个TD。
浏览 1提问于2015-11-05得票数 0
回答已采纳
我有一个Vuex getter，它可以获取当前路由的所有相关数据，然后在Vuetify <v-data-table>中显示这些数据，在创建组件时，它可以很好地工作。但是，当我在getter使用的相关state中的data Array中创建新条目时，它只在我离开当前路由时获取和显示新条目。我使用当前路由作为关键字来标识state中的不同条目，以便可以显示当前路由的不同信息，因此也就是Vue router。我不确定是否清楚地解释了我的问题(对不起，英语不是我的母语)，所以我认为这是相关的代码:有问题的getter： computed: {
...mapGetters({
浏览 10提问于2019-09-27得票数 0
回答已采纳
我有一个数据表，如下所示：
<table>
<tr><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
<tr><td>Value 3</td></tr>
</table>
我希望将两个"td“标记之间的文本传递到Ajax函数中；理想情况下，单击表条目，表条目的值将用于通过Ajax形成SQL查询。但是，我不知道如何将每个唯一的表条目传递到Ajax函数中；我不能为每个表条目提供不
浏览 3提问于2014-08-03得票数 0
回答已采纳
2回答
我有数据表，当我从其中选择一行时，所有的值都显示在没有单选按钮的输入文本字段中。以下是委托函数
$('#itb tbody').delegate('tr', 'click', function(){
$("#SCC23_STATIONNAME").val($("td:eq(0)", this).text());
$("#SCC23_DEPSTATION").val($("td:eq(1)", this).text());
return
浏览 4提问于2016-03-10得票数 2
回答已采纳
1回答
响应表设计问题
、、、、
我想在jsp中显示一个响应表。
我使用一个显示标签来显示表和分页。
当我试图使它响应时，我遵循了中的步骤并完成了它。但是<thead>标记中的名称与响应程序中的表不同。
他还解释说
<td data-label="First name">Chris</td>
td:before { content: attr(data-label); }
使内容保留在HTML中而不是CSS中。
但是当我在jsp中使用它时，它会将警告显示为
未定义属性名data-title和未定义属性名data-label
在<display:column>标签
浏览 4提问于2013-09-05得票数 1
回答已采纳
简单地说，我要做的是在数据表折叠时使用一个图标，在数据表没有折叠时使用另一个图标。我已经很好地处理了这段代码：
<script type="text/javascript">
$(function () {
$('.glyphicon').on('click', function () {
$(this).toggleClass("glyphicon-collapse-down glyphicon-collapse-up");
});
});
</script>
当我在表中查
浏览 3提问于2016-02-10得票数 0
回答已采纳
3回答
我有一个数据表，如下所示：
<table><thead>
<tr>
<th><input type="checkbox" /></th>
<th scope="col">Foo</th>
<th scope="col">Bar</th><tr>
</thead>
<tbody>
<tr><td><input type="checkbox" />
浏览 2提问于2012-11-28得票数 4
1回答
我有一个数据表，我想捕捉元素内部的文本，它紧跟在一个元素后面，其中有一个标签，里面有一个标题属性为" label“。请看这里的桌子：
<table>
<tr>
<th><label title="Country">Country</label></th>
<td>I want to capture this text</td>
</tr>
<tr>
<th><label title="Other"
浏览 5提问于2011-11-22得票数 0
1回答
我使用的是jQuery数据表，我有一个HTML页面，在该页面中，我在表中显示来自数据库的记录。最初，该表加载了50条记录，然后我在每次滚动到底部时追加50条记录。
现在，jQuery DataTables搜索函数可以很好地处理前50条记录，但是它不能识别在无限滚动过程中动态创建的其他记录。
HTML和DataTables初始化：
$(document).ready( function() {
$('body #new_table').dataTable( {
'scrollX': true,
'scrollY': 600
浏览 1提问于2015-10-24得票数 3
回答已采纳
3回答
我有一个数据表，我在ASP.NET MVC中使用C#在剃须刀视图中呈现。
为了给我想要实现的目标做一个非常简短的例子，让我们用这个表作为一个例子。
function setValueAttr(el) {
el.setAttribute('value', el.value)
}
function aplicar() {
var myTab = document.querySelectorAll('#tableID tbody tr .txtID:not([value=""])');
var tableData = [];
Ar
浏览 3提问于2019-11-19得票数 0
回答已采纳
我正在使用vb.net 2010。我有一个datagridview，它的数据源是一个数据表。我动态地向数据表中添加行。
Friend WithEvents DGVCusClient As System.Windows.Forms.DataGridView
DGVCusClient.DataSource = m_table
Private Sub DVGCusClient_DoubleClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles DGVCusClient.DoubleClick
浏览 0提问于2011-09-21得票数 0
回答已采纳
我在我的模型控制器中有一个自定义函数，叫做block，它在数据库中为一个用户设置一个从0到1的字段，反之亦然，在我的索引中有一个数据表，它显示用户和block/unblock button，数据表看起来像这样： ? 现在，我使用如下所示的图标将我的数据表重新制作成一个更好看的数据表 ? 问题是点击阻止图标不会做任何事情，这是第一个阻止按钮的代码： <td>
<form action="{{ route('users.block',$user->id) }}" method="post">
浏览 23提问于2019-03-03得票数 0
回答已采纳
我想在表的最后一行追加一行。在我的代码中，它似乎在第一次动态添加行时工作。但是，当添加其他行时，它不会成为最后一行。
我总是希望"subtot“行是最后一行，但当我追加其他行时，它不会更改为最后一行。即使附加了其他行，它仍然停留在原来的位置。
//make sure that subtot is only appended once
if($('.subtot').length < 1){
$('<tr class = "subtot"><td></td><td></td&
浏览 3提问于2013-10-24得票数 1
回答已采纳
使用以下代码：
HTML：
<head runat="server">
<title>datatable loading searching, sorting and updating </title>
<link rel="stylesheet" type="text/css" href="css/jquery.dataTables.min.css" />
<link rel="stylesheet" t
浏览 1提问于2019-01-01得票数 0
回答已采纳
2回答
我正在使用datatable，我想知道，当我在表中单击时，单击的是(链接)还是td(单元格)。
<td>
my text - <a href="mylink.html">mylink</a>
</td>
这是我的数据表初始化
oTable = $('#mytable').dataTable(
{
...
};
我在td上点击查看
oTable.on("click", 'td', function(e)
{
...
});
实际上，如果单击td或a，我的结果是相同的(this)
浏览 3提问于2015-12-29得票数 1
回答已采纳
在primefaces 4.0中如何隐藏p:panelGrid的网格线(边框)而不影响内部数据表的边框
当前正在使用此CSS：
.ui-panelgrid td, .ui-panelgrid tr{
border-style: none !important
}
这会同时影响数据表和面板网格。但我只希望隐藏嵌板网格线。
在我的例子中，数据表嵌套在面板网格中。
谢谢。
浏览 2提问于2014-01-13得票数 3
1回答
基本上，代码运行良好，只是当数据越来越大时，加载速度变得非常慢。
任何人都可以建议如何提高装货速度？
下面是我的代码：
Javascript
<script type="text/javascript">
$(document).ready(function() {
$('#example').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"aoColum
浏览 3提问于2014-08-06得票数 0
1回答
我在中使用表。我正在从数据库中得到一个数据表。数据表有三列。一列有用逗号分隔的图像名称。
数据表：
Type Status Images
1 1 one.jpg,two.jpg,three.jpg
2 2 four.jpg,two.jpg,seven.jpg
3 1 one.jpg,six.jpg
我在SSRS表中显示这三行。如何将图像显示为每行单元格？
浏览 0提问于2012-10-05得票数 0
我使用AngularJS数据表并使用.withOption('stateSave', true)启用保存状态。
当我刷新页面时，一切都很好，但是当我改变路线，回来时，stateSave就不能工作了。
--我发现，在每次更改路由时，datatable都会创建一个，以保存当前的表状态，并使用差异key！因此，当改变路线时，saveState不能工作。
我怎样才能解决这个问题？
浏览 0提问于2019-06-19得票数 2
请参考和。为了解释这个场景，我有一个来自类星体框架的Quasar。由于我有嵌套数据，所以我在可折叠的for循环中填充主数据，在可折叠数据表的内容中填充次要数据。该页面还具有编辑/查看模式切换功能，就在右边的过滤器下面。我已经格式化了数据表的列，以便在编辑模式下显示Q-输入，而只显示视图模式中的文本。请执行以下操作以复制错误。步骤5和后续步骤是产生意外行为的步骤。
展开上的一行。
切换编辑/视图切换，可以在过滤器下面找到。
试着编辑任何行。观察结果：当页面模式更改为视图模式时，这些值在离开焦点时确实会在文本框中持久化，在标签中也会保留。
单击“添加”按钮添加一个新行，该按钮正好位
浏览 2提问于2017-11-13得票数 0
回答已采纳
我有一个datagridview，它的数据源设置为数据视图->数据表，行和列是在运行时自动生成的。
dtable.Columns.Add("1", typeof(int));
dtable.Columns.Add("2", typeof(string));
dtable.Columns.Add("3", typeof(string));
datagridview1.DataSource = dtable;
我希望第三列是一个下拉式类型，并有3个选项。我如何在运行时做到这一点，因为我只在运行时填充网格。
浏览 0提问于2011-10-21得票数 1
回答已采纳
阻止内联编辑数据表上的html元素
<td class="sorting_1">
<input type="checkbox">
<i class="fa fa-cubes"></i>
Text Field
</td>
DataTable编辑器
$('#dynamic-table').on('click', 'tbody td', function (e) {
edit
浏览 0提问于2014-10-02得票数 0
我目前正在开发一个web应用程序，它需要使用数据表中的一个按钮预览一些报告。数据表中的每一行都有自己在javascript上创建的按钮，我希望使用相同的javascript文件触发该按钮。
有这样的事吗？请参阅下面的代码：
$('#AccountList').append('<tr data-empid="' + row.ci_ID + '">'
+ '<td text-align:center;">' + row.ciCODe + '</
浏览 0提问于2019-08-08得票数 1
回答已采纳
由于简单性和可能性，我已经尝试过数据存储(datatables.net)，我非常喜欢它。
现在，我需要创建新的数据集，我想知道是否有可能使用可数据。恐怕，数据表只是用于显示数据，而不是编辑现有的创建新集的集合。
我说的对吗？
非常感谢
Update：恐怕我需要重新表述这个问题。
是否可以使用可数据作为某种形式输入新数据(或编辑现有数据)？
我可以自己负责在服务器端添加(或更新)数据。
很抱歉在第一次运行时不够具体。
浏览 2提问于2014-05-15得票数 1
回答已采纳
我有一个js代码，将图标选择限制到14，我想要显示我选择的图标的数量，分别在左侧和右侧显示我选择的文本，我想更新'12蒙特特‘选择的图标的数量。我还想更新右边的“2分钟”。
const icons = document.getElementsByClassName("fa-baby");
for (let i = 0; i < icons.length; i++) {
icons[i].addEventListener("click", function() {
let ctn = document.getElementsByCla
浏览 0提问于2019-04-02得票数 0
3回答
因为我是C#的新手，所以我想知道哪个是管理多个数据表的好选择。我有一个项目，大约有100个数据表(假设彼此相似，但列数不同)。我不知道如何收集它们，我需要一个数据表的数组吗？(ps:数据表是在运行时动态创建的，它们的数量可能会有所不同)，提前谢谢您
浏览 3提问于2016-04-21得票数 1
9回答
我有一个来自服务器的响应，它将数据数组传递给我的vue实例。我已经使用该array.But完成了数据表，我需要知道的是如何显示序列no数组的索引。
这里我附加了我的组件代码，我的响应是ok的，表也是ok的，我只需要增加一个列并在那里显示索引值。
我的数组名是客户。
<v-data-table
v-bind:headers="headers"
v-bind:items="customers"
v-bind:search="search"
v-cloak
>
<template slot="items
浏览 11提问于2017-09-23得票数 29
回答已采纳
1回答
如何更改jsf数据表格单元格的背景？我需要更改整个单元格的颜色，而不是其中文本的背景。
编辑:期望的结果是有一个包含：<td style="background-color: #ff9200">...</td>的表，其中实际的背景颜色由用户在某处定义，并且对于每个<td>可能是不同的。
做<td><div style="background-color: ...">...</div></td>是可能的，但它开始变得越来越丑陋。
浏览 0提问于2011-02-23得票数 1
我有一个Vuetify数据表，它嵌套在V卡中，这样我就可以在数据表上启用内联搜索，但这会导致它缩小，只占用整个容器的一小部分，而当它没有嵌套在V卡中时，它会填满整个容器。
我在的codepen上复制了一个很小的例子。
不过，值得关注的主要领域是这里。
<v-list-tile @click="">
<v-list-tile-action>
<v-icon>dashboard</v-icon>
</v-list-tile-action>
&l
浏览 0提问于2017-11-16得票数 12
回答已采纳
我有两张桌子
<table>
<tr>
<td class="myclass" data-date="2015-07-09"> Some text </td>
</tr>
</table>
<table>
<tr>
<td data-date="2015-07-09"> Text </td>
</tr>
</table>
我想做的是
浏览 2提问于2015-07-01得票数 0
回答已采纳
jQuery数据表是一个插件，用于添加过滤器、分页和搜索输入。我一直在使用它们和我的Laravel应用程序一起将数据放入其中，而且它一直运行得很好。
现在，我添加了一个下拉筛选器，它与数据存储分开，我还添加了一些jQuery代码，如下所示：
$('.dropdownselect').change(function() {
$('.table').find('tr').remove();
$.post('/schedules', { value: $(this).val() }, function(result)
浏览 0提问于2014-09-04得票数 0
回答已采纳
1回答
我正在试着写一个程序，在搜索源代码后列出元素的名称和ID。我已经使用下面的脚本查找名称并将其显示为警报弹出窗口。我希望它显示在一个数据表中，而不是弹出窗口。
<script>
var $textarea = $('#TextArea1'), $submit = $('#Submit1');
$submit.click(function (e) {
e.preventDefault();
sourceCode = $textarea.val();
v
浏览 0提问于2016-04-27得票数 0
1回答
下面是我在JQuery数据表中的row对象。
<tr class="draggableobject ui-draggable" style="position: relative;">
<td>Account</td>
<td>706986 - M J KELLNER CO INC</td>
<td>Atlanta</td>
<td>$36,000</td>
</tr>
$(".draggableobj
浏览 1提问于2015-12-01得票数 0
回答已采纳
我正在为一些加密货币制作一个交换书模拟器，我需要制作在表值后面的进度条。
接收数据的数据表具有以下模板：
<v-data-table
:headers="headers_ask"
:items="book_item[1]"
class="transparent data-table-books-asks ml-3 mr-3"
浏览 1提问于2022-04-26得票数 0
3回答
我使用了一个插件，它在页面加载时创建按钮，在这个插件创建之后，我想在页面加载上更改它们的文本，那么如何使用jquery来实现呢？
我使用引导数据表，我想要更改标签和按钮文本，比如next和前文，我想要更改标签，比如显示标签。
在我的代码中，这一行代码$('#results').DataTable();用它的按钮创建数据表，所以cab如何更改文本(如果是特定的)按钮。
Html代码
<table id="results" class="table table-striped table-bordered" cellspacing="0
浏览 0提问于2016-04-25得票数 1
回答已采纳
1回答
我可以在数据表中看到项目，但第一行是表中没有数据？
(document).ready(function() {
$('#callback_table').DataTable({
"paging": "input",
"ajax": {
"type": "GET",
"url": '/History/GetCallbackHistory',
"data": {
UserId: doc
浏览 1提问于2021-04-07得票数 0
2回答
我想向我的数据网格单元格添加一个数据标签。但是我不知道如何访问一个元素并给它添加一个样式属性？
你有什么想法吗？
编辑:目标是创建像这样的响应表
<table class="responsive">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Vorname</th>
<th scope="col"&g
浏览 4提问于2016-08-17得票数 2
我有一个标签控件列表。在“编辑”单击“我要隐藏标签并显示文本框”。我的标签在运行时得到了ID。
这是我的观点--
<script>
$(document).ready(function () {
$('#Edit').click(function () {
hide label and show text control
});
});
</script>
<table>
@for (var i = 0; i < Model.LogData.Count; i++)
{
<
浏览 0提问于2016-06-23得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
腾讯会议
实时音视频活动推荐
腾讯云开发者
