We Keep Coding

javascript trying to add html inside a table via createelement

i have a json code incomming in my html file and i am trying to add table rows to the top of a html table in a basic .html file via javascript
heres my javascript code:
var data = json.data;
for (var i = 0, len = data.length; i < len; i++) {
var x = data[i];
var newItem = document.createElement("tr");
var textnode = document.innerHTML = '<th scope="row"> ' + x.granularity + '</th> <td> ' + x.instrument + '</td> <td>complete: ' + x.complete + ', type: ' + x.type + ', alerttimedate: ' + x.alerttimedate + ', firsttopbot: ' + x.firsttopbot + ', alertprice: ' + x.alertprice + ', firsttbprice: ' + x.firsttbprice + ', timestamp: ' + x.timestamp + ', proceesed: ' + x.proceesed + '</td>';
newItem.appendChild(textnode);
var list = document.getElementById("myList");
list.insertBefore(newItem, list.childNodes[0]);
}
heres the table in html file:
<table class="table table-striped" id="myList">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
</table>
the var textnode = document.innerHTML content does not add any elements to my html file??
any ideas what I am doing wrong here?
json data comes from a php fil in this format
foreach ($result as $row) {
$output[] = [
'instrument' => $row['instrument'],
'granularity' => $row['granularity'],
'complete' => $row['complete'],
'type' => $row['type'],
'alerttimedate' => $row['alerttimedate'],
'firsttopbot' => $row['firsttopbot'],
'alertprice' => $row['alertprice'],
'firsttbprice' => $row['firsttbprice'],
'timestamp' => $row['timestamp'],
'proceesed' => $row['proceesed']];
$lastId = $row['id'];
}
echo json_encode([
'status' => true,
'data' => $output
]);

As I am not sure about what you actually need, due to the lack of coding, I've developed a demo to your problem (as far as I understood it)
// Placeholder JSON data
var data = {
instrument: 'val1',
granularity: 'val2',
complete: 'val3',
type: 'val4',
alerttimedate: 'val5',
firsttopbot: 'val6',
alertprice: 'val7',
firsttbprice: 'val8',
timestamp: 'val9',
proceesed: 'val10'
}
// Select the table
var tableData = document.querySelector("#tableData")
// Creating the `tr`s
var trHead = document.createElement("tr")
var trData = document.createElement("tr")
// Add the data
for (var key in data) {
if (data.hasOwnProperty(key)) {
// Create th
var th = document.createElement("th")
th.innerText = key
// Create td
var td = document.createElement("td")
td.innerText = data[key]
// Append the `td` & `th` to the `tr`s
trHead.appendChild(th)
trData.appendChild(td)
}
}
// Append both `tr`s to the `table`
tableData.appendChild(trHead)
tableData.appendChild(trData)
table {
border: 1px solid #333;
border-collapse: collapse
}
table tr td, table tr th {
border: 1px solid #333;
padding: 5px;
}
<table id="tableData"></table>

Select table cell as a group

In this table, I want to select multiple cells as a group.
You can select a target cell by clicking on it,
but I also want to click and drag to cover multiple cells as a group.
Is that possible to achieve that without any plugins (just use JQuery)?
This is what I want to achieve:
The array content will be:
["3-2", "3-3", "4-2", "4-3", "5-2", "5-3"]
Here is what I try so far:
var group = [];
var columnIndex = 7,
rowIndex = 10;
var $tableContainer = $('#tablecontainer'),
$table = $tableContainer.append('<table border="1" id="table1"></table>'),
$thead = $table.find('table').append('<thead></thead>'),
$tbody = $table.find('table').append('<tbody></tbody>');
var $columnNumber = "";
var $tdNumber = "";
for (var col = 1; col <= columnIndex; col++) {
$columnNumber += "<th>Column " + col + "</th>";
$tdNumber += "<td style='text-align: center; vertical-align: middle; color:red'></td>";
}
$thead = $thead.append('<tr><th>0</th>' + $columnNumber + '</tr>');
for (var row = 1; row <= rowIndex; row++) {
$tbody = $tbody.append('<tr><td>Row ' + row + '</td>' + $tdNumber + '</tr>');
}
$('#table1 > tbody > tr > td').hover(function() {
var colIndex = $(this).parent().children().index($(this));
var rowIndex = $(this).parent().parent().children().index($(this).parent());
$(this).attr("title", 'Row: ' + rowIndex + ', Column: ' + colIndex);
// console.log('Row: ' + rowIndex + ', Column: ' + colIndex);
});
$('#table1 > tbody > tr > td').click(function() {
var colIndex = $(this).parent().children().index($(this));
var rowIndex = $(this).parent().parent().children().index($(this).parent());
group.push(rowIndex + "-" + colIndex);
console.log(group);
$(this).css("background-color", "red");
// console.log('Row: ' + rowIndex + ', Column: ' + colIndex);
});
#table1>tbody>tr>td:hover {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tablecontainer"></div>
Any help would be appreciated!

The functionality you want to achieve is possible by using jquery mouseover function.
I made a fiddle to get the desired output as you expect.
Fiddle
Hope this helps you in solving the issue.
-Help :)

Get Table data in json format

Hello everyone I'm trying to get table data in json format here is my table
<table>
<thead>
<tr>
<th>srno</th>
<th>name</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jhon One</td>
<td>Doe one</td>
</tr>
<tr>
<td>2</td>
<td>Jhon two</td>
<td>Doe Two</td>
</tr>
</tbody>
</table>
<button>
convert
</button>
the result which i am getting is this
{
"0": {
"1",
"Jhon One",
"Doe one"
}
,
"1": {
"2",
"Jhon two",
"Doe Two"
}
}
using the below javascript
$("button").click(function() {
var json = html2json();
alert(json);
});
function html2json() {
var json = '{';
var otArr = [];
// var i = 1;
var tbl2 = $('table tbody tr').each(function(e) {
x = $(this).children();
var itArr = [];
x.each(function() {
itArr.push('"' + $(this).text() + '"');
});
otArr.push('"' + e + '": {' + itArr.join(',') + '}');
})
json += otArr.join(",") + '}'
return json;
}
but i want to add key to every value and the number should start from one and not zero.
i have a set of desire result and it should look like this
any help is appreciated
{
"1": {
no: "1",
name:"Jhon One",
lastname "Doe one"
}
,
"2": {
no: "1",
name:"Jhon two",
lastname "Doe two"
}
}
here is the fiddel link which i have tried
https://jsfiddle.net/k228n2bn/

Just change the following line
otArr.push('"' + e + '": {' + itArr.join(',') + '}');
to
otArr.push('"' + (e+1) + '": {' + itArr.join(',') + '}');
The parenthesis will add the values as numbers not strings.
Also, add keys array for internal object keys.
function html2json() {
var json = '{';
var otArr = [];
// var i = 1;
var tbl2 = $('table tbody tr').each(function(e) {
x = $(this).children();
var itArr = [];
var keys = ['no','name','lastname'];
x.each(function(i) {
itArr.push('"' + keys[i] + '":"' + $(this).text() + '"');
});
otArr.push('"' + (e+1) + '": {' + itArr.join(',') + '}');
})
json += otArr.join(",") + '}'
return json;
}

You can convert e to a Number and add one to it like in this fiddle.
function html2json() {
var json = '{';
var otArr = [];
// var i = 1;
var tbl2 = $('table tbody tr').each(function(e) {
x = $(this).children();
var itArr = [];
x.each(function() {
itArr.push('"' + $(this).text() + '"');
});
otArr.push('"' + (Number(e) + 1) + '": {' + itArr.join(',') + '}');
})
json += otArr.join(",") + '}'
return json;
}
The json you're returning is not valid though. You may want to do something like this fiddle if you can to simplify and ensure valid json and to create your objects from any table structure.
function html2json() {
var otArr = [];
var tblHeaders = Array.from($('table thead tr')
.children())
.map(header => $(header).text());
var tbl2 = $('table tbody tr').each(function(e) {
const values = Array.from($(this).children());
const row = {};
for (let i = 0; i < tblHeaders.length; i++){
row[tblHeaders[i]] = $(values[i]).text();
}
otArr.push({
[e+1]: row
})
})
json = JSON.stringify(otArr);
return json;
}

Try e+1
change otArr.push('"' + e + '": {' + itArr.join(',') + '}');
to
otArr.push('"' + (e+1) + '": {' + itArr.join(',') + '}');
$("button").click(function() {
var json = html2json();
});
function html2json() {
var json = '{';
var otArr = [];
var tbl2 = $('table tbody tr').each(function(e) {
x = $(this).children();
var itArr = [];
x.each(function(e) {
var items='';
if(e == 0){
items +='no : "'+ $(this).text()+'"';
}
if(e == 1){
items +='name : "' +$(this).text()+'"';
}
if(e == 2){
items +='email : "' +$(this).text()+'"';
}
itArr.push(items);
});
otArr.push('"' + (e+1) + '": {' + itArr.join(',') + '}');
})
json += otArr.join(",") + '}'
alert(json);
return json;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
<tr>
<th>srno</th>
<th>name</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Jhon One</td>
<td>Doe one</td>
</tr>
<tr>
<td>2</td>
<td>Jhon two</td>
<td>Doe Two</td>
</tr>
</tbody>
</table>
<button>
convert
</button>

Maybe you can use theads as keys for the generated objects.
Check this jsfiddle.
function html2json() {
var $table = $('table');
var $ths = $table.find('thead>tr>th');
var rows = {};
$table.find('tbody>tr').each(function () {
var row = {};
$(this).children().each(function (index) {
row[$ths[index].textContent] = this.textContent;
});
rows[row.srno] = row;
});
return JSON.stringify(rows);
}

ActionLink in jquery table

i am new to mvc and jquery,
i have created one table with jquery but i don't know how we add one actionlink in each row and also i need to call one function on the onclick event.
my code is given bellow
function loadData(data) {
var tab = $('<table class="myTable"></table>');
var thead = $('<thead></thead>');
thead.append('<th>Id</th><th></th>');
thead.append('<th>Username</th>');
tab.append(thead);
$.each(data, function (i, val) {
var trow = $('<tr></tr>');
trow.append('<td>' + val.empID + '</td>');
trow.append('<td>' +"" + '</td>');
trow.append('<td>' + val.empName + '</td>');
trow.append('<td>' + '#Html.ActionLink("Edit", "Edit", new { id = val.empID })' + '</td>');
tab.append(trow);
});
here i got one error
"val is not in the current context"
please anyone help me to add one actionlink with click event.

You can achieve this by changing your code as below.
function loadData(data) {
var tab = $('<table class="myTable"></table>');
var thead = $('<thead></thead>');
thead.append('<th>Id</th><th></th>');
thead.append('<th>Username</th>');
tab.append(thead);
$.each(data, function (i, val) {
var trow = $('<tr></tr>');
trow.append('<td>' + val.empID + '</td>');
trow.append('<td>' +"" + '</td>');
trow.append('<td>' + val.empName + '</td>');
trow.append('<td></td>');
tab.append(trow);
});
Try this and let me know, if you required anymore information.

Below Code Work Perfectly and Bind Table dynamically with Control.
function bindTable (data)
{
usersTable = $('<table><thead><tr>'
+ '<th style="width: 300px;">Col 1</th><th>Col 2</th><th>Col 3</th><th>Col 4</th><th>Col 5</th>'
+ '</tr></thead ></table>').attr({ class: ["dataTable row-border hover"].join(' '), id: "table", style: "border: 1px solid; background-color:#d2d2d2;" });
var rows = new Number("10");
var cols = new Number("4");
var tr = [];
if (data != null) {
for (var i = 0; i < data.length; i++) {
var row = $("<tr></tr>").attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(table);
$("<td></td>").html(data[i].Col1).appendTo(row);
$("<td></td>").html(data[i].Col2).appendTo(row);
$("<td></td>").html(data[i].Col3).appendTo(row);
$("<td></td>").html(data[i].Col4).appendTo(row);
$("<td></td>").html($('<a href=/ControllerName/Action?ParamId='+data[i].Id+'>Action</a>')).appendTo(row);
}
}
table.appendTo("#Div");
$("#table").DataTable({
"aoColumns": [null, null, null, null, { "bSortable": false }]
});
}

How to access via jquery to select controls created dynamically

I have created dynamically some select controls(a.k.a. groupbox) but every time that I try to access to one of them if get the followig error:
Uncaught TypeError: undefined is not a function
Here is the code:
var method =$("#slt" + (parseInt(buttonElementId + 1))).children("option").is("selected").text();
Where parseInt(buttonElementId + 1 is always a number so the error is not there
<html>
<head lang="en">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css"> <!-- load bootstrap css -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css"> <!-- load fontawesome -->
<style>
body { padding-top:80px; }
html, body, #wrapper
{
width: 100%;
height: 100%;
}
</style>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div class="container">
<div id="information"></div>
<div id="tableInformation"></div>
<div id="goBack"></div>
<br/>
<div id="inputDiv"></div>
<br/>
<br/>
<div id="UserGuide"></div>
</div>
<script src="js/jquery-1.11.js"> </script>
<script>
var apiUrl = 'http://localhost/devices';
$( document ).ready(function() {
// Handler for .ready() called.
jsonGETRequest(apiUrl, jsonExampleData);
});
$(document).on('click', ':button' , function() {
// reference clicked button via: $(this)
$("#UserGuide").empty();
var buttonElementId = $(this).attr('id');
if(buttonElementId.indexOf("btnShowFunc") > -1) {
buttonElementId = buttonElementId.replace("btnShowFunc","");
deviceUID = document.getElementById("mytable").rows[(parseInt(buttonElementId) + 1)].cells[1].innerHTML;
goBack = "firstAPIRequest";
$("#tableInformation tbody").remove();
jsonGETRequest(apiUrl + "/" + deviceUID + "/functions", jsonExampleDataFunctions);
} else if(buttonElementId.indexOf("btnGoBack") > -1 ) {
switch (goBack) {
case "firstAPIRequest":
goBack = "";
$("#tableInformation tbody").remove();
jsonGETRequest(apiUrl, jsonExampleData);
removeGoBackInputDiv();
break;
case "secondAPIRequest":
goBack = "firstAPIRequest";
$("#tableInformation tbody").remove();
jsonGETRequest(apiUrl + "/" + deviceUID + "/functions", jsonExampleDataFunctions);
removeGoBackInputDiv();
break;
}
}else if(buttonElementId.indexOf("btnRunFunc") > -1) {
goBack = "secondAPIRequest";
buttonElementId = buttonElementId.replace("btnRunFunc","");
var functionUID = document.getElementById("mytable").rows[(parseInt(buttonElementId) +1)].cells[2].innerHTML;
var method =$("#slt" + (parseInt(buttonElementId + 1))).children("option").is("selected").text();
$("#tableInformation tbody").remove();
$("#inputDiv").empty();
// /jsonPOST(apiUrl '/functions/' + functionUID )
}
});
function loadDataIntoDeviceGrid(jsonData) {
//$("#tableInformation").addClass("table table-responsive table-bordered");
var tbl=$("<table/>").attr("id","mytable");
$("#tableInformation").append(tbl);
$("#mytable").append("<tr>" + "<th>dal.device.status</th>" + "<th>dal.device.UID</th>"
+ "<th>dal.device.driver</th>" + "<th>service.id</th>" +"<th></th>" + "</tr>");
for(var i=0;i<jsonData.length;i++)
{
var tr = "<tr>";
var td1 = "<td>"+jsonData[i]["dal.device.status"]+"</td>";
var td2 = "<td>"+jsonData[i]["dal.device.UID"]+"</td>";
var td3 = "<td>"+jsonData[i]["dal.device.driver"]+"</td>";
var td4 = "<td>"+jsonData[i]["service.id"]+"</td>";
//#Deprecated var dataList = fillSelectControl(jsonData[i]["objectClass"]); #Deprecated
var btn = "<td>" + "<button id='btnShowFunc"+ i + "' class='btn btn-success btn-lg'>See function</button>" + "</td></tr>";
$("#mytable").append(tr + td1 + td2 + td3 + td4 + btn );
}
$("#mytable").addClass("table table-responsive table-bordered");
}
function loadInformationDeviceGrid() {
$("#UserGuide").addClass("alert alert-info");
$("#UserGuide").html("<h3>Getting devices list:</h3><br/> "+
"Using this request, you can retrieve a list of all the available devices."+
"For every device, among other info, there is the indication of the device unique ID, which" +
"can be used to directly access to the device and the indication of the device driver (ZigBee, Bluetooth, etc.).<br/>If you want see some request response example please visit this <a href='#'>site</a>");
}
function removeGoBackInputDiv() {
$("#inputDiv").empty();
$("#btnGoBack").remove();
}
function loadDataIntoFunctionsGrid(jsonData) {
$("#mytable").append("<tr>" + "<th>function.device.UID</th>"
+ "<th>service.id</th>" + "<th>function.UID</th>" + "<th>operation.names</th>" + "<th></th>" + "</tr>");
var tr, td2, td3, td4, dt2, btn;
for(var i = 0; i < jsonData.length; i++) {
tr = "<tr>";
//#Deprecated td1 = "<td>" + jsonData[i]["CLASS"] + "</td>";
td2 = "<td>" + jsonData[i]["al.function.device.UID"] + "</td>";
td3 = "<td>" + jsonData[i]["service.id"] + "</td>";
td4 = "<td>" + jsonData[i]["dal.function.UID"] + "</td>";
//#Deprecated dt1 = fillSelectControl(jsonData[i]["objectClass"]);
dt2 = fillSelectControl(jsonData[i]["dal.function.operation.names"], i);
btn = "<td>" + "<button id='btnRunFunc"+ i + "' class='btn btn-success btn-lg'>Run</button>" + "</td></tr>";
$("#mytable").append(tr + td2 + td3 + td4 + dt2 + btn );
}
createGoBackButton();
createInputTextParameters();
}
function loadInformationFunctionsGrid() {
$("#UserGuide").addClass("alert alert-info");
$("#UserGuide").html("<h3>Getting device functions:</h3><br/>"
+ "This API is used to retrieve the list of the available functions supported by the device. For"
+ "example a Smart Plug has two functions: one to retrieve the energy consumption and another"
+ "'boolean' function useful to change the status of the smart plug (ON/OFF). Every function"
+ "indicates the id, which can be used to access directly the function and the list of the operation"
+ "that can be invoked on the function.<br/>"
+ "P.S. If he want use a function that want some parameters he must write these into the dedicated textbox. If the API needs more parameters separate these using comma. <br/>"
+ "Example of parametes: <br/> <code>'type':'java.math.BigDecimal'</code><br/> <code>'value':1</code> <br/> etc...");
}
function createGoBackButton() {
var btn = '<button id="btnGoBack" class="btn btn-warning btn-lg">Go Back</button>';
$("#goBack").append(btn);
}
function createInputTextParameters() {
var lbl ="<label>Paramters</label>";
var txt ='<input type="text" class="form-control" name="email">';
$("#inputDiv").addClass("form-group");
$("#inputDiv").append(lbl);
$("#inputDiv").append(txt);
}
function fillSelectControl(obj, id) {
var dataList = "<td><select id='slt"+ id +"'>";
for(var j = 0; j < obj.length; j++)
dataList = dataList + "<option value='" + obj[j] + "'>" + obj[j] + "</option>";
return dataList = dataList + "</select></td>";
}
var json = "";
var goBack = "";
var deviceUID;
function jsonGETRequest(url, dataExample){
$.getJSON(apiUrl, function(data) {
alert(JSON.stringify(data));
this.json = data;
})
.done(function() {
$("#information").addClass("alert alert-success");
$("#information").text("getJSON request succeeded!");
if(goBack == "") {
loadDataIntoDeviceGrid(jsonExampleData);
loadInformationDeviceGrid();
} else if (goBack=="firstAPIRequest") {
loadDataIntoFunctionsGrid(jsonExampleDataFunctions);
loadInformationDeviceGrid();
}
})
.fail(function(jqXHR, textStatus, errorThrown) {
//alert('getJSON request failed! ' + textStatus);
$("#information").addClass("alert alert-danger");
$("#information").text("Impossible get data from API, it will be use example data" + errorThrown);
if(goBack == "") {
loadDataIntoDeviceGrid(jsonExampleData);
loadInformationDeviceGrid();
} else if (goBack=="firstAPIRequest") {
loadDataIntoFunctionsGrid(jsonExampleDataFunctions);
loadInformationFunctionsGrid();
} else if(goBack=="secondAPIRequest") {
}
})
.always(function() { });
}
function jsonPOST(url, method, paramters, dataExample) {
}
var jsonExampleData = [
{
"dal.device.status": 2,
"dal.device.UID": "ZigBee:test123",
"dal.device.driver": "ZigBee",
"service.id": 28,
"objectClass": [
"org.osgi.service.dal.Device"
]
},
{
"dal.device.status": 2,
"dal.device.UID": "ZigBee:test456",
"dal.device.driver": "ZigBee",
"service.id": 29,
"objectClass": [
"org.osgi.service.dal.Device"
]
},
{
"dal.device.status": 2,
"dal.device.UID": "ZigBee:test789",
"dal.device.driver": "ZigBee",
"service.id": 30,
"objectClass": [
"org.osgi.service.dal.Device"
]
}
];
var jsonExampleDataFunctions = [
{
"CLASS": "ismb.pert.jemma.dummydevice.DummyFunction",
"dal.function.device.UID": "ZigBee:test123",
"service.id": 27,
"dal.function.UID": "ZigBee:test123:testButton",
"objectClass": [
"org.osgi.service.dal.Function"
],
"dal.function.operation.names": [
"getData",
"reverse",
"setFalse",
"setTrue"
]
},
{
"CLASS": "ismb.pert.jemma.dummydevice.DummyFunction",
"dal.function.device.UID": "ZigBee:test456",
"service.id": 26,
"dal.function.UID": "ZigBee:test456:testButton",
"objectClass": [
"org.osgi.service.dal.Function"
],
"dal.function.operation.names": [
"getData",
"reverse",
"setFalse",
"setTrue"
]
},
{
"CLASS": "ismb.pert.jemma.dummydevice.DummyFunction",
"dal.function.device.UID": "ZigBee:test789",
"service.id": 25,
"dal.function.UID": "ZigBee:test789:testButton",
"objectClass": [
"org.osgi.service.dal.Function"
],
"dal.function.operation.names": [
"getData",
"reverse",
"setFalse",
"setTrue"
]
}
];
</script>
</body>
</html>

.is() returns a true/false value, it does not continue the jQuery chain, therefor there is no .text() function to call
As DevishOne points out in the comments to get the selected option's text do:
=$("#slt" + (parseInt(buttonElementId + 1))).children("option:selected").text();

Split that in to multiple steps and check for the particular result:
button = $("#slt" + (parseInt(buttonElementId + 1)));
if ( button )
{
childs = button.children("option");
if ( childs .....
Whenever there's no option selected, you are unable to catch that since you refer directly to a method .text() of null.