We Keep Coding

How to create an array from the columns of a table in Javascript?

I have an HTML table like this:
SALES RENTS
ROME MILAN ROME MILAN MONEY
The HTML code is the following:
<TR>
<TD CLASS=HD1 COLSPAN=2>SALES</TD>
<TD CLASS=HD1 COLSPAN=2>RENTS</TD>
<TD CLASS=HDCOLSEP> </TD>
</TR>
<TR>
<TD>ROME</TD>
<TD>MILAN</TD>
<TD>ROME</TD>
<TD>MILAN</TD>
<TD>MONEY</TD>
</TR>
What I need, is to create with javascript an array like this:
(ROME-SALES, MILAN-SALES, ROME-RENTS, MILAN-RENTS, MONEY).
I have already created the array that contains the element of the first row.
Below you can find my code as it was in the past (At the beginning I needed just to take the elements of the first TR). Now I need to modify it and to create an array as specified before.
I don't know if it is clear from the table, but the first ROME and MILAN columns are referred to the column SALES, the second ROME and MILAN are referred to the RENTS column, while MONEY doesn't have any dependence.
Do you have any idea to do this?
Thanks in advance.
function getColumnsVal(id) {
var header = $("table#" + id + " thead tr:eq(1)");
var header_fields = $("td", header);
var header_vals = [];
header_fields.each(function(idx, val) {
var $$ = $(val);
header_vals.push($$.text());
});
return header_vals;
}

It is definitely possible to read values from the table cells. I edited the post a bit to illustrate the code.
I presume that HTML structure is rigid and you always have two rows of titles in the thead and somewhat random number of merged cells in the first row.
You’d want to match the number of columns in both rows, i.e. take the colspan number into account when traversing the cells.
Read both rows and generate strings by combining cell values in corresponding columns.
For example:
function readTableRow(row) {
var values = [];
$("td", row).each(function(index, field) {
var span = $(field).attr("colspan");
var val = $(field).text();
if (span && span > 1) {
for (var i = 0; i<span; i++ ) {
values.push(val);
}
} else {
values.push(val);
}
});
return values;
}
function getColumnsVal(id) {
// Read the first row, taking colspans into account
var first_row = $("table#" + id + " thead tr:eq(0)");
var first_row_vals = readTableRow(first_row);
// Read the second row, taking colspans into account
var second_row = $("table#" + id + " thead tr:eq(1)");
var second_row_vals = readTableRow(second_row);
if (first_row_vals.length != second_row_vals.length) {
return null;
}
var results = [];
for (var i = 0; i<first_row_vals.length; i++) {
results.push([first_row_vals[i].trim(), second_row_vals[i].trim()].filter(function (el) {return el}).join("-"));
}
return results;
}
function displayResults(results) {
var result = "RESULT: <br />";
results.forEach(function(r) {
result = result + r + "<br />";
});
$("#result").html(result);
}
displayResults(getColumnsVal("sample"));
JSFiddle:
https://jsfiddle.net/adanchenkov/n61dqfrs/

Output values from the array in desired order?

I have array with the multiple records, each record has ID, event name and customer name. My algorithm that I use does not seem to work the way I want. Before I start to loop through array I set the empty variable outside of the loop var eventId; then I started looping and inside of the loop I have multiple if statement. So if eventId is empty I want to append tr with event name and below that another tr with customer name. Then next time if my eventId is not empty I want to check if name match with the record, if they match I just want to append td inside of existing tr and output customer name. If they do not match I want to output new tr with event name and new tr with customer name. I have working example here, it looks like that I have Test 1 outputted twice on the screen and I do not want that. I should have event name only once and all customers for that event below that event.
Here is my code:
https://jsfiddle.net/dmilos89/t1v2r8jm/3/
Please if you see where my code is breaking let me know. I think that I have problem with appending elements or my algorithm is missing something. Thanks in advance.
Javascript code:
$( document ).ready(function() {
var myRes = [];
myRes.push({'myId':"42",'eventName':"Test 1",'rCustomer':"Mike, Allan"});
myRes.push({'myId':"42",'eventName':"Test 1",'rCustumer':"Gates, Bill"});
myRes.push({'myId':"19",'eventName':"Spring 2016",'rCustomer':"John, Bill"});
myRes.push({'myId':"19",'eventName':"Spring 2016",'rCustomer':"Adams, Ron"});
myRes.push({'myId':"31",'eventName':"May Test 1",'rCustomer':"Steve, Marie"});
myRes.push({'myId':"42",'eventName':"Test 1",'rCustomer':"Ariel, Bill"});
myRes.push({'myId':"32",'eventName':"Fall 2016",'rCustomer':"Ron, Nill"});
myRes.push({'myId':"32",'eventName':"Fall 2016",'rCustomer':"Kim, Alen"});
myRes.push({'myId':"32",'eventName':"Fall 2016",'rCustomer':"Will, Huges"});
myRes.push({'myId':"32",'eventName':"Fall 2016",'rCustomer':"Seth, Peak"});
var eventId = '';
var count = 1;
for(var i=0; i< myRes.length; i++){
if(eventId != ''){
if(eventId == myRes[i].myId){
$('#row_' + count).append('<td>'+myRes[i].rCustomer+'</td>');
}else{
eventId = myRes[i].myId;
count++;
$('.myReservation').append('<tr><td><b>Event: '+myRes[i].eventName+'</b></td></tr>');
$('.myReservation').append('<tr id="row_"'+count+'><td>'+myRes[i].rCustomer+'</td></tr>');
}
}else{
eventId = myRes[i].myId;
$('.myReservation').append('<tr><td><b>Event: '+myRes[i].eventName+'</b></td></tr>');
$('.myReservation').append('<tr id="row_"'+count+'><td>'+myRes[i].rCustomer+'</td></tr>');
}
}
});
HTML code:
<table>
<tbody class="myReservation">
</tbody>
</table>

You misplaced the double quote when inserting tr elements with ids.
Replace <tr id="row_"'+count+'> with <tr id="row_'+count+'">.
Update: this achieves what you (probably) want:
var found = [];
for (var i = 0; i < myRes.length; i++) {
if (found[myRes[i].myId] === 1) {
$('#row_' + myRes[i].myId).append('<td>' + myRes[i].rCustomer + '</td>');
} else {
found[myRes[i].myId] = 1;
$('.myReservation').append('<tr><td><b>Event: ' + myRes[i].eventName + '</b></td></tr>');
$('.myReservation').append('<tr id="row_' + myRes[i].myId + '"><td>' + myRes[i].rCustomer + '</td></tr>');
}
}

Your problem is that you append a new element on every loop:
First, you are testing if "eventId" is not empty. If it is, you are setting it with the current loop iteration "myId"
eventId = myRes[i].myId;
$('.myReservation').append('<tr><td><b>Event: '+myRes[i].eventName+'</b></td></tr>');
$('.myReservation').append('<tr id="row_"'+count+'><td>'+myRes[i].rCustomer+'</td></tr>');
According to your data, eventId is now 42 and your output is :
<tr><td><b>Event: Test 1</b></td></tr>
<tr id="row_" 1=""><td>Mike, Allan</td></tr>
(by the way, there is a syntax error here and it explains why the next iteration doesn't append data)
Then, on the next iteration, eventId is still 42 so you are doing this
$('#row_' + count).append('<td>'+myRes[i].rCustomer+'</td>');
The output is the same at this point (see above the syntax error on the first answer)
On the next loop iteration, myId will be now 19 so you are overriding eventid and appending tr in consequence
loops keep going...
Until myId is again equal to 42 :
myRes.push({'myId':"42",'eventName':"Test 1",'rCustomer':"Ariel, Bill"});
Here you doesn't want "Event: Test 1" appearing two times, but on the last loop iteration myId was 31
myRes.push({'myId':"31",'eventName':"May Test 1",'rCustomer':"Steve, Marie"});
So on the if test, eventId is NOT equal to myRes[i].myId, therefore your script appends a new tr with duplicate event.
One solution could be this one:
$( document ).ready(function() {
var myRes = [];
myRes.push({'myId':"42",'eventName':"Test 1",'rCustomer':"Mike, Allan"});
myRes.push({'myId':"42",'eventName':"Test 1",'rCustomer':"Gates, Bill"});
myRes.push({'myId':"19",'eventName':"Spring 2016",'rCustomer':"John, Bill"});
myRes.push({'myId':"19",'eventName':"Spring 2016",'rCustomer':"Adams, Ron"});
myRes.push({'myId':"31",'eventName':"May Test 1",'rCustomer':"Steve, Marie"});
myRes.push({'myId':"42",'eventName':"Test 1",'rCustomer':"Ariel, Bill"});
myRes.push({'myId':"32",'eventName':"Fall 2016",'rCustomer':"Ron, Nill"});
myRes.push({'myId':"32",'eventName':"Fall 2016",'rCustomer':"Kim, Alen"});
myRes.push({'myId':"32",'eventName':"Fall 2016",'rCustomer':"Will, Huges"});
myRes.push({'myId':"32",'eventName':"Fall 2016",'rCustomer':"Seth, Peak"});
myRes.forEach(function(value, key) {
var table = $('.myReservation2');
var elemInTable = table.find('tr#row_'+value.myId); // $('#row_42') as an example
// If row doesn't exists, create it with it's customers
if(!elemInTable.length) {
table.append('<tr id="row_'+value.myId+'"><td>'+value.eventName+'</td></tr>');
elemInTable = table.find('tr#row_'+value.myId);
elemInTable.after('<tr><td>'+value.rCustomer+'</td></tr>');
}
// If it already exists, simply add the customers
else {
elemInTable.after('<tr><td>'+value.rCustomer+'</td></tr>');
}
})
});
However, I don't think it is the proper way to do it, actually, I think that you should reorganize your data (if your context permits it) like this :
myRes.push({'myId':"42",'eventName':"Test 1",'rCustomer': ["Mike, Allan", "Gates", "Bill", "..."]})
(sorry for my english by the way)

How to get complete data from (html) bootstrap table when pagination is turned on

I am using bootstrap table in my web page and want to get complete textual data from all table cells, when pagination is on. I have tried the following method and it returns all the data:
var data = $('#' + tableID).bootstrapTable('getData')
Now when i traverse data object to get value for every cell it works fine but, for those cells which have some nested html , for example:
<td class="danger">cell 4</td>
<td>
google
</td>
Now, in this case, i want to get value for second cell as google but it returns me whole html as
google
Any idea, how i can get only textual value.
I can't do any server side operation, I have to achieve this using javascript/jquery. I have also tried using jquery:
function getColData(tableID,colIndex) {
var colArray = $('#' + tableID + ' td:nth-child'+'('+colIndex+')').map(function(){
return $(this).text();
}).get();
return colArray
}
it returns data correctly but only which is visible on active page and i want all the data.

Based on your file on JSFiddle I have modified the JS part as follows, this will get you the text on every td(i.e. text or text content) and not the values of their attributes. Basically this traverses through the DOM searching for tags embedded in ones - except for those on the table header - then obtains the text value.
var table = $('#table'), button = $('#button');
button.click(function() {
var data = [];
table.find('tr:not(:first)').each(function(i, row) {
var cols = [];
$(this).find('td').each(function(i, col) {
cols.push($(this).text());
});
data.push(cols);
});
alert(data);
});
You can see it in action here
UPDATE:
This will get you all data regardless of pagination, also it will strip tags and nested tags.
var table = $('#table'), button = $('#button');
button.click(function() {
var messedData = table.bootstrapTable('getData');
var data = [];
$.each(messedData, function(i, row) {
var rowData = {
'name': row['0'],
'star': row['1'],
'forks': row['2'],
'desc': row['3'],
}
for (prop in rowData) {
var tmp = document.createElement("div");
tmp.innerHTML = rowData[prop];
rowData[prop] = tmp.textContent || tmp.innerText || "";
}
data.push(rowData);
});
console.log(data);
});
You can see it here

Since the actual data is coming in as a string, I don't think bootstrap-table can't differentiate it from the other data. The simple solution I can think of is to use substring() to extract the data from the cells that contain custom html.
http://jsfiddle.net/vwg5Lefz/
The alternative is to go through the generated table <td> and use text() to get the text data from the cells.
http://jsfiddle.net/n0djy60v/

How to add columns from a Common Table to New Table in Enterprise Architect

I am using Enterprise Architect 10 tool for design schema for SQL Database.
Every time a new table is added to EA Schema (lets say with columns 'Name' and 'Description'), common columns (UserId, Status, Role, 15 such columns) has to be added to the new table.
Destination table columns = Source table columns + Common table Columns.
The Destination table shall have the columns - Name, Description, UserId, Status and Role.
I have more than 100 tables and can't add manually all the common columns to each table.
Is there any provision or scripting (javascript or vbscript) can perform this action when I add new table and execute the script ?
-- Added this code after trying...
!INC Local Scripts.EAConstants-JScript
/*
* Script Name:
* Author:
* Purpose:
* Date:
*/
function main()
{
// TODO: Enter script code here!
// Show the script output window
Repository.EnsureOutputVisible( "Script" );
// Get the currently selected element in the tree to work on
var theElement as EA.Element;
var theDestElement as EA.Element;
theElement = Repository.GetTreeSelectedObject();
//theDestElement = Repository.GetTreeSelectedObject();
//theDestElement.Name='Newtable1';
if( theElement != null && theElement.ObjectType == otElement)
{
Session.Output( "Working on element '" + theElement.Name + "' (Type=" + theElement.Type +
", ID=" + theElement.ElementID + ")" );
var srcAttributes as EA.Collection;
srcAttributes = theElement.Attributes;
theDestElement = Repository.
Session.Output(theDestElement);
theDestElement.Name='NewTable1';
var dstAttributes as EA.Collection;
dstAttributes = theDestElement.Attributes;
newAttribute = null;
// List attributes
for ( var i = 0 ; i < srcAttributes.Count ; i++ )
{
var currentAttribute as EA.Attribute;
currentAttribute = srcAttributes.GetAt( i );
dstAttributes.AddNew(currentAttribute.,currentAttribute);
//theDestElement
Session.Output( "Attribute: " + currentAttribute.Name );
}
Session.Output( "Done!" );
}
else
{
// No item selected in the tree, or the item selected was not an element
Session.Prompt( "This script requires an element be selected in the Project Browser.\n" +
"Please select an element in the Project Browser and try again.", promptOK );
}
}
main();
I could able to select all the attributes of one table using
theElement = Repository.GetTreeSelectedObject();
but the destination table to which all the attributes to be copied is unclear to me.
Please help.
Thank you,
Ramm

To start with, you could have used a template package, where your common table with columns is placed.
TO do it retrospectively, you can achieve it using a the internal scripting support. Goto Tools-> Scripting in EA and look for "VBScript - Attribute Lifecycle Example" or 'JScript - Attribute Lifecycle Example' to see how attributes are added / removed from an element.

Message always appears in first row?

I have a delete function within a function where if the user clicks on the "Delete" button, it displays a message stating that a file has been deleted. The code which does this is below:
$("#imagemsg").html(data);
But the problem is that let's say that I have 4 table rows and I delete a file in the 3rd row, the message should be displayed in the 3rd row only but instead it is displayed in the first row. Another example is that let's say that I have 8 table rows and I delete a file in the 6th row, the message should be displayed in the 6th row only but instead it is displayed in the first row.
Why is the message that is suppose to appear after a file is deleted is always displayed in the first row and not within the row the file has been deleted from?
Below is full code:
var counter = 0;
counter++;
function stopImageUpload(success, imagefilename){
var result = '';
if (success == 1){
result = '<span id="imagemsg'+counter+'">The file was uploaded successfully!</span><br/><br/>';
$('.listImage').eq(window.lastUploadImageIndex).append('<div>' + htmlEncode(imagefilename) + '<button type="button" class="deletefileimage" image_file_name="' + imagefilename + '">Remove</button><br/><hr/></div>');
}
else {
result = '<span id="imageemsg">There was an error during file upload!</span><br/><br/>';
}
$(".deletefileimage").on("click", function(event) {
var image_file_name = $(this).attr('image_file_name');
jQuery.ajax("deleteimage.php?imagefilename=" + image_file_name)
.done(function(data) {
$("#imagemsg" + counter).html(data);
});
$(this).parent().remove();
});
return true;
}
Below is the deleteimage.php script where the delete message is retrieved from:
<?php
$image_file_name = $_GET["imagefilename"];
echo "$image_file_name was Deleted";
unlink("ImagesFilesFolder/$image_file_name");
?>

The problem seems to be this:
.done(function(data) {
$("#imagemsg" + counter).html(data);
You set counter like this
var counter = 0;
counter++;
But you never seem to refer to the variable again. In any case, this variable is global - the command above will always target the ID with the current number of the counter, so it will not target the tr corresponding to the clicked button.
Since you use
$(this).parent().remove();
I assume that the parent is the tr concerned? In this case you could use a class instead of an ID 'imagemsg' and then do
$(this).parent().find(".imagemsg").html(data);
This would target the message inside the same row of the button.