I want an image to be added inside the table for every loop run.image is not appearing any help will be appreciated thank u
for (var i = 0; i < result.length; i++) {
doc1 = result[i];
if (doc1.PHOTO == "") {
var elem1 = document.createElement("img");
elem1.setAttribute("src", '../common/images/Icon-60.png');
elem1.setAttribute("height", "60");
elem1.setAttribute("width", "60");
var tbody = $("<tbody>").appendTo(table);
var tr = $("<tr>").appendTo(tbody);
var td = $("<td>").html(doc1.ENAME).data(doc1).appendTo(tr);
var tr2 = $("<tr>").appendTo(tbody);
var td2 = $("<td>").html(elem1).appendTo(tr2);
}
I'm not sure this will solve your problem, but try :
for (var i = 0; i < result.length; i++) {
var doc1 = result[i];
if (doc1.PHOTO == "") {
var elem1 = "<img src='../common/images/Icon-60.png' height='60' width='60'/>");
table.append('<tr><td data-name='+doc1+'>'+doc1.ENAME+'</td></tr><tr><td>'+elem1+'</td></tr>');
}
}
Hope this helps.
Related
I have an html table that I am creating dynamically its populating everything Accept select element I tried all the methods but its not working please have a look.
My complete code for table:-
function getreferData(dataArray) {
let selectArray = ["Intvw Scheduled", "Selected", "Rejected", "On Hold"];
var ray = dataArray.splice(0, 1)
let table = document.getElementById('thead1');
var tableHeaderRow = document.createElement("tr");
table.appendChild(tableHeaderRow);
for (i = 0; i < ray[0].length; i++) {
var tableHeader = document.createElement("th");
tableHeaderRow.appendChild(tableHeader);
tableHeader.innerHTML = ray[0][i];
}
let tbody = document.getElementById('perf');
for (var i = 0; i < dataArray.length; i++) {
let row = document.createElement("tr")
for (var j = 0; j < dataArray[i].length; j++) {
if (j == 4) {
let col = document.createElement("td")
var a = document.createElement("a");
a.setAttribute("class", "light-blue-text text-light-blue")
a.href = dataArray[i][j];
var node = document.createTextNode("Click here")
a.appendChild(node)
col.appendChild(a)
row.appendChild(col)
} else if (j == 6) {
var col = document.createElement("td");
col.appendChild(createDropdown("status-" + dataArray[i]));
var lbl = document.createElement("label");
lbl.setAttribute("for", "status-" + dataArray[i]);
col.appendChild(lbl)
row.appendChild(col)
} else if (j == 7) {
let col = document.createElement("td")
var a2 = document.createElement("a");
a2.setAttribute("class", "btn blue-grey darken-3 waves-effect waves-light");
a2.setAttribute("onclick", "editrefrecord(\"" + dataArray[i] + "\")");
a2.setAttribute("style", "color: white");
var node2 = document.createTextNode("UPDATE");
a2.appendChild(node2);
col.appendChild(a2);
row.appendChild(col)
} else {
let col = document.createElement("td")
col.innerText = dataArray[i][j]
row.appendChild(col)
}
}
tbody.appendChild(row);
}
function createDropdown(id) {
//create a radio button
var fragment = document.createDocumentFragment();
var select = document.createElement('select');
select.setAttribute("id", id);
selectArray.forEach(function (r) {
select.options.add(new Option(r, r));
});
fragment.appendChild(select);
return fragment;
}
}
The only thing you would like to focus is:-
let selectArray = ["Intvw Scheduled", "Selected", "Rejected", "On Hold"];
else if (j == 6) {
var col = document.createElement("td");
col.appendChild(createDropdown("status-" + dataArray[i]));
var lbl = document.createElement("label");
lbl.setAttribute("for", "status-" + dataArray[i]);
col.appendChild(lbl)
row.appendChild(col)
}
and the function to create select element :-
function createDropdown(id) {
//create a radio button
var fragment = document.createDocumentFragment();
var select = document.createElement('select');
select.setAttribute("id", id);
selectArray.forEach(function (r) {
select.options.add(new Option(r, r));
});
fragment.appendChild(select);
return fragment;
}
Currently My Html table looks like this and If you will see Status is not populating select option:-
The Inspect Element shows its created but its invisible:-
You Missed adding options
let selectArray = ["Intvw Scheduled", "Selected", "Rejected", "On Hold"];
var selectList = document.createElement("select");
selectList.id = "mySelect";
myParent.appendChild(selectList);
//Create and append the options
for (var i = 0; i < selectArray.length; i++) {
var option = document.createElement("option");
option.value = selectArray[i];
option.text = selectArray[i];
selectList.appendChild(option);
}
How tblGene() call on JavaScript page. I do not want to call on HTML page using onclick. Without click, this JSON table show on my web page. Please help me. When page was loaded this JSON table on my web page. I do not want to use input box for click.
<input type="button" onclick="tblGene()" value="Click Here to Generate Table" style="width:100% height:100%" />
<div id="showData"></div>
var people, asc1 = 1;
function tblGene() {
var data = [{"rollno":1234,'name': "jetta",'marks': 600,'percentage': 1222,'bestscore': 99},{"rollno":2341,'name': "jetta",'marks': 700,'percentage': 1222,'bestscore': 100},{"rollno":3421,'name': "jetta",'marks': 500,'percentage': 1222,'bestscore': 90},{"rollno":4321,'name': "jetta",'marks': 400,'percentage': 1222,'bestscore': 95},{"rollno":2043,'name': "jetta",'marks': 550,'percentage': 1222,'bestscore': 80},];
var thead = document.createElement('thead');
var tbody = document.createElement('tbody');
tbody.id = "people";
var tbl = document.createElement("table");
tbl.id = "tblSample";
var col = [];
for (var i = 0; i < data.length; i++) {
for (var colHdr in data[i]) {
if (col.indexOf(colHdr) === -1) {
col.push(colHdr);
}
}
}
var tr = tbl.insertRow(-1);
for (var i = 0; i < col.length; i++) {
var th = document.createElement("th");
th.innerHTML = col[i];
th.dataset.key = i;
tr.appendChild(th);
}
thead.appendChild(tr);
for (var i = 0; i < data.length; i++) {
tr = tbl.insertRow(-1);
for (var j = 0; j < col.length; j++) {
var td = document.createElement("td");
var tabCell = tr.insertCell(-1);
tabCell.innerHTML = data[i][col[j]];
}
tbody.appendChild(tr);
}
tbl.appendChild(thead);
tbl.appendChild(tbody);
var divCntr = document.getElementById("showData");
divCntr.innerHTML = "";
divCntr.appendChild(tbl);
thead.addEventListener("click", function(event) {
var key = event.target.dataset.key;
people = document.getElementById("people");
sort_tbl(people, key, asc1);
});
function sort_tbl(tblSample, key, asc) {
var rows = tblSample.rows,
rlen = rows.length,
arr = new Array();
for (var i = 0; i < rlen; i++) {
var cells = rows[i].cells;
var clen = cells.length;
arr[i] = new Array();
for (var j = 0; j < clen; j++) {
arr[i][j] = cells[j].innerHTML;
}
}
arr.sort(function(x, y) {
if (isNaN(x[key]) && isNaN(y[key])) {
var a = String(x[key]).toUpperCase();
var b = String(y[key]).toUpperCase();
if (a > b)
return 1
if (a < b)
return -1
return 0;
} else {
return x[key] - y[key];
}
});
for (i = 0; i < rlen; i++) {
rows[i].innerHTML = "<td>" + arr[i].join("</td><td>") + "</td>";
}
}
}
Just remove the () from you onclick handler, like this onclick="tblGene".
If you leave the (), you're executing the function as soon as the <input> element is loaded - in your case on page load.
I am working on this table that as to be managed by the client. I want to know if is possible to change the color of the entire row when in the "Status" column he writes the word "vermietet".
In this case when the client write "vermietet" the rows that contains that word change background color in orange.
Any JS tips?
Thanks in adivce.
EDIT:
I tried this
<script>
jQuery(document).ready(function($){
$(document.body)var cols = document.getElementsByClassName('column-10');
for (var i = 0; i < cols.length; ++i) {
var col = cols[i];
if (col.innerHTML === 'vermietet') {
var parent = col;
while((parent = parent.parentElement).tagName !== 'TR');
var found = parent.childNodes;
for (var j = 0; j < found.length; ++j) {
var td = found[j];
if (td.tagName === 'TD') {
td.style.backgroundColor = 'orange';
}
}
}
}
});
</script>
Pure JS solution:
var cols = document.getElementsByClassName('column-10');
for (var i = 0; i < cols.length; ++i) {
var col = cols[i];
if (col.innerHTML === 'vermietet') {
var parent = col;
while((parent = parent.parentElement).tagName !== 'TR');
var found = parent.childNodes;
for (var j = 0; j < found.length; ++j) {
var td = found[j];
if (td.tagName === 'TD') {
td.style.backgroundColor = 'orange';
}
}
}
}
abc1 abc2 abc3
abc4 abc5 abc6
abc7 abc8 abc9
using above csv file, load text by replacing the double quotes from the bellow sentence.
Sentence:
"" is going with "" to "" for something to know.
Expected out put is:
abc1 is going with abc2 to abc3 for something to know.
abc3 is going with abc5 to abc6 for something to know.
like this in javascript, php.
Code I have tried so far:
var s = 'Neque porro "" estqui "" dolorem';
var insert = [["a1", "b1"]["c1","d1"]];
console.log(insert);
var words = new Array();
words = s.split(" ");
console.log(words);
var count = 0;
for (i = 0; i < words.length; i++) {
for (j = 0; j < insert.length; j++) {
if(words[i] == '""')
s = s.replace(/""/, insert[j]);
}
}
console.log(s);
Hurray I got the answer:
reader.onload = function (e) {
var sent = ''; var sentt = ''; var senttt = '';
sent = $('#mixmsg').val();
var quoteLength = (sent.match(/""/g) || []).length;
var rowcells = [];
rows = e.target.result.split("\n"); alert(rows);
for (var i = 0; i < rows.length; i++) {
var cells = rows[i].split(",");
rowcells.push(cells);
}
var rowcellso = rowcells.slice(0, -1);
console.log(rowcellso);
for (var ro = 0; ro < rowcellso.length; ro++) {
for (var scol = 0; scol < quoteLength; scol++) {
sent = sent.replace(/""/,rowcellso[ro][scol]);
console.log(rowcellso[ro][scol]);
} sentt +=sent+'\n'; sent= $('#mixmsg').val();
}
$('#container').html(sentt);
}
When I generate this table it is generated after the rest of the code is executed.
I want to be able to generate the code into a specific class like ".container".
How would I do this?
var listOfWords = [];
var rndWord = [];
var counter = 0;
var ul = document.getElementById("wordlist");
var i;
for (i = 0; i < ul.children.length; ++i) {
listOfWords.push({
"name": ul.children[i].getAttribute("data-word"),
"pic": ul.children[i].getAttribute("data-pic"),
"audio": ul.children[i].getAttribute("data-audio")
});
}
var chosenWords = [];
var copylist = listOfWords.slice();
for (var x = 0; x < 6; x++) {
var rand = Math.floor(Math.random() * (copylist.length));
chosenWords.push(copylist[rand].name);
copylist.splice(rand, 1);
if (chosenWords.length < 12) {
chosenWords.push(' ');
}
}
var shuffledWords = [];
shuffledWords = chosenWords.sort(function() {
return 0.5 - Math.random()
});
var guesses = {};
var tbl = document.createElement('table');
tbl.className = 'tablestyle';
var wordsPerRow = 2;
for (var i = 0; i < shuffledWords.length - 1; i += wordsPerRow) {
var row = document.createElement('tr');
for (var j = i; j < i + wordsPerRow; ++j) {
var word = shuffledWords[j];
guesses[word] = [];
for (var k = 0; k < word.length; ++k) {
var cell = document.createElement('td');
$(cell).addClass('drop-box').attr('data-word', word).attr('data-letter', word[k]);
cell.textContent = word[k];
row.appendChild(cell);
}
}
tbl.appendChild(row);
}
document.body.appendChild(tbl);
I thought changing the bottom line of this code from
document.body.appendChild(tbl);
to
document.container.appendChild(tbl);
would do it but it didn't.
Does anyone know how to put this table into container?
If you want to add the table to an element with a specific css class, you can do the following.
$(".container").append(tbl);