We Keep Coding

Check table overlap with JavaScript & jQuery

I'm developing timetable web app and I have some problem with it. When I click the button clicked row data will go to under table which I set 'selected subject' table.
And I want to make it if the subject code are already in selected subject, alert the message and prevent put data in to second table.
At first time I thought When I click the add button, make a array and put the subject Code data, and every time when I click the add button, check the array if the subject code are already in there or not.
And Here's my code.
// Add Subject Button Click Event
$('.checkBtn').click(function () {
let checkBtn = $(this);
let tr = checkBtn.parent().parent();
let td = tr.children();
let table = document.getElementById('subjectSelectBody');
let row = table.insertRow();
let subjectCode = row.insertCell(0);
let subjectName = row.insertCell(1);
let credit = row.insertCell(2);
let major = row.insertCell(3);
let day = row.insertCell(4);
let time = row.insertCell(5);
let deleteButton = row.insertCell(6);
// Get Select Tag data
let subject = td.eq(0).text();
let x = document.getElementById(subject).value;
// put data into second table (selected table)
subjectCode.innerHTML = td.eq(0).text();
subjectName.innerHTML = td.eq(1).text();
credit.innerHTML = Number(td.eq(2).text());
major.innerHTML = td.eq(3).text();
day.innerHTML = x;
time.innerHTML = td.eq(5).text();
deleteButton.innerHTML = "<button>delete</button>";
// When clicks delete button, remove the data from second table
$('button').click(function () {
$(this).parents('tr').first().remove();
});
// Create subject add Array to check overlap
let sbjCodeArr=new Array();
sbjCodeArr.push(td.eq(0).text());
console.log(sbjCodeArr);
// Total Array to deliver to server
let tdArr = [td.eq(0).text(), td.eq(1).text(), Number(td.eq(2).text()), td.eq(3).text(), x, td.eq(5).text()];
console.log(tdArr);
})

Error "Cannot read property 'appendChild' of null at generateTable"

Can someone please shine some light on my this error is tossed? outputTable is properly referenced, and my JS file with the array countries is properly formatted.
I reckon I am appending erroneously, but I have tried all that I can.
PS if youre going to downvote, at least please tell me how to improve my questions in the future. I couldnt find a different question that exists already that matches my issue.
window.onload = generateTable();
function generateTable() {
// get the reference for the body
var outputTable = document.getElementById('outputTable');
// revoke existing Body element
if (outputTable) {
outputTable.removeChild(outputTable);
}
// creates a <tbody> element
var tableBody = document.createElement('tbody');
// creating all table rows
for (var i = 0; i < countries.length; i++) {
// creates a table row
var row = document.createElement('tr');
// create table column for flag
var colFlag = document.createElement('td');
//create image element in flag column
var flag = document.createElement('img');
flag.src = 'flags/' + countries[i].Code.toLowerCase() + '.png';
flag.alt = countries[i].Code;
row.appendChild(colFlag);
//append flag to flag column
colFlag.appendChild(flag);
// create table column for Code
var colCode = document.createElement('td');
//append code to code column
colCode.appendChild(document.createTextNode(countries[i].Code));
row.appendChild(colCode);
// create table column for country //**ENGLISH */
var colCountry = document.createElement('td');
colCountry.appendChild(document.createTextNode(countries[i].Name.English));
row.appendChild(colCountry);
// create table column for continent
var colCont = document.createElement('td');
colCont.appendChild(document.createTextNode(countries[i].Continent));
row.appendChild(colCont);
// create table column for area
var colArea = document.createElement('td');
colArea.appendChild(document.createTextNode(countries[i].AreaInKm2));
row.appendChild(colArea);
// create table column for population
var colPop = document.createElement('td');
colPop.appendChild(document.createTextNode(countries[i].Population));
row.appendChild(colPop);
// create table column for capital of country
var colCap = document.createElement('td');
colCap.appendChild(document.createTextNode(countries[i].Capital));
row.appendChild(colCap);
// attach columns to row
tableBody.appendChild(row);
outputTable.appendChild(tableBody);
}
// add the row to the end of the table body
document.body.appendChild(outputTable);
}

Format data from database if data contains a tab-sign

I have a website in wich users input text into a textarea.
This text is saved into a database table and is later shown in a div element
Sometimes a user paste data from excel into the textarea, i wish to retain the table layout from excel after i pull it from the database and present it on my webpage
Example:
test cat1 cat2
data1 1 2
data2 3 5
data3 6 5
Is it possible (probably with js) that on loading the page a code checks if a tab-sign is in the data? And if yes.. format that data as a html table?

TRY As below. Just giving you idea.
var body = document.getElementsByTagName('body')[0];
var text = document.getElementByID("txtareaID").value;
var isTab = text.indexOf("\t");
if(isTab != '-1')
{
var tableCell = text.split("\t");
var table = document.createElement('table');
var tbdy = document.createElement('tbody');
var tr = document.createElement('tr');
for (var i = 0; i < tableCell.length ; i++) {
var td = document.createElement('td');
td.innerText = tableCell[i];
tr.appendChild(td);
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl);
}

You can check for tab characters using \t to see if the character exists in the string. Something like this
var text = "test cat1 cat2 data1 1 2 data2 3 5 data3 6 5";
var tabsFound = text.indexOf("\t");

Tables are stacking instead of replacing

I find it hard to create a title to this question but what I really want to know is how to make my code (that creates tables derived from the value of an input) stop from stacking up tables every time an event is made. like when I input "2" it creates 2 tables but when I input "3" it adds 3 tables thus, 5 tables are made instead of just 3.
I want want my code to create tables derived from the input box rather than stacking it up. How can I achieve this?
<html>
<body>
<input type="text" onblur="myfunction()" onchange="myfunction" id="dino">
<br>
<table id="mytable">
<script>
function myfunction() {
var value = document.getElementById("dino").value;
for (var i = 0; i < value; i++){
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var var_input_days = document.createElement("INPUT");
var_input_days.setAttribute("type", "text");
var_input_days.setAttribute("id", "ID_DAYS_" + [i]);
var_input_days.setAttribute("value","DAYS_" + [i]);
var_input_days.setAttribute("name", "DAYS_" + [i]);
var var_input_name = document.createElement("INPUT");
var_input_name.setAttribute("type", "text");
var_input_name.setAttribute("id", "ID_NAME_" + [i]);
var_input_name.setAttribute("value","NAME_" + [i]);
var_input_name.setAttribute("name", "NAME_" + [i]);
var var_input_data_ca = document.createElement("INPUT");
var_input_data_ca.setAttribute("type", "text");
var_input_data_ca.setAttribute("id", "ID_DATA_CA_" + [i]);
var_input_data_ca.setAttribute("value","ID_DATA_CA_" + [i]);
var_input_data_ca.setAttribute("name", "DATA_" + [i]);
td1.appendChild(var_input_name);
td2.appendChild(var_input_days);
td3.appendChild(var_input_data_ca);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
document.getElementById("mytable").appendChild(tr);
}
document.body.appendChild(table);
}
</script>
</table>
</body>
</html>

What you are doing is adding more elements to the added ones.
What you need to do first is clear the contents of table and recreate it.
You can achieve this by adding just one line at the beginning of myfunction()
document.getElementById("mytable").innerHTML="";
This will clear all contents of mytable before recreating it.

Remove the existing rows in the table first in the myfunction() and then append the rows you are creating.
answer by ramicious works, but you can find the best way to remove existing rows in a table in the following post Delete all rows in an HTML table.

SharePoint List, display calculated field in edit form

I have several SharePoint lists that have a calculated field, which is calculated from the ID field, e.g. if the ID is 13, the calculated field is "XX00013", where "XX" indicates the purpose of this particular list.
By default, in the Display From, this "XX00013" is shown.
How can I make it shown as read-only in the Edit Form too? So that the user who is editing the entry always can see which entry s/he is editing?
I don't think I can edit the EditForm, as it's restricted by the webmaster.
I do have access to Content Editor Web Part to edit some javascript code.
Any suggestions?

I tried to put following code in the in the Content Editor Web Part, which is added to the Edit page. It works so far that the "XX00013" is shown as ready-only in the Edit form. This solution is just a walk-around.
Still the question of in general how to show calculated field remains.
<script type="text/javascript">
function DisplayID(){
var regex = new RegExp("[\\?&]"+"ID"+"=([^&#]*)");
var qs = regex.exec(window.location.href);
var sID = qs[1];
var stID="XX";
var nLength=5-sID.length;
var i=0;
do{
stID=stID.concat("0");
i++;
}while (i<nLength)
stID=stID.concat(sID);
var TD1 = document.createElement("TD");
TD1.className = "ms-formlabel";
TD1.innerHTML = "<h3 class='ms-standardheader'>XX_ID</h3>";
var TD2 = document.createElement("TD");
TD2.className = "ms-formbody";
TD2.innerHTML = stID;
var IdRow = document.createElement("TR");
IdRow.appendChild(TD1);
IdRow.appendChild(TD2);
var ItemBody = GetSelectedElement(document.getElementById("idAttachmentsRow"),"TABLE").getElementsByTagName("TBODY")[0];
ItemBody.insertBefore(IdRow,ItemBody.firstChild);
}
_spBodyOnLoadFunctionNames.push("DisplayID");
</script>