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


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>


<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</td>        </tr>    </tbody>    <tfoot

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

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 11

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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