Question

有没有办法在表格中的特定位置插入行。用户将输入他/她想要插入行的数字。

假设用户希望将行插入表格的第二行。

<tr>
    <td>00001</td>
    <td>John</td>
</tr>

我有桌子

<tr>
    <td>00002</td>
    <td>David</td>
</tr>
        <!-- Here is where I want it to be insterted -->
<tr>
    <td>00004</td>
    <td>Frank</td>
</tr>
<tr>
    <td>00005</td>
    <td>Jane</td>
</tr>

Answer 1

您可以使用ChromeDriver help center方法插入html，并插入到正确的位置，您可以使用CSS伪类after

$("table > tbody > tr:nth-child(2)").after('<tr><td>Example</td></tr>');

在我的例子中，你插入第二个tr标签后。

Answer 2

您可以选择tr:first元素而不是.after()来添加新元素：

＆＃13;

$('table tr:first').after('<tr><td>00001</td><td>John</td></tr>');

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <td>00002</td>
    <td>David</td>
  </tr>
  <!-- Here is where I want it to be insterted -->
  <tr>
    <td>00004</td>
    <td>Frank</td>
  </tr>
  <tr>
    <td>00005</td>
    <td>Jane</td>
  </tr>
</table>

＆＃13;

Answer 3

一种方法可以是在jquery原型对象中添加一个方法，例如：

// a method to add row after specific row
$.prototype.addTableRowAfter = function(row, element) {
  // here you can modify it to a more general approach
  this.find('tr:eq(' + row + ')').after(element);
  return this;
};

// call it
$('table').addTableRowAfter(0, '<tr><td> 00001</td><td>John</td ></tr>');
$('table').addTableRowAfter(2, '<tr><td> 00003</td><td>Jim</td ></tr>');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>00002</td>
      <td>David</td>
    </tr>
    <!-- Here is where I want it to be insterted -->
    <tr>
      <td>00004</td>
      <td>Frank</td>
    </tr>
    <tr>
      <td>00005</td>
      <td>Jane</td>
    </tr>
  </tbody>
</table>

在表JQuery中插入一行

3 个答案: