0

Как добавить и убрать атрибут disabled кнопке добавления строк если на странице уже 10 строк?и если атрибут добавляется то при переходе на другой check box спадает с кнопки добавления строк и столбцов. Я уже запутался и логика здесь глупая.Как можно обойтись меньшим кодом и с делегированием?

var addplace = function placeHold() {
    $('.matrix_a tr').each(function(i,v){//loop each row
      $(v).find('td').each(function(x,d){//loop each colon in that row
        $(d).find('input').attr('placeholder','a'+(i+1)+','+(x+1));//change the input placeholder
    })
  })
};
var addplaceh = function placeHold() {
    $('.matrix_b tr').each(function(i,v){//loop each row
      $(v).find('td').each(function(x,d){//loop each colon in that row
        $(d).find('input').attr('placeholder','b'+(i+1)+','+(x+1));//change the input placeholder
    })
  })
};
$('.add_str').click(function(){
  if ($("#check_mtrx_a").prop("checked")){
    $('.matrix_a tr:first').clone().appendTo('.matrix_a').add(addplace); 
  }else if($("#check_mtrx_b").prop("checked")) {
    $('.matrix_b tr:first').clone().appendTo('.matrix_b').add(addplaceh); 
  }
});

if ($('.matrix_a tr td').length > 4) {
  $('.del_str').removeAttr("disabled").click(function(){
    if ($("#check_mtrx_a").prop("checked")){
      $('.matrix_a tr:last').remove();  
    }else if($("#check_mtrx_b").prop("checked")) {
      $('.matrix_b tr:last').remove();  
    }
  });
}

$('.add_col').click(function(){
  if ($("#check_mtrx_a").prop("checked")){
    $('.matrix_a tr td:last').clone().appendTo('.matrix_a tr').add(addplace); 
  }else if($("#check_mtrx_b").prop("checked")) {
    $('.matrix_b tr td:last').clone().appendTo('.matrix_b tr').add(addplaceh); 
  }
});

if ($('.matrix_a tr').length > 2) {
  $('.del_col').removeAttr("disabled").click(function(){
    if ($("#check_mtrx_a").prop("checked")){
      $('.matrix_a tr td:last-child').remove();  
    }else if($("#check_mtrx_b").prop("checked")) {
      $('.matrix_b tr td:last-child').remove();  
    }
  });
} 



$(document).on('click' , '.add_str', function() {
  if ($("#check_mtrx_a").prop("checked")){
     if ($('.matrix_a tr').length === 10){
          $('.add_str').attr('disabled', 'disabled');
      } 
    }
  if ($("#check_mtrx_b").prop("checked")){
    if ($('.matrix_b tr').length === 10){
                    $('.add_str').attr('disabled', 'disabled');
            }
  }
});

$(document).on('click' , '.del_str', function() {
if ($("#check_mtrx_a").prop("checked")){
  if ($('.matrix_a tr').length <10){
    $('.add_str').removeAttr('disabled');
  }
}
  if ($("#check_mtrx_b").prop("checked")){
    if ($('.matrix_b tr').length <10){
      $('.add_str').removeAttr('disabled');
    }
  }
});




$(document).on('click' , '.add_col', function() {
  if ($("#check_mtrx_a").prop("checked")){
    if ($('.matrix_a tr:first td').length >= 10){
      $('.add_col').attr('disabled', 'disabled');
      }
  }
  if ($("#check_mtrx_b").prop("checked")){
    $(".add_col").removeAttr('disabled')
    if ($('.matrix_b tr:first td').length === 10){
      $('.add_col').attr('disabled', 'disabled');
      }
  }
});

$(document).on('click' , '.del_col', function() {
  if ($("#check_mtrx_a").prop("checked")){
    if ($('.matrix_a tr td').length <10){
      $('.add_col').removeAttr('disabled');
    }
  }
  if ($("#check_mtrx_b").prop("checked")){
    if ($('.matrix_b tr:first-child td').length <10){
      $('.add_col').removeAttr('disabled');
    }
  }
});
.matrix_a_cover {
  float: left;
}
.matrix_b_cover {
  float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="add_mtrx">
  <span class="rad btn_a">
       <label for="matrix_a">
         <input checked="checked" name="mtrx_sel" type="radio" value="mtrx_a" id="check_mtrx_a">Матрица А  
       </label>
     </span>
  <span class="rad btn_b">
       <label for="matrix_b">
         <input type="radio" name="mtrx_sel" value="mtrx_b" id="check_mtrx_b">Матрица В
       </label>
     </span>
  <br>
  <div class="add_del_btns">
    <button class="add_str btn-style" type="button"><i class="fa fa-plus" aria-hidden="true"></i>Добавить</button>
    <button class="del_str btn-style" type="button" ><i class="fa fa-minus" aria-hidden="true"></i>Удалить</button>строку
    <br>
    <button class="add_col btn-style" type="button"><i class="fa fa-plus" aria-hidden="true"></i>Добавить</button>
    <button class="del_col btn-style" type="button" ><i class="fa fa-minus" aria-hidden="true"></i>Удалить</button>столбец
  </div>
</div>
<div class="matrix_a_cover">
  <table class="matrix_a brackets" id="matrix_a">

    <tr>
      <td class="str_inp">
        <input type="text" placeholder="a1,1">
      </td>
      <td class="str_inp">
        <input type="text" placeholder="a1,2">
      </td>
    </tr>

    <tr>
      <td class="str_inp">
        <input type="text" placeholder="a2,1">
      </td>
      <td class="str_inp">
        <input type="text" placeholder="a2,2">
      </td>
    </tr>

    <tr>
      <td class="str_inp">
        <input type="text" placeholder="a3,1">
      </td>
      <td class="str_inp">
        <input type="text" placeholder="a3,2">
      </td>
    </tr>

    <tr>
      <td class="str_inp">
        <input type="text" placeholder="a4,1">
      </td>
      <td class="str_inp">
        <input type="text" placeholder="a4,2">
      </td>
    </tr>


  </table>
</div>

<div class="matrix_b_cover">
  <table class="matrix_b brackets" id="matrix_b">

    <tr>
      <td class="str_inp">
        <input type="text" placeholder="b1,1">
      </td>
      <td class="str_inp">
        <input type="text" placeholder="b1,2">
      </td>
      <td class="str_inp">
        <input type="text" placeholder="b1,3">
      </td>
    </tr>

2
  • если (длина выборки строк >= 10) { выполнить disabled кнопке } Commented 5 мая 2016 в 17:21
  • сейчас так и стоит,но логика глупая т.к стоит делегирование на клике и не срабатывает при смене чекбокса сброс атрибута
    – Drop
    Commented 5 мая 2016 в 17:32

1 ответ 1

1

Разрулил вам сжатие кода, сделал обработчики кнопок добавить строку/колонку, обработку кнопок удалить строку/колонку доделаете по аналогии первых двух кнопок. input value изменил на классы форм, по которым выбираете матрицы.

У вас незакрытые теги, это неправильно.

$(function() {

  //пользоват.фу-ция
  var addplace = function placeHold() {
    matrix.find('tr').each(function(i, v) { //loop each row
      $(v).find('td').each(function(x, d) { //loop each colon in that row
        $(d).find('input').attr('placeholder', matrixID.split('_')[1] + (i + 1) + ',' + (x + 1));
      })
    })
  };


  // начальные значения
  var matrixID = $('input[name=mtrx_sel]:checked').val();
  var matrix = $('.' + matrixID);

  $('input[name=mtrx_sel]').on('change', function() {
    matrixID = $(this).val();
    matrix = $('.' + matrixID);
    checkAddStr();
    checkAddCol();
  });


  //обработка кнопок добавить
  $('.add_str').click(function() {
    matrix.find('tr:first').clone().appendTo(matrix).add(addplace);
    checkAddStr();
  });

  $('.add_col').click(function() {
    matrix.find('tr td:last').clone().appendTo(matrix.find('tr')).add(addplace);
    checkAddCol();
  });


  //проверка активности кнопки доб.стр.
  function checkAddStr() {
    if ($("input[value=" + matrixID + "]").prop("checked")) {
      if (matrix.find('tr').length >= 10) {
        $('.add_str').prop('disabled', true);
      } else {
        $('.add_str').prop('disabled', false);
      }
    }
  }

  //доб.колон.
  function checkAddCol() {
    if ($("input[value=" + matrixID + "]").prop("checked")) {
      if (matrix.find('tr:first td').length >= 10) {
        $('.add_col').prop('disabled', true);
      } else {
        $('.add_col').prop('disabled', false);
      }
    }
  }


  //по аналогии с проверкой пред. кнопок сделаете дальше
  // $(document).on('click', '.del_str', function() {

  //     if ($("#check_mtrx_a").prop("checked")) {
  //         if ($('.matrix_a tr').length < 10) {
  //             $('.add_str').removeAttr('disabled');
  //         }
  //     }
  //     if ($("#check_mtrx_b").prop("checked")) {
  //         if ($('.matrix_b tr').length < 10) {
  //             $('.add_str').removeAttr('disabled');
  //         }
  //     }
  // });


  // $(document).on('click', '.del_col', function() {
  //     if ($("#check_mtrx_a").prop("checked")) {
  //         if ($('.matrix_a tr td').length < 10) {
  //             $('.add_col').removeAttr('disabled');
  //         }
  //     }
  //     if ($("#check_mtrx_b").prop("checked")) {
  //         if ($('.matrix_b tr:first-child td').length < 10) {
  //             $('.add_col').removeAttr('disabled');
  //         }
  //     }
  // });
});
.matrix_b_cover {
  margin-top: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="add_mtrx">
  <span class="rad btn_a">
       <label for="matrix_a">
         <input checked="checked" name="mtrx_sel" type="radio" value="matrix_a" id="check_mtrx_a">Матрица А  
     </label>
 </span>
  <span class="rad btn_b">
   <label for="matrix_b">
     <input type="radio" name="mtrx_sel" value="matrix_b" id="check_mtrx_b">Матрица В
 </label>
</span>
  <br>
  <div class="add_del_btns">
    <button class="add_str btn-style" type="button"><i class="fa fa-plus" aria-hidden="true"></i>Добавить</button>
    <button class="del_str btn-style" type="button"><i class="fa fa-minus" aria-hidden="true"></i>Удалить</button>строку
    <br>
    <button class="add_col btn-style" type="button"><i class="fa fa-plus" aria-hidden="true"></i>Добавить</button>
    <button class="del_col btn-style" type="button"><i class="fa fa-minus" aria-hidden="true"></i>Удалить</button>столбец
  </div>
</div>



<div class="matrix_a_cover">
  <table class="matrix_a brackets" id="matrix_a">

    <tr>
      <td class="str_inp">
        <input type="text" placeholder="a1,1">
      </td>
      <td class="str_inp">
        <input type="text" placeholder="a1,2">
      </td>
    </tr>

  </table>
</div>

<div class="matrix_b_cover">
  <table class="matrix_b brackets" id="matrix_b">

    <tr>
      <td class="str_inp">
        <input type="text" placeholder="b1,1">
      </td>
      <td class="str_inp">
        <input type="text" placeholder="b1,2">
      </td>
    </tr>
  </table>
</div>

8
  • Видимо при копировании не все закрывающие скопировал.Спасибо огромное,код стал значительно меньше!
    – Drop
    Commented 5 мая 2016 в 20:25
  • По идее он через чекбоксы ищет таблицу?И как я понимаю кнопки добавления строк и столбцов универсальные,под любую выбранную матрицу?Если кнопки ниверсальные то как быть со 2 переменной placeholder для b матрицы?Не могу понять пока почему в моем коде не срабатывает добавление строк и столбцов
    – Drop
    Commented 6 мая 2016 в 8:41
  • Все нашел у меня у радио value значение было другое.
    – Drop
    Commented 6 мая 2016 в 14:32
  • Ну в общем остается только проблема с плейсхолдером для матрицы б
    – Drop
    Commented 6 мая 2016 в 14:55
  • @Drop обновил ответ и функцию addplace() Commented 6 мая 2016 в 16:24

Ваш ответ

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

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