blocks|key|39027|text|您可以使用jQuery尝试以下代码片段|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|39028|$(table).find('tbody').append("<tr><td>aaaa</td></tr>");|code-block|syntax|javascript|39029|entityMap|0|LINK|mutability|MUTABLE|url|https://en.wikipedia.org/wiki/JQuery^0|5|6|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@]|9|@$A|R|B|S|1|T]]|C|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|C|$G|H]]|$1|I|3|-4|5|6|7|V|8|@]|9|@]|C|$]]]|J|$K|$5|L|M|N|C|$O|P]]]]

<p>You can try the following snippet using <a href="https://en.wikipedia.org/wiki/JQuery" rel="nofollow noreferrer">jQuery</a>:</p>
<pre class="lang-js prettyprint-override"><code>$(table).find('tbody').append(&quot;&lt;tr&gt;&lt;td&gt;aaaa&lt;/td&gt;&lt;/tr&gt;&quot;);
</code></pre>


blocks|key|39076|text|我认为这个脚本正是您所需要的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|39077|var+t+=+document.getElementById('myTable');
var+r+=document.createElement('TR');
t.tBodies[0].appendChild(r)|code-block|syntax|javascript|39078|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I think this script is what exactly you need     </p>

<pre><code>var t = document.getElementById('myTable');
var r =document.createElement('TR');
t.tBodies[0].appendChild(r)
</code></pre>


blocks|key|39098|text|如果要向tbody中添加一行，请获取对该行的引用并调用其insertRow方法。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|39099|​|39100|var+tbodyRef+=+document.getElementById('myTable').getElementsByTagName('tbody')[0];

//+Insert+a+row+at+the+end+of+table
var+newRow+=+tbodyRef.insertRow();

//+Insert+a+cell+at+the+end+of+the+row
var+newCell+=+newRow.insertCell();

//+Append+a+text+node+to+the+cell
var+newText+=+document.createTextNode('new+row');
newCell.appendChild(newText);|code-block|syntax|javascript|39101|<table+id="myTable">
++<thead>
++++<tr>
++++++<th>My+Header</th>
++++</tr>
++</thead>
++<tbody>
++++<tr>
++++++<td>initial+row</td>
++++</tr>
++</tbody>
++<tfoot>
++++<tr>
++++++<td>My+Footer</td>
++++</tr>
++</tfoot>
</table>|39102|39103|(JSFiddle上的旧demo+)|39104|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement.insertRow|1|http://jsfiddle.net/4sR2G/^0|4|5|S|9|S|9|0|0|0|0|0|0|C|4|1|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]|$9|14|A|15|B|C]]|D|@$9|16|A|17|1|18]]|E|$]]|$1|F|3|G|5|6|7|19|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|1A|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|J|7|1B|8|@]|D|@]|E|$K|L]]|$1|O|3|G|5|6|7|1C|8|@]|D|@]|E|$]]|$1|P|3|Q|5|6|7|1D|8|@]|D|@$9|1E|A|1F|1|1G]]|E|$]]|$1|R|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]|Z|$5|U|V|W|E|$X|10]]]]

<p>If you want to add a row into the <code>tbody</code>, get a reference to it and call its <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement.insertRow" rel="noreferrer"><code>insertRow</code></a> method.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var tbodyRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

// Insert a row at the end of table
var newRow = tbodyRef.insertRow();

// Insert a cell at the end of the row
var newCell = newRow.insertCell();

// Append a text node to the cell
var newText = document.createTextNode('new row');
newCell.appendChild(newText);</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="myTable"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;My Header&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;initial row&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;tfoot&gt;
    &lt;tr&gt;
      &lt;td&gt;My Footer&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tfoot&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>
<p>(old <a href="http://jsfiddle.net/4sR2G/" rel="noreferrer">demo</a> on JSFiddle)</p>


blocks|key|255922|text|我已经尝试过了，这对我很有效：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|255923|var+table+=+document.getElementById("myTable");
var+row+=+table.insertRow(myTable.rows.length-2);
var+cell1+=+row.insertCell(0);|code-block|syntax|javascript|255924|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>I have tried this, and this is working for me:</p>

<pre><code>var table = document.getElementById("myTable");
var row = table.insertRow(myTable.rows.length-2);
var cell1 = row.insertCell(0);
</code></pre>


blocks|key|255954|text|你已经很接近了。只需将行添加到tbody，而不是table|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|255955|myTbody.insertRow();|code-block|syntax|javascript|255956|在使用之前，只需获取对tBody+(myTbody)的引用。请注意，您不需要传递表中的最后一个位置；当省略参数时，它会自动定位在末尾。|255957|A+live+demo+is+at+jsFiddle。|255958|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/GdAbJ/^0|F|5|O|5|0|0|B|5|I|7|0|0|Q|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|11|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|12|8|@$9|13|A|14|B|C]|$9|15|A|16|B|C]]|D|@]|E|$]]|$1|M|3|N|5|6|7|17|8|@]|D|@$9|18|A|19|1|1A]]|E|$]]|$1|O|3|-4|5|6|7|1B|8|@]|D|@]|E|$]]]|P|$Q|$5|R|S|T|E|$U|V]]]]

<p>You're close. Just add the row to the <code>tbody</code> instead of <code>table</code>:</p>

<pre><code>myTbody.insertRow();
</code></pre>

<p>Just get a reference to <code>tBody</code> (<code>myTbody</code>) before use. Notice that you don't need to pass the last position in a table; it's automatically positioned at the end when omitting argument.</p>

<p><a href="http://jsfiddle.net/GdAbJ/" rel="nofollow noreferrer">A live demo is at jsFiddle</a>.</p>


blocks|key|39226|text|添加行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|39227|​|39228|<html>
++++<script>
++++++++function+addRow()+{
++++++++++++var+table+=+document.getElementById('myTable');
++++++++++++//var+row+=+document.getElementById("myTable");
++++++++++++var+x+=+table.insertRow(0);
++++++++++++var+e+=+table.rows.length-1;
++++++++++++var+l+=+table.rows[e].cells.length;
++++++++++++//x.innerHTML+=+"&nbsp;";

++++++++++++for+(var+c=0,+m=l;+c+<+m;+c%2B%2B)+{
++++++++++++++++table.rows[0].insertCell(c);
++++++++++++++++table.rows[0].cells[c].innerHTML+=+"&nbsp;&nbsp;";
++++++++++++}
++++++++}

++++++++function+addColumn()+{
++++++++++++var+table+=+document.getElementById('myTable');
++++++++++++for+(var+r+=+0,+n+=+table.rows.length;+r+<+n;+r%2B%2B)+{
++++++++++++++++table.rows[r].insertCell(0);
++++++++++++++++table.rows[r].cells[0].innerHTML+=+"&nbsp;&nbsp;";
++++++++++++}
++++++++}

++++++++function+deleteRow()+{
++++++++++++document.getElementById("myTable").deleteRow(0);
++++++++}

++++++++function+deleteColumn()+{
++++++++++++//+var+row+=+document.getElementById("myRow");
++++++++++++var+table+=+document.getElementById('myTable');
++++++++++++for+(var+r+=+0,+n+=+table.rows.length;+r+<+n;+r%2B%2B)+{
++++++++++++++++table.rows[r].deleteCell(0);+//+var+table+handle
++++++++++++}
++++++++}
++++</script>

++++<body>
++++++++<input+type="button"+value="row+%2B"+onClick="addRow()"+border=0+style='cursor:hand'>
++++++++<input+type="button"+value="row+-"+onClick='deleteRow()'+border=0+style='cursor:hand'>
++++++++<input+type="button"+value="column+%2B"+onClick="addColumn()"+border=0+style='cursor:hand'>
++++++++<input+type="button"+value="column+-"+onClick='deleteColumn()'+border=0+style='cursor:hand'>

++++++++<table++id='myTable'+border=1+cellpadding=0+cellspacing=0>
++++++++++++<tr+id='myRow'>
++++++++++++++++<td>&nbsp;</td>
++++++++++++++++<td>&nbsp;</td>
++++++++++++++++<td>&nbsp;</td>
++++++++++++</tr>
++++++++++++<tr>
++++++++++++++++<td>&nbsp;</td>
++++++++++++++++<td>&nbsp;</td>
++++++++++++++++<td>&nbsp;</td>
++++++++++++</tr>
++++++++</table>
++++</body>
</html>|code-block|syntax|javascript|39229|39230|还有细胞。|39231|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|P|8|@]|9|@]|A|$G|H]]|$1|I|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|J|3|K|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p>Add rows:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;html&gt;
    &lt;script&gt;
        function addRow() {
            var table = document.getElementById('myTable');
            //var row = document.getElementById("myTable");
            var x = table.insertRow(0);
            var e = table.rows.length-1;
            var l = table.rows[e].cells.length;
            //x.innerHTML = "&amp;nbsp;";

            for (var c=0, m=l; c &lt; m; c++) {
                table.rows[0].insertCell(c);
                table.rows[0].cells[c].innerHTML = "&amp;nbsp;&amp;nbsp;";
            }
        }

        function addColumn() {
            var table = document.getElementById('myTable');
            for (var r = 0, n = table.rows.length; r &lt; n; r++) {
                table.rows[r].insertCell(0);
                table.rows[r].cells[0].innerHTML = "&amp;nbsp;&amp;nbsp;";
            }
        }

        function deleteRow() {
            document.getElementById("myTable").deleteRow(0);
        }

        function deleteColumn() {
            // var row = document.getElementById("myRow");
            var table = document.getElementById('myTable');
            for (var r = 0, n = table.rows.length; r &lt; n; r++) {
                table.rows[r].deleteCell(0); // var table handle
            }
        }
    &lt;/script&gt;

    &lt;body&gt;
        &lt;input type="button" value="row +" onClick="addRow()" border=0 style='cursor:hand'&gt;
        &lt;input type="button" value="row -" onClick='deleteRow()' border=0 style='cursor:hand'&gt;
        &lt;input type="button" value="column +" onClick="addColumn()" border=0 style='cursor:hand'&gt;
        &lt;input type="button" value="column -" onClick='deleteColumn()' border=0 style='cursor:hand'&gt;

        &lt;table  id='myTable' border=1 cellpadding=0 cellspacing=0&gt;
            &lt;tr id='myRow'&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
            &lt;/tr&gt;
            &lt;tr&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
                &lt;td&gt;&amp;nbsp;&lt;/td&gt;
            &lt;/tr&gt;
        &lt;/table&gt;
    &lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
</div>
</p>

<p>And cells.</p>


blocks|key|39250|text|基本方法：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|39251|这将添加HTML格式的内容并显示新添加的行。|39252|var+myHtmlContent+=+"<h3>hello</h3>"
var+tableRef+=+document.getElementById('myTable').getElementsByTagName('tbody')[0];

var+newRow+=+tableRef.insertRow(tableRef.rows.length);
newRow.innerHTML+=+myHtmlContent;|code-block|syntax|javascript|39253|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|L|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|M|8|@]|9|@]|A|$G|H]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>Basic approach:</p>

<p>This should add HTML-formatted content and show the newly added row.</p>

<pre><code>var myHtmlContent = "&lt;h3&gt;hello&lt;/h3&gt;"
var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

var newRow = tableRef.insertRow(tableRef.rows.length);
newRow.innerHTML = myHtmlContent;
</code></pre>


blocks|key|39272|text|您可以使用以下示例：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|39273|<table+id="purches">
++++<thead>
++++++++<tr>
++++++++++++<th>ID</th>
++++++++++++<th>Transaction+Date</th>
++++++++++++<th>Category</th>
++++++++++++<th>Transaction+Amount</th>
++++++++++++<th>Offer</th>
++++++++</tr>
++++</thead>

++++

++++<tbody+id="feedback">
++++</tbody>
</table>|code-block|syntax|javascript|39274|JavaScript文件：|39275|$.ajax({
++++type:+"POST",
++++contentType:+"application/json",
++++url:+"/search",
++++data:+JSON.stringify(search),
++++dataType:+'json',
++++cache:+false,
++++timeout:+600000,
++++success:+function+(data)+{
++++++++//++var+json+=+"<h4>Ajax+Response</h4><pre>"++%2B+JSON.stringify(data,+null,+4)+%2B+"</pre>";
++++++++//+$('#feedback').html(json);
++++++++//
++++++++console.log("SUCCESS:+",+data);
++++++++//$("#btn-search").prop("disabled",+false);

++++++++for+(var+i+=+0;+i+<+data.length;+i%2B%2B)+{
++++++++++++//$("#feedback").append('<tr><td>'+%2B+data[i].accountNumber+%2B+'</td><td>'+%2B+data[i].category+%2B+'</td><td>'+%2B+data[i].ssn+%2B+'</td></tr>');
++++++++++++$('#feedback').append('<tr><td>'+%2B+data[i].accountNumber+%2B+'</td><td>'+%2B+data[i].category+%2B+'</td><td>'+%2B+data[i].ssn+%2B+'</td><td>'+%2B+data[i].ssn+%2B+'</td><td>'+%2B+data[i].ssn+%2B+'</td></tr>');

++++++++++++alert(data[i].accountNumber)
++++++++}
++++},
++++error:+function+(e)+{
++++++++var+json+=+"<h4>Ajax+Response</h4><pre>"+%2B+e.responseText+%2B+"</pre>";
++++++++$('#feedback').html(json);

++++++++console.log("ERROR:+",+e);
++++++++$("#btn-search").prop("disabled",+false);
++++}
});|39276|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>You can use the following example:</p>

<pre><code>&lt;table id="purches"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;ID&lt;/th&gt;
            &lt;th&gt;Transaction Date&lt;/th&gt;
            &lt;th&gt;Category&lt;/th&gt;
            &lt;th&gt;Transaction Amount&lt;/th&gt;
            &lt;th&gt;Offer&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;

    &lt;!--  &lt;tr th:each="person: ${list}"    &gt;
            &lt;td&gt;&lt;li th:each="person: ${list}" th:text="|${person.description}|"&gt;&lt;/li&gt;&lt;/td&gt;
            &lt;td&gt;&lt;li th:each="person: ${list}" th:text="|${person.price}|"&gt;&lt;/li&gt;&lt;/td&gt;
            &lt;td&gt;&lt;li th:each="person: ${list}" th:text="|${person.available}|"&gt;&lt;/li&gt;&lt;/td&gt;
            &lt;td&gt;&lt;li th:each="person: ${list}" th:text="|${person.from}|"&gt;&lt;/li&gt;&lt;/td&gt;
            &lt;/tr&gt;
    --&gt;

    &lt;tbody id="feedback"&gt;
    &lt;/tbody&gt;
&lt;/table&gt;
</code></pre>

<p>JavaScript file:</p>

<pre><code>$.ajax({
    type: "POST",
    contentType: "application/json",
    url: "/search",
    data: JSON.stringify(search),
    dataType: 'json',
    cache: false,
    timeout: 600000,
    success: function (data) {
        //  var json = "&lt;h4&gt;Ajax Response&lt;/h4&gt;&lt;pre&gt;"  + JSON.stringify(data, null, 4) + "&lt;/pre&gt;";
        // $('#feedback').html(json);
        //
        console.log("SUCCESS: ", data);
        //$("#btn-search").prop("disabled", false);

        for (var i = 0; i &lt; data.length; i++) {
            //$("#feedback").append('&lt;tr&gt;&lt;td&gt;' + data[i].accountNumber + '&lt;/td&gt;&lt;td&gt;' + data[i].category + '&lt;/td&gt;&lt;td&gt;' + data[i].ssn + '&lt;/td&gt;&lt;/tr&gt;');
            $('#feedback').append('&lt;tr&gt;&lt;td&gt;' + data[i].accountNumber + '&lt;/td&gt;&lt;td&gt;' + data[i].category + '&lt;/td&gt;&lt;td&gt;' + data[i].ssn + '&lt;/td&gt;&lt;td&gt;' + data[i].ssn + '&lt;/td&gt;&lt;td&gt;' + data[i].ssn + '&lt;/td&gt;&lt;/tr&gt;');

            alert(data[i].accountNumber)
        }
    },
    error: function (e) {
        var json = "&lt;h4&gt;Ajax Response&lt;/h4&gt;&lt;pre&gt;" + e.responseText + "&lt;/pre&gt;";
        $('#feedback').html(json);

        console.log("ERROR: ", e);
        $("#btn-search").prop("disabled", false);
    }
});
</code></pre>


blocks|key|256025|text|<!DOCTYPE+html>
<html+lang="en">
++<head>
++++<meta+charset="utf-8"+/>
++++<link+rel="stylesheet"+type="text/css"+href="css/style.css"+/>
++++<title>Expense+Tracker</title>
++</head>
++<body>
++++<h1>Expense+Tracker</h1>

++++<div+id="myDiv">
++++++<label+for="name">Name:</label>
++++++<input
++++++++type="text"
++++++++name="myInput"
++++++++id="myInput"
++++++++placeholder="Name+of+expense"
++++++++size="50"
++++++/><br+/><br+/>
++++++<label+for="date">Date:</label>
++++++<input+type="date"+id="myDate"+name="myDate"+/>
++++++<label+for="amount">Amount:</label>
++++++<input
++++++++type="text"
++++++++name="myAmount"
++++++++id="myAmount"
++++++++placeholder="Dollar+amount+($)"
++++++/><br+/><br+/>
++++++<span+onclick="addRow()"+class="addBtn">Add+Expense</span>
++++</div>
++++<br+/>
++++<input+type="button"+value="Add+Rows"+onclick="addRows()"+/>
++++
++++<table+id="myTable">
++++++<tr>
++++++++<th>Name</th>
++++++++<th>Date</th>
++++++++<th>Amount</th>
++++++++<th>Delete</th>
++++++</tr>
++++++<tr>
++++++++<td>McDonald's</td>
++++++++<td>6/22/2017</td>
++++++++<td>$12.00</td>
++++++++<td>
++++++++++<input+type="button"+value="Delete"+onclick="deleteRow(this)"+/>
++++++++</td>
++++++</tr>
++++</table>

++++<script>
++++++function+deleteRow(r)+{
++++++++var+i+=+r.parentNode.parentNode.rowIndex;
++++++++document.getElementById("myTable").deleteRow(i);
++++++}
++++++function+addRows()+{
++++++++console.log("add+rows");
++++++++document.getElementById("myTable").innerHTML+%2B=+`<tr>
++++++++<td>McDonald's</td>
++++++++<td>6/22/2017</td>
++++++++<td>$12.00</td>
++++++++<td>
++++++++++<input+type="button"+value="Delete"+onclick="deleteRow(this)"+/>
++++++++</td>
++++++</tr>`;
++++++}
++++</script>
++</body>
</html>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|256026|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;utf-8&quot; /&gt;
    &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;css/style.css&quot; /&gt;
    &lt;title&gt;Expense Tracker&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Expense Tracker&lt;/h1&gt;

    &lt;div id=&quot;myDiv&quot;&gt;
      &lt;label for=&quot;name&quot;&gt;Name:&lt;/label&gt;
      &lt;input
        type=&quot;text&quot;
        name=&quot;myInput&quot;
        id=&quot;myInput&quot;
        placeholder=&quot;Name of expense&quot;
        size=&quot;50&quot;
      /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;label for=&quot;date&quot;&gt;Date:&lt;/label&gt;
      &lt;input type=&quot;date&quot; id=&quot;myDate&quot; name=&quot;myDate&quot; /&gt;
      &lt;label for=&quot;amount&quot;&gt;Amount:&lt;/label&gt;
      &lt;input
        type=&quot;text&quot;
        name=&quot;myAmount&quot;
        id=&quot;myAmount&quot;
        placeholder=&quot;Dollar amount ($)&quot;
      /&gt;&lt;br /&gt;&lt;br /&gt;
      &lt;span onclick=&quot;addRow()&quot; class=&quot;addBtn&quot;&gt;Add Expense&lt;/span&gt;
    &lt;/div&gt;
    &lt;br /&gt;
    &lt;input type=&quot;button&quot; value=&quot;Add Rows&quot; onclick=&quot;addRows()&quot; /&gt;
    &lt;!-- Optional position --&gt;
    &lt;table id=&quot;myTable&quot;&gt;
      &lt;tr&gt;
        &lt;th&gt;Name&lt;/th&gt;
        &lt;th&gt;Date&lt;/th&gt;
        &lt;th&gt;Amount&lt;/th&gt;
        &lt;th&gt;Delete&lt;/th&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;McDonald's&lt;/td&gt;
        &lt;td&gt;6/22/2017&lt;/td&gt;
        &lt;td&gt;$12.00&lt;/td&gt;
        &lt;td&gt;
          &lt;input type=&quot;button&quot; value=&quot;Delete&quot; onclick=&quot;deleteRow(this)&quot; /&gt;
        &lt;/td&gt;
      &lt;/tr&gt;
    &lt;/table&gt;

    &lt;script&gt;
      function deleteRow(r) {
        var i = r.parentNode.parentNode.rowIndex;
        document.getElementById(&quot;myTable&quot;).deleteRow(i);
      }
      function addRows() {
        console.log(&quot;add rows&quot;);
        document.getElementById(&quot;myTable&quot;).innerHTML += `&lt;tr&gt;
        &lt;td&gt;McDonald's&lt;/td&gt;
        &lt;td&gt;6/22/2017&lt;/td&gt;
        &lt;td&gt;$12.00&lt;/td&gt;
        &lt;td&gt;
          &lt;input type=&quot;button&quot; value=&quot;Delete&quot; onclick=&quot;deleteRow(this)&quot; /&gt;
        &lt;/td&gt;
      &lt;/tr&gt;`;
      }
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>


blocks|key|39325|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|39326|let+myTable+=+document.getElementById('myTable').getElementsByTagName('tbody')[0];

let+row+=+myTable.insertRow();
let+cell1+=+row.insertCell(0);
let+cell2+=+row.insertCell(1);
let+cell3+=+row.insertCell(2);

cell1.innerHTML+=+1;
cell2.innerHTML+=+'JAHID';
cell3.innerHTML+=+23;

row+=+myTable.insertRow();
cell1+=+row.insertCell(0);
cell2+=+row.insertCell(1);
cell3+=+row.insertCell(2);

cell1.innerHTML+=+2;
cell2.innerHTML+=+'HOSSAIIN';
cell3.innerHTML+=+50;|code-block|syntax|javascript|39327|table+{
++border-collapse:+collapse;
}

td,+th+{
++border:+1px+solid+#000;
++padding:+10px;
}|39328|<table+id="myTable">
++++<thead>
++++++++<tr>
++++++++++++<th>ID</th>
++++++++++++<th>NAME</th>
++++++++++++<th>AGE</th>
++++++++</tr>++++
+++++</thead>
++++<tbody></tbody>
</table>|39329|39330|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|O|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|I|3|J|5|D|7|Q|8|@]|9|@]|A|$E|F]]|$1|K|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|L|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|M|$]]

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>let myTable = document.getElementById('myTable').getElementsByTagName('tbody')[0];

let row = myTable.insertRow();
let cell1 = row.insertCell(0);
let cell2 = row.insertCell(1);
let cell3 = row.insertCell(2);

cell1.innerHTML = 1;
cell2.innerHTML = 'JAHID';
cell3.innerHTML = 23;

row = myTable.insertRow();
cell1 = row.insertCell(0);
cell2 = row.insertCell(1);
cell3 = row.insertCell(2);

cell1.innerHTML = 2;
cell2.innerHTML = 'HOSSAIIN';
cell3.innerHTML = 50;</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>table {
  border-collapse: collapse;
}

td, th {
  border: 1px solid #000;
  padding: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="myTable"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;ID&lt;/th&gt;
            &lt;th&gt;NAME&lt;/th&gt;
            &lt;th&gt;AGE&lt;/th&gt;
        &lt;/tr&gt;    
     &lt;/thead&gt;
    &lt;tbody&gt;&lt;/tbody&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


blocks|key|256096|text|也可以使用querySelector选择tbody，然后在其末尾插入新行。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|256097|使用append将节点或DOMString对象插入到新单元格中，然后将其插入到新行中。|256098|​|256099|var+myTbody+=+document.querySelector("#myTable>tbody");
var+newRow+=+myTbody.insertRow();
newRow.insertCell().append("New+data");|code-block|syntax|javascript|256100|<table+id="myTable">
++<thead>
++++<tr>
++++++<th>My+Header</th>
++++</tr>
++</thead>
++<tbody>
++++<tr>
++++++<td>Data</td>
++++</tr>
++</tbody>
++<tfoot>
++++<tr>
++++++<td>My+footer</td>
++++</tr>
++</tfoot>
</table>|256101|256102|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector|1|https://developer.mozilla.org/en-US/docs/Web/API/Element/append^0|5|D|5|D|0|0|2|6|2|6|1|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|11|8|@$9|12|A|13|B|C]]|D|@$9|14|A|15|1|16]]|E|$]]|$1|F|3|G|5|6|7|17|8|@$9|18|A|19|B|C]]|D|@$9|1A|A|1B|1|1C]]|E|$]]|$1|H|3|I|5|6|7|1D|8|@]|D|@]|E|$]]|$1|J|3|K|5|L|7|1E|8|@]|D|@]|E|$M|N]]|$1|O|3|P|5|L|7|1F|8|@]|D|@]|E|$M|N]]|$1|Q|3|I|5|6|7|1G|8|@]|D|@]|E|$]]|$1|R|3|-4|5|6|7|1H|8|@]|D|@]|E|$]]]|S|$T|$5|U|V|W|E|$X|Y]]|Z|$5|U|V|W|E|$X|10]]]]

<p>You can also use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector" rel="nofollow noreferrer"><code>querySelector</code></a> to select the tbody, then insert a new row at the end of it.</p>
<p>Use <a href="https://developer.mozilla.org/en-US/docs/Web/API/Element/append" rel="nofollow noreferrer"><code>append</code></a> to insert Node or DOMString objects to a new cell, which will then be inserted into the new row.</p>
<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>var myTbody = document.querySelector("#myTable&gt;tbody");
var newRow = myTbody.insertRow();
newRow.insertCell().append("New data");</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="myTable"&gt;
  &lt;thead&gt;
    &lt;tr&gt;
      &lt;th&gt;My Header&lt;/th&gt;
    &lt;/tr&gt;
  &lt;/thead&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      &lt;td&gt;Data&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tbody&gt;
  &lt;tfoot&gt;
    &lt;tr&gt;
      &lt;td&gt;My footer&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/tfoot&gt;
&lt;/table&gt;</code></pre>
</div>
</div>
</p>


<p>I have an HTML table with a header and a footer:</p>

<pre><code>&lt;table id="myTable"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th&gt;My Header&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td&gt;aaaaa&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tfoot&gt;
        &lt;tr&gt;
            &lt;td&gt;My footer&lt;/td&gt;
        &lt;/tr&gt;
    &lt;tfoot&gt;
&lt;/table&gt;
</code></pre>

<p>I am trying to add a row in <code>tbody</code> with the following:</p>

<pre><code>myTable.insertRow(myTable.rows.length - 1);
</code></pre>

<p>but the row is added in the <code>tfoot</code> section.</p>

<p>How do I insert <code>tbody</code>?</p>


How to insert a row in an HTML table body in JavaScript

JSON

我有一个带有页眉和页脚的HTML表：<table id="myTable">    <thead>        <tr>            <th>My Header</th>        </tr>    </thead>    <tbody>        <tr>            <td>aaaaa...

问如何在JavaScript中插入一行HTML表体
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在JavaScript中插入一行HTML表体EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在JavaScript中插入一行HTML表体
EN