将行添加到表的开头- JavaScript - jQuery

wydwbb8l  于 2023-11-17  发布在  jQuery
关注(0)|答案(8)|浏览(157)

在jQuery中向表中添加一行作为第一行的最佳方法是什么?
我有一张这样的table

<table id="mytable" cellpadding="0" cellspacing="0">
  <tr>
    <td>col1</td>
    <td>col2</td>
    <td>col3</td>
  </tr>
  <tr>
    <td>col1</td>
    <td>col2</td>
    <td>col3</td>
  </tr>
</table>
<button id="but">mybutton</button>

字符串
我想添加一行作为第一行到给定默认值的表的开头。我如何使用JavaScript和jQuery完成这一点?一个小提琴将是有帮助的。

a2mppw5e

a2mppw5e1#

你可以在jQuery中使用.prepend函数。

$('#mytable').prepend($('<tr>'));

字符串
http://api.jquery.com/prepend/

vecaoik1

vecaoik12#

http://jsfiddle.net/32Ymw/

$("#but").click(function(){
   row = $("<tr></tr>");
   col1 = $("<td>col1</td>");
   col2 = $("<td>col2</td>");
   col3 = $("<td>col3</td>");
   row.append(col1,col2,col3).prependTo("#mytable");   
});​

字符串

yshpjwxd

yshpjwxd3#

使用.on('click',...);prependhttp://jsfiddle.net/k8hCa/
jQuery:

$('#but').on('click', function(e){
    $('#mytable').prepend('<tr><td>newcol1</td><td>newcol2</td><td>newcol3</td></tr>');
});

字符串

lb3vh1jj

lb3vh1jj4#

公认的答案是好的,但绝对值得注意的是,tbody是你应该附加/prepend到的节点,使用appendTo和prependTo方法是最好的解决方案,因为它可以在任何数量的行(包括零行)中工作。
下面是一个很好的例子:https://stackoverflow.com/a/1353736/2812428
还要注意,即使没有行,也可以自己指定tbody,以避免在没有行添加到表的情况下DOM中自动没有tbody的问题。

ljo96ir5

ljo96ir55#

jQuery .prepend()方法应该可以工作

$('#mytable').prepend($('<tr>'));

字符串

2vuwiymt

2vuwiymt6#

我正在做的就是

模板

<script type="text/template" id="cardTemplate">
    <TR class=Normal>
        <TD>
                {0}
        </TD>
        <TD>
                {1}
        </TD>
        <TD>
                {2}
        </TD>

     </TR>
</script>

字符串

jQuery

String.prototype.format = function() {
                                 var args = arguments;
                                 return this.replace(/{(\d+)}/g, function(match, number) { 
                                        return typeof args[number] != 'undefined'
                                               ? args[number]
                                               : match
                                              ;
                                          });
                                  };

                var cardTemplate = $("#cardTemplate").html();
                //Note: format is a custom method added for "String"
                var template = cardTemplate.format("a", "b","c");

                //$('#tblScanResult tbody > tr:first').before(template);
                $('#tblScanResult tbody').prepend(template);

n3schb8v

n3schb8v7#

这个问题很古老,但只是为了完整起见,如果你有标题,你可以很容易地修改亚历克斯的答案,插入在身体行的顶部,但在标题行之后,这样做。

<table id="mytable" cellpadding="0" cellspacing="0">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
    </tr>
    <tr>
      <td>col1</td>
      <td>col2</td>
      <td>col3</td>
    </tr>
  </tbody>
</table>

<button id="but">mybutton</button>

$('#but').on('click', function(e){
    $('#mytable > tbody').prepend('<tr><td>newcol1</td><td>newcol2</td><td>newcol3</td></tr>');
});

字符串

7gs2gvoe

7gs2gvoe8#

JavaScript在表的顶部添加新行的方法非常简单:

const table = document.getElementById("myTable");

var row = myTable.insertRow(1);  // Give index as 1

var cell1= row.insertCell(0);
var cell2= row.insertCell(1);

cell1.innerHTML = "Contents in cell1";
cell2.innerHTML = "Contents in cell2";

字符串
给予insertRow()方法的索引为1

相关问题