Недосоздаются ячейки в js

279

09 декабря 2017, 07:14

Всем приветы. Есть код Кому лень читать их вот ссылка на кодпен с удобным чтением кода https://codepen.io/otdyhaem/pen/EbMVML

Проблема вот в чем , когда сначала добавляю суммы а потом сроки-тогда все норм, а вот когда добавляю суммы после сроков то со 2-го раза вдруг начинает не хватать ячеек для таблицы. Всё перерыл в коде не нашел ошибку. Может кто-нибудь указать на нее?)))

var i = 1; 
var i2 = 1; 
var srabator = 0; 
var tedeus = 1; 
var cp = tedeus; 
$("#ad").click(function() { 
  var a = prompt("От скольких дней ?", 0); 
  var b = prompt("До скольких дней?", 1); 
 
  var something = parseInt(a) + 1; 
  $('#srok' + i).after("<tr id ='srok" + (++i) + "'> <td id = 'srok" + i + "td" + i2 + "'> Ot " + a + "  do " + b + " dney</td" + "</tr>"); 
  for (i2 = 1; i2 < tedeus + 1; i2++) { 
    $("#srok" + i + "td" + i2).after("<td id = 'srok" + i + "td" + (i2 + 1) + "'><input ></td>"); 
  } 
  i2 = 1; 
 
 
  /* $('#srok'+i).after('<tr id = "srok'+(++i)+'"><td>От 1 до '+a+' дней</td><td id = "td'+(i)+'"><input id = "any'+(i)+'"</td></tr>' 
                     + 
   '<tr id = "srok'+(++i)+'"><td>От '+ (something) +' дней и выше</td><td id = "td'+(i)+'"><input id = any'+i+"</td></tr>"); 
   var elements = document.getElementsByTagName("tr"); 
   elements[1].parentNode.removeChild(elements[1]); 
   for(var t = 0 ; t<$("#neznayu td").length;t++) 
  { 
    if(t>1) $("#neznayu td")[t].remove(); 
  } 
if(tedeus>0)  tedeus--; 
for(var t = 0 ; t<=i;t++) 
  { 
    for(var h = 0;h<$("#srok"+t+" td").length;h++) 
    { 
    if(h>1) $("#srok"+t+" td input")[h].remove(); 
    } 
  }*/ 
}); 
 
$("#adsumm").click(function() { 
  var interv = prompt("Введите интервал сумм", 1); 
 
  if (srabator == 0) { 
    $("#ted" + tedeus).html("От 1 до " + interv); 
    srabator++; 
  } 
  var someth2 = parseInt(interv) + 1; 
  $("#ted" + tedeus).after("<td id ='ted" + (++tedeus) + "'> от " + someth2 + " и больше"); 
  var mmm = tedeus - 1; 
  for (var mm = 1; mm <= i + 1; mm++) { 
    $("#srok" + mm + "td" + mmm).after("<td id = 'srok" + i + "td" + (tedeus) + "' ><input  type ='text'></td"); 
  } 
 
  /*for(var t = 0 ; t<=i;t++) 
    { 
      for(var h = 0;h<$("#srok"+t+" td").length;h++){ 
      if(h>2) $("#srok"+t+" td")[h].remove(); 
      } 
    } 
 
   for(var t = 0 ; t<$("#neznayu td").length;t++) 
    { 
      if(t>2) $("#neznayu td")[t].remove(); 
    }   
     
     
  */ 
});

td { 
  border: 1px solid black; 
} 
 
table { 
  border: 1px solid black; 
} 
 
tr { 
  border: 1px solid black; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
  <tr id="neznayu"> 
    <td> </td> 
 
    <td id="ted1">Для любой суммы</td> 
    <th><a id="adsumm" href="#">Добавить интервал сумм</a></th> 
 
  </tr> 
  <tr id="srok1"> 
    <td>На любой срок </td> 
    <td id="srok1td1"> <input type="text" id="any1" value=0 .4></td> 
  </tr> 
  <tr id="summ"> 
    <td><a id="ad" href="#">добавить интервал сроков</a></td> 
  </tr> 
</table> 
<div id="otvet"> 
</div>

Answer 1

Во-первых, вы сбивали нумерацию строк при добавлении строки в таблицу, из-за чего они просто ехали.

Исправляем так, что бы у нулевого столбца не было id.

$('#srok'+i).after("<tr id ='srok"+(++i)+"'> <td> Ot "+a+"  do "+b+" dney</td><td id = 'srok"+i+"td"+i2+"'><input ></td>"  + "</tr>");
for(i2 = 1 ; i2<tedeus;i2++)
{
  $("#srok"+i+"td"+i2).after("<td id = 'srok"+i+"td"+(i2+1)+"'><input ></td>");
}

И во-вторых, вы не проводили итерацию по строкам, так как подставляли i который не меняется вместо mm.

$("#srok"+mm+"td"+mmm).after("<td id = 'srok"+mm+"td"+(tedeus)+"' ><input  type ='text'></td");}

А еще лучше избавиться от глобальных переменных и обращаться к элементам динамически. Но это уже вы сами, рабочий вариант на данный момент ниже.

var  i =  1;   
var i2 = 1; 
var srabator = 0 ; 
var tedeus = 1; 
var cp = tedeus; 
$("#ad").click(function() 
               { 
  var  a = prompt("От скольких дней ?",0); 
  var b = prompt("До скольких дней?",1); 
   
 var something = parseInt(a)+1; 
 $('#srok'+i).after("<tr id ='srok"+(++i)+"'> <td> Ot "+a+"  do "+b+" dney</td><td id = 'srok"+i+"td"+i2+"'><input ></td>"  + "</tr>"); 
for(i2 = 1 ; i2<tedeus;i2++) 
    { 
      $("#srok"+i+"td"+i2).after("<td id = 'srok"+i+"td"+(i2+1)+"'><input ></td>"); 
    } 
  i2 = 1; 
   
   
 /* $('#srok'+i).after('<tr id = "srok'+(++i)+'"><td>От 1 до '+a+' дней</td><td id = "td'+(i)+'"><input id = "any'+(i)+'"</td></tr>' 
                     + 
   '<tr id = "srok'+(++i)+'"><td>От '+ (something) +' дней и выше</td><td id = "td'+(i)+'"><input id = any'+i+"</td></tr>"); 
   var elements = document.getElementsByTagName("tr"); 
   elements[1].parentNode.removeChild(elements[1]); 
   for(var t = 0 ; t<$("#neznayu td").length;t++) 
  { 
    if(t>1) $("#neznayu td")[t].remove(); 
  } 
if(tedeus>0)  tedeus--; 
for(var t = 0 ; t<=i;t++) 
  { 
    for(var h = 0;h<$("#srok"+t+" td").length;h++) 
    { 
    if(h>1) $("#srok"+t+" td input")[h].remove(); 
    } 
  }*/ 
}); 
 
$("#adsumm").click(function() 
{ var interv = prompt("Введите интервал сумм",1); 
 
 if(srabator==0){ $("#ted"+tedeus).html("От 1 до " + interv); srabator++;} 
 var someth2 = parseInt(interv)+1; 
 $("#ted"+tedeus).after("<td id ='ted"+(++tedeus)+"'> от "+someth2+" и больше"); 
  var mmm = tedeus-1; 
 for(var mm = 1 ; mm<=i+1;mm++){ 
$("#srok"+mm+"td"+mmm).after("<td id = 'srok"+mm+"td"+(tedeus)+"' ><input  type ='text'></td");} 
  
/*for(var t = 0 ; t<=i;t++) 
  { 
    for(var h = 0;h<$("#srok"+t+" td").length;h++){ 
    if(h>2) $("#srok"+t+" td")[h].remove(); 
    } 
  } 
 
 for(var t = 0 ; t<$("#neznayu td").length;t++) 
  { 
    if(t>2) $("#neznayu td")[t].remove(); 
  }   
   
   
  СО ВТОРОГО РАЗА ВЫДАЕТ ПОЛНУЮ ХУЕТУ!!! РАЗОБРАТЬСЯ 
*/  
});

td{border:1px solid black;} 
table{border:1px solid black;} 
tr{border:1px solid black;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<table> 
  <tr id = "neznayu"> 
    <td> </td> 
 
    <td id = "ted1">Для любой суммы</td> 
    <th><a id = "adsumm" href = "#">Добавить интервал сумм</a></th> 
 
  </tr> 
  <tr id = "srok1"> 
    <td>На любой срок </td> 
    <td id = "srok1td1"> <input type = "text" id = "any1" value = 0.4></td> 
  </tr> 
  <tr id = "summ"> 
    <td><a id = "ad" href= "#">добавить интервал сроков</a></td></tr> 
</table> 
<div id = "otvet"> 
</div>