We Keep Coding

Autodesk forge viewer table row click to isolate elements

I am trying to create a dynamic table inside the viewer's page.
each row of the table represents an object from the model and has a couple of different parameters ( name, level, etc..)
I want to make a click event on each row, that isolates the element in the viewer's model.
I have created the table programmatically using js. (the table is created after pressing an external command button )
how can I add an event listener to a row click, that would isolate the element?
this is my code for creating the table after pressing the command button:
var myTable = $('.my-table');
var myArr = rows; //matrix of object values
for (var i = 0; i < myArr.length; i++)
myTable.append("<tr id=" + i + ">" +
" <td>" + myArr[i][0] + "</td>" +
"<td>" + myArr[i][1] + "</td>" +
"<td>" + myArr[i][2] + "</td>" +
"<td>" + myArr[i][3] + "</td>" +
"<td>" + myArr[i][4] + "</td>" +
"<td>" + myArr[i][5] + "</td>" +
"<td>" + myArr[i][6] + "</td>" +
"<td id=" + "tt" + ">" + myArr[i][7] + "</td>" +
"</tr>");
const row = document.getElementById(`${i}`);
row.addEventListener('onClick', function(evt, item) { /// we are using a viewer api property to isolate the
_this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));
});

First, it's not a Forge issue but a JavaScript syntax and indent issue.
After re-indenting your code, you can see the codes for adding the click event is out of the for-loop, so you need to add the bracket pair to include the codes for adding the click event into the for-loop.
When defining for-loop in JavsScirpt without bracket { and }, it only takes the first line in the count.
In addition, there is no onClick event. When using addEventListener, the event name is click, not onClick.
var myTable = $('.my-table');
var myArr = [[1,2,3,4,5,6,7], [1,2,3,4,5,6,7]]; //matrix of object values
for (var i = 0; i < myArr.length; i++) {
myTable.append("<tr id=" + i + ">" +
" <td>" + myArr[i][0] + "</td>" +
"<td>" + myArr[i][1] + "</td>" +
"<td>" + myArr[i][2] + "</td>" +
"<td>" + myArr[i][3] + "</td>" +
"<td>" + myArr[i][4] + "</td>" +
"<td>" + myArr[i][5] + "</td>" +
"<td>" + myArr[i][6] + "</td>" +
"<td id=" + "tt" + ">" + myArr[i][7] + "</td>" +
"</tr>");
const row = document.getElementById(`${i}`);
row.addEventListener('click', function(evt) { /// we are using a viewer api property to isolate the
_this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));
});
}
To use onClick, it will become:
const row = document.getElementById(`${i}`);
row.onClick = function(evt) { /// we are using a viewer api property to isolate the
_this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));
});
Lastly, why not just use jQuery only? The jquey.on can help bind events to dynamically created items, so that the click event will be delegated to any tr element in the table, even if it's added after you bound the event handler.
var myTable = $('.my-table');
var myArr = [[1,2,3,4,5,6,7], [1,2,3,4,5,6,7]]; //matrix of object values
myTable.on('click', 'tr', function() {
_this.viewer.isolate(_this.modelData.getIds(myArrNames[i][1], item[0]._model.label));
});
for (var i = 0; i < myArr.length; i++) {
myTable.append("<tr id=" + i + ">" +
" <td>" + myArr[i][0] + "</td>" +
"<td>" + myArr[i][1] + "</td>" +
"<td>" + myArr[i][2] + "</td>" +
"<td>" + myArr[i][3] + "</td>" +
"<td>" + myArr[i][4] + "</td>" +
"<td>" + myArr[i][5] + "</td>" +
"<td>" + myArr[i][6] + "</td>" +
"<td id=" + "tt" + ">" + myArr[i][7] + "</td>" +
"</tr>");
}
ref: https://stackoverflow.com/a/15420578

How to delete rows other than a random row on a table(Javascript)?

I get data from the user and put it into the table by collating, I want to show a random line from the table I want to delete the other rows
function bilgi(){
var random = Math.floor(Math.random() * (allobjs.length - 1) ) + 1;
if (allobjs[random].id != 'blank'){
allobjs[random].animate({fill: 'rgb(19, 167, 236)'}, 1000);
$(function() {
$.getJSON('/static/yer.json', function(data) {
var deger = $("input[name=deger]").val()
var al = deger.split(",")
$.each(data, function(i, f) {
if(f.plaka == random){
var tblRow = "<tr>" +
"<td>" + "<img class='aaa'src='/static/bayrak.jpg' alt='' />" + "</td>" +
"<td>" + deger + "</td>" +
"<td>" + f.yerler + "</td>" +
"<td>" + f.bolge + "</td>" +
"<td>" + f.ili + "</td>" +
"<td>" + f.teskilati + "</td>" +
"<td>" + f.acm + "</td>" +
"</tr>"
$("tbody").append(tblRow);
}
});
$("tbody tr").hide()
var toplam= $("tbody tr").size()
ratgel=Math.floor(Math.random() * toplam);
$("tbody tr").eq(ratgel).show(1000)
});
});
}}

In javascript add class NOSHOW to each tr you want to hide Then using css .NOSHOW{display:none;} If you want a complete solution show your html.
something like the following might work:
At the start of your function add the following:
var tr = getElementsByTagName('tr');
for(var i = 0; i < tr.length;i++){
tr[i].className += "noshow";
}
then in you html add:
<style>
.noshow{
display:none;
}
</style>
This should work as you then append the row you want to the end of the table.
Later, when you want to display the entire table again you can use:
element.classList.remove("noshow");

splice in javascript change values of my other objects

NOTE! this is for an extra credit assignment, so I am not looking for code re-write but rather guidance in what I am doing wrong. I have gone through my code several times and I feel like I am just missing something very minor. I have completed it fully with the exception of the following error:
I created an array of objects.
Everything starts off fine. I can create objects and they are added to the array and successfully displayed on my screen with correct values.
The trouble arises when I delete an object from the array. It does delete this object and removes it from my displayed list, but suddenly all the remaining objects get new values. These new values match those of the LAST object I added to the array. I need them to retain their original values!
var tableContent = document.getElementById("tableContent");
var tableString = " ";
var counter = 0;
var courseArray = [];
tableContent.innerHTML = tableString;
function Course(number, title, hours, prereq) {
this.number = number;
this.title = title;
this.hours = hours;
this.prereq = prereq;
}
function createCourse() {
var number = document.getElementById("number-field");
var title = document.getElementById("title-field");
var hours = document.getElementById("hours-field");
var prereq = document.getElementById("prereq-field");
courseArray.push(new Course(number, title, hours, prereq));
buildCourseTableBody();
}
function buildCourseTableBody() {
tableString += "<tr>" +
"<td>" + counter + "</td>" +
"<td>" + courseArray[counter].number.value + "</td>" +
"<td>" + courseArray[counter].title.value + "</td>" +
"<td>" + courseArray[counter].hours.value + "</td>" +
"<td>" + courseArray[counter].prereq.value + "</td>" +
"<td><button id='delete' onClick='deleteCourse(" + counter + ")'><img id=counter src='../image/delete.png' alt='delete course'></button></td>" +
"</tr>";
counter++;
tableContent.innerHTML = tableString;
}
function deleteCourse(counterIndex) {
courseArray.splice(counterIndex, 1);
counter--;
tableString = "";
for (var i = 0; i < courseArray.length; i++) {
tableString += "<tr>" +
"<td>" + i + "</td>" +
"<td>" + courseArray[i].number.value + "</td>" +
"<td>" + courseArray[i].title.value + "</td>" +
"<td>" + courseArray[i].hours.value + "</td>" +
"<td>" + courseArray[i].prereq.value + "</td>" +
"<td><button id='delete' onClick='deleteCourse(" + i + ")'><img id=counter src='../image/delete.png' alt='delete course'></button></td>" +
"</tr>";
}
and HTML code(everything in main, which is wrapped in body. js file is included):
<main id="main-index">
<h1 id="page-caption">CS Department Course Catalog</h1>
<div id="course-list">
<p id="course-list-caption">Course List</p>
<table>
<thead>
<tr>
<th>Count</th>
<th>Number</th>
<th>Title</th>
<th>Hours</th>
<th>Prereq</th>
<th>Action</th>
</tr>
</thead>
<tbody id="tableContent">
</tbody>
</table>
</div>
<div id="course-edit">
<p><input id="number-field" placeholder="Course #, e.g. CS234"></p>
<p><input id="title-field" placeholder="Course title, e.g. Database and Wed Systems Development"></p>
<p><input id="hours-field" placeholder="Credit hours, e.g. 3.0"></p>
<p><input id="prereq-field" placeholder="Course prereqs, e.g. CS150, CS111"></p>
<p><button id="add" onClick="createCourse()">+</button></p>
</div>
</main>

Your error is in createCourse. You are assigning the HTML-Elements instead of their value.
function createCourse() {
var number = document.getElementById("number-field").value;
var title = document.getElementById("title-field").value;
var hours = document.getElementById("hours-field").value;
var prereq = document.getElementById("prereq-field").value;
courseArray.push(new Course(number, title, hours, prereq));
buildCourseTableBody();
}
The class course will hold a reference to the element itself. Like that your functions which generate the table itself, will always get the most current value of the input boxes.
Notice:
Don't forget to adapt buildCourseTableBody and deleteCourse.

J Query pagination plugin not working for dynamically added rows in html table

I'm spending for more than 6 hours for this issue. it would be better, if any one help me to solve this issue.
I'm trying to use jquery pagination plugin in dynamically added html table. But its not working. it gives exception. however its working fine for static html table.
Here is my code
<link href="../assets/css/jquery.dataTables.min.css" rel="stylesheet" />
<script src="../assets/js/jquery.dataTables.min.js.js"></script>
<table id="productTable" >
<thead class="alert-info text">
<tr>
<th><strong>Edit</strong></th>
<th><strong>Product Name</strong></th>
<th><strong>Introduction Date</strong></th>
<th><strong>URL</strong></th>
<th><strong>Delete</strong></th>
</tr>
</thead>
Jquery is
function bindDate(res) {
var d = res;
$("#productTable tbody").remove();
if ($("#productTable tbody").length == 0) {
$("#productTable").append("<tbody></tbody>");
}
if (d != null) {
for (var i = 0; i < d.length; i++) {
$("#productTable tbody").append(
"<tr>" +
"<td onclick='edit(this);' data-toggle='modal' data-target='#myModal'>" + "<img src='../assets/imgs/edit.ico' Height='30' Width='30'/>" + "</td>" +
"<td style='display:none;'>" + d[i].ID + "</td>" +
"<td>" + d[i].ProductName + "</td>" +
"<td>" + d[i].IntroDate + "</td>" +
"<td>" + d[i].URL + "</td>" +
"<td onclick='pdelete(this);'>" + "<img src='../assets/imgs/delete.png' Height='30' Width='30'/>" + "</td>" +
"</tr>"
);
}
}
$('#productTable').DataTable();
}

that is happening because jQuery events are not bound to dynamically added elements by default.. You need to use a concept called Event Delegation where you will have to have to make sure the table is dynamically added to a static element so u can use it as a reference.
$('body').on('event', '#productTable', function(event){
//Replace event with the right event, like click or something...
});
Find out more here Event Delegation and .on() Method. Also do some googling hope this helps

How to edit table html?

I am building a page with a table, with the ability to add, edit, and delete. I have the add and delete functionality working but not the edit or save. Can anyone tell what is wrong with these functions?
Whenever I click on the edit button it will delete the row (Select check box it will either delete or edit).
Here is my code:
<table id="packageTable">
<thead>
<tr>
<th>Select</th>
<th>Make</th>
<th>Model</th>
<th>SKU#</th>
<th>Price</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
rowNew = 1;
removeRow = -1;
function tableColumn(){
row = rowNew;
if (removeRow >0){
editList();
}else{
var make = $("#make").val();
var modal = $("#model").val();
var sNumber = $("#sNumber").val();
var mPrice = $("#mPrice").val();
var newCol = "<tr id = 'newCol" + row +"'>" +
"<td><input type = 'checkbox'>"+ "</td>" +
"<td id\"mChoice" + row + "\">"+ make + "</td>" +
"<td id\"m0Choice" + row + "\">" + modal +"</td>" +
"<td id\"skChoice" + row +"\">" + sNumber +"</td>"+
"<td id\"prChoice" + row +"\">" + mPrice +"</td>" +
"<td><button onclick ='eRow(" + row + ")'>Edit</button>" +
"<td><button onclick ='delete(" + row + ")'>Delete</button>" +
"</tr>";
$("#packageTable").append(newCol);
rowNew++;
$("#make").val("");
$("#model").val("");
$("#sNumber").val("");
$("#mPrice").val("");
}
}
function eRow(row) {
$("#make").val($('#mChoice'+row).html());
$("#model").val($('#m0Choice'+row).html());
$("#sNumber").val($('#skChoice'+row).html());
$("#mPrice").val($('#prChoice'+row).html());
remove = row;
}
function editsSave(){
$('"#mChoice' + removeRow).html($('#make').val());
$('"#m0Choice' + removeRow).html($('#model').val());
$('"#sNumber1' + removeRow).html($('#sNumber').val());
$('"#mPrice' + removeRow).html($('#mPrice').val());
remove = -1;
}