Удалить и снова добавить текст в DIV

180

05 декабря 2018, 13:40

как удалить из div ранее добавленный текст, и записать новый если он есть?

<html>
<head>
<title>Календарь</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
 <style>.colored {background-color: green;}</style>
</head>
<body>
<div class="ttt">
    <table width="200" border="0" cellspacing="0" cellpadding="5">
    <tr>
        <td>Пн</td>
        <td>Вт</td>
        <td>Ср</td>
        <td>Чт</td>
        <td>Пт</td>
        <td><font color="#E4723A">Сб</font></td>
        <td><font color="#E4723A">Вс</font></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td align="center">1</td>
        <td align="center">2</td>
        <td align="center" class="sss">3</td>
        <td align="center">4<!----></td>
    </tr>
    <tr>
        <td align="center">5</td>
        <td align="center">6</td>
        <td align="center">7</td>
        <td align="center">8</td>
        <td align="center">9</td>
        <td align="center">10</td>
        <td align="center">11</td>
    </tr>
    <tr>
        <td align="center">12</td>
        <td align="center">13</td>
        <td align="center">14</td>
        <td align="center">15</td>
        <td align="center">16</td>
        <td align="center">17</td>
        <td align="center">18</td>
    </tr>
    <tr>
        <td align="center">19</td>
        <td align="center">20</td>
        <td align="center">21</td>
        <td align="center">22</td>
        <td align="center">23</td>
        <td align="center">24</td>
        <td align="center">25</td>
    </tr>
    <tr>
        <td bgcolor="#FF8040" align="center"><b>26</b></td>
        <td align="center">27</td>
        <td align="center">28</td>
        <td align="center">29</td>
        <td align="center">30</td>
        <td align="center">31</td>
    </tr>
</table>
<button class="polucit">Получить текстовое содержимое</button>
 </div>
<div class="vivod"></div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript">
$("td").click(function() {
  $(this).toggleClass("colored");
});
$( ".polucit" ).on("click", function(){
$.each($('.colored'), function (index, value) {
  $('.vivod').after($(value).html()+',');
});

});
</script>
</html>

Answer 1

Воспользуйся методом который перезапишет все содержимое, а не будет менять существующее, к примеру .text()

$( ".polucit" ).on("click", function() {
  const data = []; // создай массив для значений
  $(".colored").each(function (i, elem) {
    data.push( $(elem).text() ); // собери все значения циклом
  });
  $(".vivod").text(data.join(", ")); // перезапиши вывод
});