Question

我想在jQuery中使用DOM操作添加一个新元素，但我对eq，nth等所有函数有点困惑。

这是我的基础构造：

<table class="tableInput">
  <tr>
    <td></td>
  </tr>
</table>
<table class="tableInput">
  <tr>
    <td></td>
  </tr>
</table>
<table class="tableInput">
  <tr>
    <td></td>
  </tr>
</table>
<table class="tableInput">
  <tr>
    <td></td>
  </tr>
  Here should be the DOM-Manipulation
</table>
<table class="tableInput">
  <tr>
    <td></td>
  </tr>
</table>

“这里应该是DOM-Manipulation”我想插入一个新的tablerow。

Answer 1

只需将新表格行附加到最后一个<table>元素

＆＃13;

$('table:last').prev().append('<tr><td>Here is your new table row</td></tr>')

＆＃13;

table{
 border:1px solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
  <tr>
    <td>A</td>
  </tr>
</table>
<table class="tableInput">
  <tr>
    <td>B</td>
  </tr>
</table>
<table class="tableInput">
  <tr>
    <td>C</td>
  </tr>
</table>
<table class="tableInput">
  <tr>
    <td>D</td>
  </tr>
  <!--Here should be the DOM-Manipulation !-->
</table>

<table class="tableInput">
  <tr>
    <td>E</td>
  </tr>
</table>

＆＃13;

：eq（）允许您通过索引
访问jQuery对象中的元素

http://api.jquery.com/eq-selector/

：nth-child还允许您通过索引访问元素，但它仅适用于其左侧的术语。

http://api.jquery.com/nth-child-selector/

Answer 2

您需要使用.after

＆＃13;

$(document).ready(function(){
  $tr = '<tr><td>Hello</td></tr>';
  $('#myTable tr:first').after($tr);
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
  <tr>
    <td></td>
  </tr>
</table>
<table class="tableInput">
  <tr>
    <td></td>
  </tr>
</table>
<table class="tableInput">
  <tr>
    <td></td>
  </tr>
</table>
<table class="tableInput" id="myTable">
  <tr>
    <td></td>
  </tr>
</table>

＆＃13;

Answer 3

使用此：

$(".tableInput").eq(3).find('tr').append('<tr><td>Hello World..!</td></tr>');

.tableInput{border:1px solid;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="tableInput">
      <tr>
        <td></td>
      </tr>
    </table>
    <table class="tableInput">
      <tr>
        <td></td>
      </tr>
    </table>
    <table class="tableInput">
      <tr>
        <td></td>
      </tr>
    </table>
    <table class="tableInput">
      <tr>
        <td></td>
      </tr>
    </table>

：eq（）允许您通过索引
访问jQuery对象中的元素

http://api.jquery.com/eq-selector/

：nth-child还允许您通过索引访问元素，但它仅适用于其左侧的术语。

http://api.jquery.com/nth-child-selector/

Answer 4

您可以通过以下方式添加表格行： 1.通过追加：一个。之前没有声明元素：

var tableRow = $('<tr><td></td></tr>');
$("#tableInput").last().append(tableRow);

湾使用声明元素：

var tableRow = $('<tr><td></td></tr>');$("#tableInput").last().children().after(tableRow);

通过以后：

     [Command]
     public void CmdShoot(){
         this.transform.FindChild("gun").SendMessage ("CmdGunshoot");
     }

如何使用jQuery添加新元素

4 个答案: