/ 设置 10 秒超时 // 每日统计清 0 runtime_set('todaycomments', 0); runtime_set('todayarticles', 0); runtime_set('todayusers', 0); if ($forumlist) { $fidarr = array(); foreach ($forumlist as $fid => $forum) { $fidarr[] = $forum['fid']; } forum_update($fidarr, array('todayposts' => 0, 'todaythreads' => 0)); } // 清理临时附件 attach_gc(); // 当天24点 $today = strtotime(date('Ymd')) + 86400; runtime_set('cron_2_last_date', $today, TRUE); // 往前推8个小时，尽量保证在前一天 升级过来和采集的数据会很卡 // table_day_cron($time - 8 * 3600); cache_delete('cron_lock_2'); } } } ?>javascript - Adding a new row above the first row of a table - Stack Overflow|Concepts Of Algorithm
  2. Algorithm
  3. javascript - Adding a new row above the first row of a table - Stack Overflow

javascript - Adding a new row above the first row of a table - Stack Overflow

admin2025-04-03  1

I have a table with 12 columns. Each column would have a text box. When I click on an 'Add' button, a new row should be inserted above the first row of the table. How would I do it? Say, if I use jquery append(), it would only add the row at the end but I want to add at the top of the first row.

I have a table with 12 columns. Each column would have a text box. When I click on an 'Add' button, a new row should be inserted above the first row of the table. How would I do it? Say, if I use jquery append(), it would only add the row at the end but I want to add at the top of the first row.

  • javascript
  • jquery
  • dom
Share Improve this question edited Aug 16, 2013 at 9:34 Felix Kling 818k181 gold badges1.1k silver badges1.2k bronze badges asked Aug 16, 2013 at 9:29 PrasannaPrasanna 2,6619 gold badges42 silver badges54 bronze badges 1
  • possible duplicate of javascript: how to append div in "begining" of another div – Felix Kling Commented Aug 16, 2013 at 9:33
Add a ment  | 

8 Answers 8

Reset to default 6

Try 

$("#tableId tbody").prepend("<tr>..</tr>");

In Vanilla JavaScript, it really is as simple as:

var firstRow = yourTable.rows[0];
firstRow.parentNode.insertBefore(newRow,firstRow);

You can use following alternatives for that

1) .before() for documentations click here
2) .insertBefore() for documentations click here
3) .prepend() for documentations click here

Use .prepend

$("#tableId tbody").prepend("tr code here");

You could use something like this:

$('table > tbody > tr:first').before('<tr>...</tr>');

Try this:

<table id="tblTest">
    <tr>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
        <td><input type="text"/></td>
    </tr>
</table>
<table>
    <tr>
        <td><input type="button" value="Add" id="btnAdd"></input></td>
    </tr>
</table>


var row = $("#tblTest tbody").html();
$("#btnAdd").click(function(){
    $("#tblTest tbody").prepend(row);
});

Fiddle

Use the .prepend() method. This function do exactly what you need.

In Vanilla JavaScript, to add a new row at the top of a table is as simple as:

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";

Give the index for the insertRow() method as 1.

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1743627746a213824.html

javascriptAdding a new row above the first row of a tableStack Overflow

最新回复(0)