Develop Reference

Tampermonkey, Chrome how to automatically insert rows into a table?

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.

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

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.

Accessing an object's content in Javascript

I'm pretty new to Javascript. I just have a basic question. Can somebody tell me why executing the javascript code in the JSFiddle link below results in this error:" Cannot read property 'innerHTML' of null".
Link:
http://jsfiddle.net/ali89ma/tz5h8umk
var myTable = document.createElement("TABLE");
var row1 = myTable.insertRow(-1);
var cell1 = row1.insertCell(-1);
cell1.innerHTML = "23.00";
cell1.id = "1000price";
var cell1Content = document.getElementById("1000price").innerHTML;
console.log(cell1Content);
But if I write the line below it works fine.
var cell1Content = cell1.innerHTML;
console.log(cell1Content);
Thanks.

as mentioned above The getElementById() method returns the element that has the ID attribute from the DOM with the specified value.
you create a table element dynamiclly but you didnt append it to your page(this will add the table to the DOM elements)
so you need to add this append order to your code like that :
// create a table element dynamiccly but it still not in the DOM elements
var myTable = document.createElement("TABLE");
var row1 = myTable.insertRow(-1);
var cell1 = row1.insertCell(-1);
cell1.innerHTML = "23.00";
cell1.id = "1000price";
//the next line will add your table to the DOM
document.body.appendChild( myTable );
//now you can use the getElementById method to get elements from the DOM
var cell1Content = document.getElementById("1000price").innerHTML;
console.log(cell1Content);

insertCell returns null if the parent table does not exist in the DOM.
Add this line immediately after line 1:
var myTable = document.createElement("TABLE");
document.body.appendChild( myTable ); // <-- this line
var row1 = myTable.insertRow(-1);
After adding the line it works and I get "23.00" output in my console.

You must append element after create
var myTable = document.createElement("TABLE");
document.body.appendChild(myTable);

You are creating the table through javascript. When you are trying to access the table element it will not be present in the DOM. You need to add the table to the DOM then it will work. Add this line able the var cell1Content
document.body.append(myTable);

append table in body before accessing element
var myTable = document.createElement("TABLE");
document.body.appendChild(myTable);
working fiddle
http://jsfiddle.net/tz5h8umk/2/

How to get selected row index from jquery datatables without using TableTool

I need to get the row id or index of user selected rows from jquery datatables without using the TableTool. Once I get the indexes or the Ids, I will use them to select these rows after the user comes back to the same page. How do I get the row Id or index of the select rows? Many thanks !
JSP code:
// when a row is selected, I want to get the row id or index
$('#userTable tbody tr').on('click', function()
{
var oTable = $('#userTable').dataTable();
var data = oTable.fnGetData(this);
selectedRowId = data[4];
alert(selectedRowId); // this printed "undefined"
var rowIndex = oTable.row(this).index();
alert(rowIndex); // this alert didn't even get invoked.
});

var rowIndex = oTable.row(this).index();
The above will work but you have to use:
var oTable = $('#userTable').DataTable();
which will return the API and should allow you to use row(this).index()
Instead Of:
var oTable = $('#userTable').dataTable();
However without seeing a working copy of the code (JSFiddle maybe) I am unsure why the fnGetData() is not working.

Getting table cell content in IE

I can get table cell contents using following statement in Firefox, but no luck in IE:
document.getElementById('<%=tblBasket.ClientID %>').rows[i].cells[0].innerText
Also I have tested innerHTML, again with no luck, I think the way I call .rows[i].cells[0]. has a problem which gives nothing for IE, what am I doing wrong here?

var table = document.getElementById('<%=tblBasket.ClientID %>');
var rows = table.getElementsByTagName('tr');
var cols = rows[i].getElementsByTagName('td');
var col = cols[0];
var html = col.innerHTML;
and one-liner:
document.getElementById('<%=tblBasket.ClientID %>').getElementsByTagName('tr')[i].getElementsByTagName('td')[0].innerHTML

InvalidArgument with HTML Table's insertBefore method

I think I know this is an IE bug ...
I need to add new row to an HTML table at the exact position.
(don't want insertRow(index) cuz this looks like gonna be better for some other reasons)
function AddNewItem(td) { ///td comes from button at the HTML code, <input ... onclick="AddNewItem(this.parentNode)"
var grid = GetGrid();
var itemIndex = $(td.parentNode).attr('index');
///alert(itemIndex + "'e eklenecek");
var newRow = document.createElement('tr');
var td1 = document.createElement('td');$(td1).addClass('td');
var td2 = document.createElement('td');$(td2).addClass('td text r');
var td3 = document.createElement('td');$(td3).addClass('td text r');
var td4 = document.createElement('td');$(td4).addClass('td text r');
$(newRow).append(td1);$(newRow).append(td2);$(newRow).append(td3);$(newRow).append(td4);
grid.insertBefore(newRow, td.parentNode); ///THIS GIVES AN INVALIDARGUMENT error .. Any solutions will be appreciated :)
}
function GetGrid() {
var grid = document.getElementById("MasterTableView");
return grid;
}

My guess is that td.parentNode is not a child element of grid. Take a look at the W3C specification for insertBefore to make sure that you are calling the method with valid parameters.

I would guess that you're passing in an invalid argument to AddNewItem, that (in IE, at least) it's not a td element like you think.