我试图弄清楚如何将表中的所有原始值添加到变量/数组甚至是相似的表中，以便稍后将所有值重置为原始值（加载时）
具有初始值的表是“ tabla”
然后，我有不同的功能根据范围和按下的按钮为背景着色。
关键是，当按下其中一个按钮时，我需要将值重置为原始值，并且我不想将其作为函数“ blank（）”进行操作，因为这很浪费。
我尝试以循环的方式进行操作，但从未达到原始效果：
var tabla2 = tabla;
for (var i = 0 ; i < 13; i++) {
for (var j = 0; j < 13; j++) {
tabla2.rows[i].cells[j].innerText = tabla.rows[i].cells[j].innerText
}
}<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Table Highlighting</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$('#button2').click(function (){
color='#F0FF00';
});
$('#button3').click(function (){
$('#tabla td').each(function() {
$(this).css('background', 'transparent');
});
});
$('#button4').click(function (){
color='#F0FF00';
});
</script>
<style>
table
{
width: 520px;
height: 520px;
border-collapse: collapse;
}
table_botones
{
width: 520px;
height: 50px;
border-collapse: collapse;
}
td
{
width: 40px;
height: 40px;
padding: 0px;
border: 1px solid #666666;
cursor: pointer;
}
</style>
</head>
<body>
<table id="tabla" width="520" border="0">
<tr>
<td width="40" height="40" align="center" bgcolor="#2692F7">AA</td>
<td width="40" height="40" align="center">AKs</td>
<td width="40" height="40" align="center">AQs</td>
<td width="40" height="40" align="center">AJs</td>
<td width="40" height="40" align="center">TAs</td>
<td width="40" height="40" align="center">A9s</td>
<td width="40" height="40" align="center">A8s</td>
<td width="40" height="40" align="center">A7s</td>
<td width="40" height="40" align="center">A6s</td>
<td width="40" height="40" align="center">A5s</td>
<td width="40" height="40" align="center">A4s</td>
<td width="40" height="40" align="center">A3s</td>
<td width="40" height="40" align="center">A2s</td>
</tr>
<tr>
<td width="40" height="40" align="center">AKo</td>
<td width="40" height="40" align="center" bgcolor="#2692F7">KK</td>
<td width="40" height="40" align="center">
KQs</td>
<td width="40" height="40" align="center">KJs</td>
<td width="40" height="40" align="center">KTs</td>
<td width="40" height="40" align="center">K9s</td>
<td width="40" height="40" align="center">K8s</td>
<td width="40" height="40" align="center">K7s</td>
<td width="40" height="40" align="center">K6s</td>
<td width="40" height="40" align="center">K5s</td>
<td width="40" height="40" align="center">K4s</td>
<td width="40" height="40" align="center">K3s</td>
<td width="40" height="40" align="center">K2s</td>
</tr>
<tr>
<td width="40" height="40" align="center">AQo</td>
<td width="40" height="40" align="center">KQo</td>
<td width="40" height="40" align="center" bgcolor="#2692F7">QQ</td>
<td width="40" height="40" align="center">QJs</td>
<td width="40" height="40" align="center">QTs</td>
<td width="40" height="40" align="center">Q9s</td>
<td width="40" height="40" align="center">Q8s</td>
<td width="40" height="40" align="center">Q7s</td>
<td width="40" height="40" align="center">Q6s</td>
<td width="40" height="40" align="center">Q5s</td>
<td width="40" height="40" align="center">Q4s</td>
<td width="40" height="40" align="center">Q3s</td>
<td width="40" height="40" align="center">Q2s</td>
</tr>
<tr>
<td width="40" height="40" align="center">AJo</td>
<td width="40" height="40" align="center">KJo</td>
<td width="40" height="40" align="center">QJo</td>
<td width="40" height="40" align="center" bgcolor="#2692F7">JJ</td>
<td width="40" height="40" align="center">JTs</td>
<td width="40" height="40" align="center">J9s</td>
<td width="40" height="40" align="center">J8s</td>
<td width="40" height="40" align="center">J7s</td>
<td width="40" height="40" align="center">J6s</td>
<td width="40" height="40" align="center">J5s</td>
<td width="40" height="40" align="center">J4s</td>
<td width="40" height="40" align="center">J3s</td>
<td width="40" height="40" align="center">J2s</td>
</tr>
<tr>
<td width="40" height="40" align="center">ATo</td>
<td width="40" height="40" align="center">KTo</td>
<td width="40" height="40" align="center">QTo</td>
<td width="40" height="40" align="center">JTo</td>
<td width="40" height="40" align="center" bgcolor="#2692F7">TT</td>
<td width="40" height="40" align="center">T9s</td>
<td width="40" height="40" align="center">T8s</td>
<td width="40" height="40" align="center">T7s</td>
<td width="40" height="40" align="center">T6s</td>
<td width="40" height="40" align="center">T5s</td>
<td width="40" height="40" align="center">T4s</td>
<td width="40" height="40" align="center">T3s</td>
<td width="40" height="40" align="center">T2s</td>
</tr>
<tr>
<td width="40" height="40" align="center">A9o</td>
<td width="40" height="40" align="center">K9o</td>
<td width="40" height="40" align="center">Q9o</td>
<td width="40" height="40" align="center">J9o</td>
<td width="40" height="40" align="center">T9o</td>
<td width="40" height="40" align="center" bgcolor="#2692F7">99</td>
<td width="40" height="40" align="center">98s</td>
<td width="40" height="40" align="center">97s</td>
<td width="40" height="40" align="center">96s</td>
<td width="40" height="40" align="center">95s</td>
<td width="40" height="40" align="center">94s</td>
<td width="40" height="40" align="center">93s</td>
<td width="40" height="40" align="center">92s</td>
</tr>
<tr>
<td width="40" height="40" align="center">A8o</td>
<td width="40" height="40" align="center">K8o</td>
<td width="40" height="40" align="center">Q8o</td>
<td width="40" height="40" align="center">J8o</td>
<td width="40" height="40" align="center">T8o</td>
<td width="40" height="40" align="center">98o</td>
<td width="40" height="40" align="center" bgcolor="#2692F7">88</td>
<td width="40" height="40" align="center">87s</td>
<td width="40" height="40" align="center">86s</td>
<td width="40" height="40" align="center">85s</td>
<td width="40" height="40" align="center">84s</td>
<td width="40" height="40" align="center">83s</td>
<td width="40" height="40" align="center">82s</td>
</tr>
<tr>
<td width="40" height="40" align="center">A7o</td>
<td width="40" height="40" align="center">K7o</td>
<td width="40" height="40" align="center">Q7o</td>
<td width="40" height="40" align="center">J7o</td>
<td width="40" height="40" align="center">T7o</td>
<td width="40" height="40" align="center">97o</td>
<td width="40" height="40" align="center">87o</td>
<td width="40" height="40" align="center" bgcolor="#2692F7">77</td>
<td width="40" height="40" align="center">76s</td>
<td width="40" height="40" align="center">75s</td>
<td width="40" height="40" align="center">74s</td>
<td width="40" height="40" align="center">73s</td>
<td width="40" height="40" align="center">72s</td>
</tr>
<tr>
<td width="40" height="40" align="center">A6o</td>
<td width="40" height="40" align="center">K6o</td>
<td width="40" height="40" align="center">Q6o</td>
<td width="40" height="40" align="center">J6o</td>
<td width="40" height="40" align="center">T6o</td>
<td width="40" height="40" align="center">96o</td>
<td width="40" height="40" align="center">86o</td>
<td width="40" height="40" align="center">76o</td>
<td width="40" height="40" align="center" bgcolor="#2692F7">66</td>
<td width="40" height="40" align="center">65s</td>
<td width="40" height="40" align="center">64s</td>
<td width="40" height="40" align="center">63s</td>
<td width="40" height="40" align="center">62s</td>
</tr>
<tr>
<td width="40" height="40" align="center">A5o</td>
<td width="40" height="40" align="center">K5o</td>
<td width="40" height="40" align="center">Q5o</td>
<td width="40" height="40" align="center">J5o</td>
<td width="40" height="40" align="center">T5o</td>
<td width="40" height="40" align="center">95o</td>
<td width="40" height="40" align="center">85o</td>
<td width="40" height="40" align="center">75o</td>
<td width="40" height="40" align="center">65o</td>
<td width="40" height="40" align="center" bgcolor="#2692F7">55</td>
<td width="40" height="40" align="center">54s</td>
<td width="40" height="40" align="center">53s</td>
<td width="40" height="40" align="center">52s</td>
</tr>
<tr>
<td width="40" height="40" align="center">A4o</td>
<td width="40" height="40" align="center">K4o</td>
<td width="40" height="40" align="center">Q4o</td>
<td width="40" height="40" align="center">J4o</td>
<td width="40" height="40" align="center">T4o</td>
<td width="40" height="40" align="center">94o</td>
<td width="40" height="40" align="center">84o</td>
<td width="40" height="40" align="center">74o</td>
<td width="40" height="40" align="center">64o</td>
<td width="40" height="40" align="center">54o</td>
<td width="40" height="40" align="center" bgcolor="#2692F7">44</td>
<td width="40" height="40" align="center">43s</td>
<td width="40" height="40" align="center">42s</td>
</tr>
<tr>
<td width="40" height="40" align="center">A3o</td>
<td width="40" height="40" align="center">K3o</td>
<td width="40" height="40" align="center">Q3o</td>
<td width="40" height="40" align="center">J3o</td>
<td width="40" height="40" align="center">T3o</td>
<td width="40" height="40" align="center">93o</td>
<td width="40" height="40" align="center">83o</td>
<td width="40" height="40" align="center">73o</td>
<td width="40" height="40" align="center">63o</td>
<td width="40" height="40" align="center">53o</td>
<td width="40" height="40" align="center">43o</td>
<td width="40" height="40" align="center" bgcolor="#2692F7">33</td>
<td width="40" height="40" align="center">32s</td>
</tr>
<tr>
<td width="40" height="40" align="center">A2o</td>
<td width="40" height="40" align="center">K2o</td>
<td width="40" height="40" align="center">Q2o</td>
<td width="40" height="40" align="center">J2o</td>
<td width="40" height="40" align="center">T2o</td>
<td width="40" height="40" align="center">92o</td>
<td width="40" height="40" align="center">82o</td>
<td width="40" height="40" align="center">72o</td>
<td width="40" height="40" align="center">62o</td>
<td width="40" height="40" align="center">52o</td>
<td width="40" height="40" align="center">42o</td>
<td width="40" height="40" align="center">32o</td>
<td width="40" height="40" align="center" bgcolor="#2692F7">22</td>
</tr>
</table>
<button id="button" onclick="raise('#33FF36')">Raise</button>
<button id="button2" onclick="raise('#F7F02E')">Call</button>
<button id="ep1" onclick="ep1()">UTG1</button>
<button id="ep2" onclick="ep2()">UTG2</button>
<button id="ep3">UTG3</button>
<button id="ep4">MP</button>
<script type="text/javascript">
function ep1()
{
blank();
$('#tabla td').each(function() {
$(this).css('background', 'rgb(255, 255, 255)');
});
tabla.rows[0].cells[0].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[1].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[2].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[3].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[4].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[5].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[10].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[11].style.backgroundColor = "#33FF36";
tabla.rows[1].cells[0].style.backgroundColor = "#33FF36";
tabla.rows[1].cells[1].style.backgroundColor = "#33FF36";
tabla.rows[1].cells[2].style.backgroundColor = "#33FF36";
tabla.rows[1].cells[3].style.backgroundColor = "#33FF36";
tabla.rows[2].cells[0].style.backgroundColor = "#33FF36";
tabla.rows[2].cells[2].style.backgroundColor = "#33FF36";
tabla.rows[2].cells[3].style.backgroundColor = "#33FF36";
tabla.rows[3].cells[3].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[6].style.backgroundColor = "#AFEFE8";
tabla.rows[0].cells[6].innerText = "A8s: 5";
tabla.rows[0].cells[7].style.backgroundColor = "#AFEFE8";
tabla.rows[0].cells[7].innerText = "A7s: 7";
tabla.rows[0].cells[8].style.backgroundColor = "#AFEFE8";
tabla.rows[0].cells[8].innerText = "A6s: 14";
tabla.rows[0].cells[9].style.backgroundColor = "#33FF36";
//tabla.rows[0].cells[9].innerText = "A5s: 97";
tabla.rows[0].cells[12].style.backgroundColor = "#AFEFE8";
tabla.rows[0].cells[12].innerText = "A2s: 29";
tabla.rows[1].cells[4].style.backgroundColor = "#AFEFE8";
tabla.rows[1].cells[4].innerText = "KTs: 44";
tabla.rows[2].cells[4].style.backgroundColor = "#AFEFE8";
tabla.rows[2].cells[4].innerText = "TQs: 64";
tabla.rows[3].cells[4].style.backgroundColor = "#AFEFE8";
tabla.rows[3].cells[4].innerText = "TJs: 65";
tabla.rows[4].cells[4].style.backgroundColor = "#AFEFE8";
tabla.rows[4].cells[4].innerText = "TT: 64";
colorear_rango();
}
function ep2()
{
blank();
$('#tabla td').each(function() {
$(this).css('background', 'rgb(255, 255, 255)');
});
tabla.rows[0].cells[0].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[1].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[2].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[3].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[4].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[5].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[10].style.backgroundColor = "#AFEFE8";
tabla.rows[0].cells[10].innerText = "A4s: 68";
tabla.rows[0].cells[11].style.backgroundColor = "#AFEFE8";
tabla.rows[0].cells[11].innerText = "A3s: 65";
tabla.rows[1].cells[0].style.backgroundColor = "#33FF36";
tabla.rows[1].cells[1].style.backgroundColor = "#33FF36";
tabla.rows[1].cells[2].style.backgroundColor = "#33FF36";
tabla.rows[1].cells[3].style.backgroundColor = "#33FF36";
tabla.rows[2].cells[0].style.backgroundColor = "#33FF36";
tabla.rows[2].cells[2].style.backgroundColor = "#33FF36";
tabla.rows[2].cells[3].style.backgroundColor = "#33FF36";
tabla.rows[3].cells[3].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[6].style.backgroundColor = "#AFEFE8";
tabla.rows[0].cells[6].innerText = "A8s: 66";
tabla.rows[0].cells[7].style.backgroundColor = "#AFEFE8";
tabla.rows[0].cells[7].innerText = "A7s: 31";
tabla.rows[0].cells[8].style.backgroundColor = "#AFEFE8";
tabla.rows[0].cells[8].innerText = "A6s: 17";
tabla.rows[0].cells[9].style.backgroundColor = "#33FF36";
//tabla.rows[0].cells[9].innerText = "A5s: 97";
tabla.rows[0].cells[12].style.backgroundColor = "#AFEFE8";
tabla.rows[0].cells[12].innerText = "A2s: 46";
tabla.rows[1].cells[4].style.backgroundColor = "#AFEFE8";
tabla.rows[1].cells[4].innerText = "KTs: 65";
tabla.rows[2].cells[4].style.backgroundColor = "#AFEFE8";
tabla.rows[2].cells[4].innerText = "TQs: 47";
tabla.rows[3].cells[4].style.backgroundColor = "#AFEFE8";
tabla.rows[3].cells[4].innerText = "TJs: 64";
tabla.rows[4].cells[4].style.backgroundColor = "#33FF36";
//tabla.rows[4].cells[4].innerText = "TT: 64";
colorear_rango();
}
function ep3()
{
blank();
$('#tabla td').each(function() {
$(this).css('background', 'rgb(255, 255, 255)');
});
tabla.rows[0].cells[0].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[1].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[2].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[3].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[4].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[5].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[10].style.backgroundColor = "#AFEFE8";
tabla.rows[0].cells[10].innerText = "A4s: 68";
tabla.rows[0].cells[11].style.backgroundColor = "#AFEFE8";
tabla.rows[0].cells[11].innerText = "A3s: 65";
tabla.rows[1].cells[0].style.backgroundColor = "#33FF36";
tabla.rows[1].cells[1].style.backgroundColor = "#33FF36";
tabla.rows[1].cells[2].style.backgroundColor = "#33FF36";
tabla.rows[1].cells[3].style.backgroundColor = "#33FF36";
tabla.rows[2].cells[0].style.backgroundColor = "#33FF36";
tabla.rows[2].cells[2].style.backgroundColor = "#33FF36";
tabla.rows[2].cells[3].style.backgroundColor = "#33FF36";
tabla.rows[3].cells[3].style.backgroundColor = "#33FF36";
tabla.rows[0].cells[6].style.backgroundColor = "#AFEFE8";
tabla.rows[0].cells[6].innerText = "A8s: 66";
tabla.rows[0].cells[7].style.backgroundColor = "#AFEFE8";
tabla.rows[0].cells[7].innerText = "A7s: 31";
tabla.rows[0].cells[8].style.backgroundColor = "#AFEFE8";
tabla.rows[0].cells[8].innerText = "A6s: 17";
tabla.rows[0].cells[9].style.backgroundColor = "#33FF36";
//tabla.rows[0].cells[9].innerText = "A5s: 97";
tabla.rows[0].cells[12].style.backgroundColor = "#AFEFE8";
tabla.rows[0].cells[12].innerText = "A2s: 46";
tabla.rows[1].cells[4].style.backgroundColor = "#AFEFE8";
tabla.rows[1].cells[4].innerText = "KTs: 65";
tabla.rows[2].cells[4].style.backgroundColor = "#AFEFE8";
tabla.rows[2].cells[4].innerText = "TQs: 47";
tabla.rows[3].cells[4].style.backgroundColor = "#AFEFE8";
tabla.rows[3].cells[4].innerText = "TJs: 64";
tabla.rows[4].cells[4].style.backgroundColor = "#33FF36";
//tabla.rows[4].cells[4].innerText = "TT: 64";
colorear_rango();
}
function colorear_rango(){
for (var i = 0 ; i < 13; i++) {
for (var j = 0; j < 13; j++) {
if(tabla.rows[i].cells[j].style.backgroundColor==='rgb(255, 255, 255)')
tabla.rows[i].cells[j].style.color='rgb(255, 255, 255)';
}
}
}
function raise(color){
//color='#000';
$('td').toggle( function() {
$(this).css('background', color);
},function(){
$(this).css('background', 'transparent');
});
}
function blank(){
tabla.rows[0].cells[0].innerText = "AA";
tabla.rows[0].cells[1].innerText = "AKs";
tabla.rows[0].cells[2].innerText = "AQs";
tabla.rows[0].cells[3].innerText = "AJs";
tabla.rows[0].cells[4].innerText = "ATs";
tabla.rows[0].cells[5].innerText = "A9s";
tabla.rows[0].cells[6].innerText = "A8s";
tabla.rows[0].cells[7].innerText = "A7s";
tabla.rows[0].cells[8].innerText = "A6s";
tabla.rows[0].cells[9].innerText = "A5s";
tabla.rows[0].cells[10].innerText = "A4s";
tabla.rows[0].cells[11].innerText = "A3s";
tabla.rows[0].cells[12].innerText = "A2s";
tabla.rows[1].cells[1].innerText = "KK";
tabla.rows[1].cells[2].innerText = "KQs";
tabla.rows[1].cells[3].innerText = "KJs";
tabla.rows[1].cells[4].innerText = "KTs";
tabla.rows[1].cells[5].innerText = "K9s";
tabla.rows[1].cells[6].innerText = "K8s";
tabla.rows[1].cells[7].innerText = "K7s";
tabla.rows[1].cells[8].innerText = "K6s";
tabla.rows[1].cells[9].innerText = "K5s";
tabla.rows[1].cells[10].innerText = "K4s";
tabla.rows[1].cells[11].innerText = "K3s";
tabla.rows[1].cells[12].innerText = "K2s";
tabla.rows[2].cells[2].innerText = "QQ";
tabla.rows[3].cells[3].innerText = "JJ";
tabla.rows[4].cells[4].innerText = "TT";
tabla.rows[5].cells[5].innerText = "99";
tabla.rows[6].cells[6].innerText = "88";
tabla.rows[7].cells[7].innerText = "77";
tabla.rows[8].cells[8].innerText = "66";
}
</script>
</body>
</html>最佳答案
使用时
var tabla2 = tabla;
tabla2引用与tabla相同的实体。因此，如果您对tabla进行任何修改，那么您也对tabla2进行修改，反之亦然。要创建一个新实体并将其保存以备将来参考，您可以执行以下任何操作，具体取决于
tabla是什么：使用JSON（适用于对象和数组）。
有点骇人，但可以，除非您尝试克隆包含循环引用的对象，否则将导致错误：
let tabla2 = JSON.parse(JSON.stringify(tabla));
使用特定于对象的方法（仅适用于对象）
let tabla2 = () => tabla;
// or
let tabla2 = Object.assign({}, tabla);
使用特定于阵列的方法（仅适用于阵列）
let tabla2 = tabla.slice(0);
// or
let tabla2 = tabla.concat([])
// or
let tabla2 = Array.from(tabla)
// or
let tabla2 = [...tabla];
注意：各种JavaScript实用程序库和框架以各种名称提供克隆：
lodash和下划线分别为
_.clone()和_.deepClone()AngularJS具有
.copy()jQuery具有
.clone()。...列表更长，包括专门用于浅克隆或深克隆的特定npm软件包。