0

Есть таблица 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>

2
  • 1
    где собственно код? Commented 23 сент. 2021 в 16:18
  • Кажется, я разобрался как его добавить Commented 23 сент. 2021 в 16:33

1 ответ 1

0

А можно сделать, например, через css с помощью ::after и добавлением класса по клику.

$("td").click(function(){
  $(this).addClass('selected');
});
td { 
   border: 1px solid red; 
   min-width: 20px;
   cursor: pointer;
 }
 
 td.selected::after {
   content: '+';
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>   
  <tr>
    <td>4</td><td>5</td><td>6</td>
  </tr>
  <tr>
    <td>7</td><td>8</td><td>9</td>
  </tr>
</table>

правда в таком случае плюсик не выделяется мышью

Если вам требуется "решение в стиле jquery", то по клику добавляйте в ячейку span со своим плюсом. Но проверяйте, добавлен он уже или нет.

$("td").click(function(){
  if( $(this).find(".plus").length) return;
  
  $("<span>").addClass("plus")
             .text("+")
             .appendTo($(this));
  
});
td { 
   border: 1px solid red; 
   min-width: 20px;
   cursor: pointer;
 }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>1</td><td>2</td><td>3</td>
  </tr>   
  <tr>
    <td>4</td><td>5</td><td>6</td>
  </tr>
  <tr>
    <td>7</td><td>8</td><td>9</td>
  </tr>
</table>

4
  • Как решение проблемы - выглядит здорово, но от меня требуется решение в духе jquery. Хотя если других вариантов не появится, то Ваш метод очень даже мне поможет. Спасибо! Commented 23 сент. 2021 в 16:39
  • @IgorKorotkov добавил вам в духе jquery.
    – teran
    Commented 24 сент. 2021 в 8:53
  • Здорово. То, что нужно. Благодарю Вас ;) Commented 24 сент. 2021 в 16:44
  • @IgorKorotkov галку к ответу ткните тогда
    – teran
    Commented 24 сент. 2021 в 16:48

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.