gpt4 book ai didi

javascript - 克隆最后一列并将其添加到同一个表中 - jQuery

转载 作者:行者123 更新时间:2023-12-03 10:17:34 25 4
gpt4 key购买 nike

我想在 html 表格末尾创建一个新列,并使用不同的标题名称和空单元格。该表具有不同颜色的交替行。

我正在尝试这样:

<!DOCTYPE html>
<html>
<head>
<title>testing</title>
<script type="text/javascript" src="jquery-1.11.2.js"></script>
<script type="text/javascript">

function add() {
$('#tableID tr').clone().appendTo('#tableID');
}

</script>

</head>
<body>

<table id="tableID">
<tr>
<th>one</th>
<th>two</th>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
<button onclick="add()">add</button>
</body>
</html>

在保持替代颜色的同时,我需要进行哪些更改才能实现此目的? td 元素包含一些元数据,所以我也想保留它。

最佳答案

这是一个演示如何克隆最后一行和最后一列。

保留交替的行颜色,更改标题文本,并且td单元格被“清空”。此外,如果您在复制列后检查 html,您会发现 data-foo="metadata" 属性也已被复制。

jQuery(function($) {
$('#clonerow').on('click', function() {
$('#tableID tr').last().clone().appendTo('#tableID');
});

$('#clonecolumn').on('click', function() {
$('#tableID tr :last-child').each(function() {
var clone = $(this).clone().html('&nbsp;');
if (clone.is('th')) {
clone.text('header');
}
$(this).parent().append(clone);
});
});
});
#tableID tr:nth-child(odd) {
background-color: green;
}
#tableID tr:nth-child(even) {
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button id="clonerow">Clone Row</button>
<button id="clonecolumn">Clone Column</button>
<table id="tableID">
<tr>
<th>one</th><th>two</th>
</tr>
<tr>
<td>1</td><td data-foo="metadata">2</td>
</tr>
<tr>
<td>3</td><td>4</td>
</tr>
<tr>
<td>5</td><td>6</td>
</tr>
</table>

关于javascript - 克隆最后一列并将其添加到同一个表中 - jQuery,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29799472/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com