Tampermonkey，Chrome如何自动将行插入表格？

Question

I've tried with a stupid way of inserting code for a new table, but not even that seems to work. What would be the proper way? Here's what I tried to do:

var table = document.getElementsByClassName("test")
[0].getElementsByClassName("tableclass");
for (var i = 0, l = table.length; i < l; i++) {
  var content = table[i];
  let s = content.innerHTML;
  s = s.replace(/table/g, 'table border="1"');
  s = s.replace(/tr>[\s\S]*?<tr>[\s\S]*?<td>3/g, 'tr>\r\n<tr>\r\n<td>3');
  content.innerHTML = s;
}

And a fiddle: https://jsfiddle.net/d10tk7nr/1/

Also, the reason my stupid way doesn't contain the whole table is because some of the cells where I want to eventually use this would contain random data and I don't know how to skip that.

Answer 1

If you want to create a new HTML-Element, every browser got you covered on that.

var tr = document.createElement('tr');
console.log(tr);

The browser console will show you exactly what you have created - a new HTML element that is not yet part of the DOM:

<tr></tr>

The same goes with the creation of some content for that table row:

var td1 = document.createElement('td'),
    td2 = document.createElement('td');
td1.innerText = '5';
td2.innerText = '6';
console.log(td1, td2);

The result will be two td-elements:

<td>5</td>   <td>6</td>

Now we have to glue these parts together. Browsers will also have you coverd on this:

tr.append(td1);
tr.append(td2);
console.log(tr);

The result is a complete table row:

<tr><td>5</td><td>6</td></tr>

All we have to do is append this row to your table:

var table = document.querySelector('.test table tbody');
table.append(tr);

The elements you have created are now part of the DOM - child elements of the body of your table to be excact.

Click here for a fiddle

Edit

If you want to insert the new row to a specific place, you have to find the element you that should be next to it and use insertBefore . This would change the the last piece of code to:

var targetTr = document.querySelector('.test table tr:nth-child(2)');
targetTr.parentNode.insertBefore(tr, targetTr);

If you want to choose where to put your new row within your javascript, you can use the childNodes property:

console.log(table.childNodes);

Answer 2

I'd use insertAdjacentHTML, like so:

table[i].insertAdjacentHTML('beforeend', '<tr><td>5</td><td>6</td></tr>');

Please see this fiddle: https://jsfiddle.net/52axLsfn/4/

Also demonstrates how to set the border. Note that this code targets all tables, so depending on your situation you may want to be more specific.