Есть таблица 6х6, в которую уже занесены данные, и при клике на любую ячейку в таблице к значению должен далее добавиться символ "+". Пытался делать это через replace, через клонирование и appendTo, слияние текста, но после нескольких часов нагугливания решил прийти сюда. Простите, я не очень пока во всем разбираюсь.
setTimeout(function() {
$('#mydiv').css("display", "block");
}, 1000); // <-- time in milliseconds
setTimeout(function() {
$("#getred").css("background", "#f00");
}, 2000);
$(document).ready(function() {
var tbl = $('#q'),
ctrlPanel = '<p class="ctrl"><input type="text" class="edit"><br><button class="save">save</button><button class="clear">clear</button><button class="cancel" >cancel</button></p>';
tbl.on('dblclick', '#1', function() {
$('#1').clone().appendTo('.space');
});
tbl.on('dblclick', '#getred', function() {
$('#getred').clone().appendTo('.space');
});
tbl.on('dblclick', '#3', function() {
$('#3').clone().appendTo('.space');
});
tbl.on('dblclick', '#4', function() {
$('#4').clone().appendTo('.space');
});
tbl.on('dblclick', '#5', function() {
$('#5').clone().appendTo('.space');
});
tbl.on('dblclick', '#6', function() {
$('#6').clone().appendTo('.space');
});
})
setTimeout(function(str) {
$('td').click(function() {
var plus = $(this).find('td' + '+').appendTo('.plus');
})
})
$(document).ready(function() {
$('td').click(function() {
$('td').html().replace('td', 'td' + '+');
})
})
td {
border: 1px solid #ccc;
padding: 1rem 2rem;
cursor: pointer;
}
table {
border-collapse: collapse;
}
#mydiv {
width: 100px;
height: 150px;
text-align: center;
display: none;
background-color: #fff;
}
.space {
max-width: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<div id="mydiv">
<table class="q" id="q">
<div class="space"></div>
<div class="plus"></div>
<tr id="1">
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr id="getred">
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
</tr>
<tr id="3">
<td>4</td>
<td>0</td>
<td>4</td>
<td>0</td>
<td>4</td>
<td>0</td>
</tr>
<tr id="4">
<td>5</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
<td>6</td>
</tr>
<tr id="5">
<td>A</td>
<td>A</td>
<td>A</td>
<td>A</td>
<td>A</td>
<td>A</td>
</tr>
<tr id="6">
<td>Z</td>
<td>Z</td>
<td>Z</td>
<td>Z</td>
<td>Z</td>
<td>Z</td>
</tr>
</table>
</div>
</body>