在没有以前的情况下添加特定的位置

Question

我有一个索引为0的td表

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

现在我想在索引1处添加一个td

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

到目前为止，由于某些功能，我现在想完美工作，我想在第3个索引处添加td，然后再在第2个索引处添加td，但是下面的代码不起作用，因为我在第2个索引处没有td

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

可以吗？

Answer 1

创建一个小小的辅助函数，根据已经存在的函数使用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>

Answer 2

要检查预期结果，请使用以下选项

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使用id，并在使用索引的相应id之后添加元素

示例工作代码

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