добавив <td>конкретное место без предыдущего <td> - PullRequest
Новая
       8

добавив <td>конкретное место без предыдущего <td>

0 голосов
/ 13 ноября 2018

У меня есть таблица с одним тд с индексом 0 

<table>
<tr class='xyz'>
<td> val1 </td>
</tr>
</table>

. Теперь я хочу добавить тд с индексом 1 

$(".xyz").find("td").eq(0).after("<td>" +
"val2" +
"</td>");

, так что теперь она работает идеально из-за некоторой функциональности.Я хочу добавить td в 3-й индекс, прежде чем добавить один в 2-й индекс, но приведенный ниже код не работает, так как у меня нет td для 2-го индекса 

$(".xyz").find("td").eq(2).after("<td>" +
"val4" +
"</td>");

в любом случае?

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

Чтобы проверить ожидаемый результат, используйте указанную ниже опцию

  1. Проверьте, доступен ли предыдущий индекс td или не используется длина
  2. Проходите по индексу, если он недоступен, и добавьте пустой индекс td, чтобы сделатьэто доступно
  3. Добавить необходимый val2 td 

function add(index){
  if($(".xyz").find("td").eq(index).length > 0){
     $(".xyz").find("td").eq(index).after("<td>" +
    "val2" +
    "</td>");    
  }else{
     for (i=0; i < index; ++i) {
      $(".xyz").find("td").eq(i).after("<td>" +
    "</td>"); 
   }
    $(".xyz").find("td").eq(index).after("<td>" +
    "val2" +
    "</td>");
  }
}


add(2);
tr td{
  border: 1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class='xyz'>
<td> val1 </td>
</tr>
</table>

codepen - https://codepen.io/nagasai/pen/vQgpYX

Опция 2:

Использовать идентификатор дляtds со значением индекса и добавление элементов после соответствующего идентификатора с использованием индекса

пример рабочего кода 

function add(i){
  $(".xyz td").each(function (index, value) {
  if(i > parseInt(value.id.split('td')[1])){
    if(i > parseInt($(".xyz td").last().attr('id').split('td')[1])){
      $(".xyz td").last().after("<td id=" +'td'+i+ ">" +
    "val" +i+
    "</td>");
      return false
    }else{
          $(this).after("<td id=" +'td'+i+ ">" +
    "val" +i+
    "</td>");
      return false
    }
  }else{
    if(i == parseInt(value.id.split('td')[1])){
       $(this).after("<td id=" +'td'+i+ ">"+
    "val" +i+
    "</td>");
        return false
    }
  }
  })  
  }


add(5);
//add(3);
//add(1);
//add(6)
tr td{
  border: 1px solid black
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class='xyz'>
<td id="td0"> val0 </td>
</tr>
</table>

codepen - https://codepen.io/nagasai/pen/QJdaoP

0 голосов
/ 13 ноября 2018

Создайте небольшую вспомогательную функцию, которая будет использовать after() или append() в зависимости от того, что уже существует

Что-то вроде: 

function addCell($row, index, val){
    var $newCell = $('<td>').html(val),
        $cells=$row.children();
        
    // if cell at index exists inster after the existing cell     
    if($cells.eq(index).length){
        $cells.eq(index).after($newCell)        
    }else{
     // otherwise just append to the row   
        $row.append($newCell)
    }
}

var $row = $('.xyz')
addCell($row, 1, "first")
addCell($row, 1, "second")
addCell($row, 1, "third")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr class='xyz'>
<td> val1 </td>
</tr>
</table>
...