Develop Reference

Connect button to display data in a html table using Javascript

I have a dynamically generated table that uses array of JS objects. I'm also adding a "View details" on each row. What I need is to be able to display data from the same array of objects in a different table.
I tried to add event listener to the buttons, but they either iterate through all of the rows or don't display anything
function drawTable(tbody) {
var tr, td;
tbody = document.getElementById(tbody);
for (var i = 0; i < products.length; i++) // loop through data source
{
tr = tbody.insertRow(tbody.rows.length);
td = tr.insertCell(tr.cells.length);
td.innerHTML = products[i].ProductName;
td = tr.insertCell(tr.cells.length);
td.innerHTML = products[i].UnitsInStock;
td = tr.insertCell(tr.cells.length);
// View Details button
td = tr.insertCell(tr.cells.length);
button = document.createElement('button');
button.textContent = ('View Details')
td.appendChild(button)
}
}
<div class="table-wrapper">
<table id="display-table" class="fl-table">
<thead>
<tr>
<th>Product Name</th>
<th>Units In Stock</th>
<th>View Details</th>
</tr>
</thead>
<tbody id="table-data">
</tbody>
</table>
</div>
<h2>Product Details</h2>
<div class="table-wrapper">
<table class="fl-table">
<thead>
<tr>
<th>Product Name</th>
<th>Product Category</th>
<th>Product Description</th>
</tr>
</thead>
<tbody id="table-details">
</tbody>
</table>
</div>

Below button.textContent = ('View Details') add
button.onclick = (n=> event=> {
console.log('click on', products[n]) // you handler here
})(i); // set current loop "i" as parameter "n" value
we wrap function event=>... in n=>... to pass current i value - without this the i would be set always to last iteration value.

How to add data on selected cell rows in javascript?

I'm doing a web-based POS on PHP. There are two tables; the purpose of the first table is to fetch the products from search box from the database.If the products are available, I will mark the checkbox,click the 'Enter' Button and transfer it to the second table.I'd watch tutorials how to transfer row data from another table but my problem is I can only transfer the row in the first table and I want to add another data on cell because its lacking information.
I'll add picture of what I've done.
https://i.stack.imgur.com/rdSSf.png
function tab1_to_tab2()
{
var table1 = document.getElementById("table1"),
table2 = document.getElementById("table2"),
checkboxes = document.getElementsByName("tab1");
console.log("Val1 = " + checkboxes.length);
for(var i = 0; i < checkboxes.length; i++)
if (checkboxes[i].checked) {
var newRow = table2.insertRow(table2.length),
cell1 = newRow.insertCell(0),
cell2 = newRow.insertCell(1),
cell3 = newRow.insertCell(2),
cell4 = newRow.insertCell(3);
cell1.innerHTML = table1.rows[i+1].cells[0].innerHTML;
cell2.innerHTML = table1.rows[i+1].cells[1].innerHTML;
cell3.innerHTML = table1.rows[i+1].cells[2].innerHTML;
cell4.innerHTML = table1.rows[i+1].cells[3].innerHTML;
console.log(checkboxes.length);
}
}
I expect that column 'Qty','Subtotal' and 'Action' will be filled after I transfer rows from first table.

There are many ways. You can do like this also,
function add(){
$('input:checked[name=actionBox]').each(function() {
var product = $(this).attr('data-product');
var price = $(this).attr('data-price');
$('#bill').append("<tr><td>"+product+"</td><td>"+price+"</td><tr>");
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table border>
<tr>
<th>Item</th>
<th>Price</th>
<th>action</th>
</tr>
<tr>
<td>Sample product 1</td>
<td>200.00</td>
<td><input type='checkbox' name='actionBox' data-product='Sample product 1' data-price='200.00'>
</tr>
<tr>
<td>Sample product 1</td>
<td>200.00</td>
<td><input type='checkbox' name='actionBox' data-product='Sample product 2' data-price='300.00'>
</tr>
</table>
<br>
<button onclick='add()'>Enter</button>
<br><br>
<table border>
<tr>
<th>Description</th>
<th>Price</th>
</tr>
<tbody id='bill'>
</tbody>
</table>

How can I change my code into clickable row from input checkbox row in jquery?

I have a table and the data in this table is from database. I want to click this row and transfer it to other table. I can transfer this row using input checkbox. I'd realize that it will be easy and convenient to transfer the rows by just clicking it without checkbox. I have a hard time converting it to a clickable instead of checkbox.
I tried using this code
$(document).ready(function() {
$( "#table1 tbody tr" ).on( "click", function( event ) {
var product = $(this).attr('data-product');
var price = $(this).attr('data-price');
var barcode = $(this).attr('data-barcode');
var unit = $(this).attr('data-unt');
var qty = prompt("Enter number of items",1);
var total = qty*price;
$('#tableData').append("<tr><td>"+barcode+"</td><td>"+product+"</td><td>₱"+price+"</td><td>"+unit+"</td><td>"+qty+"</td><td>₱"+total+"</td><tr>");});
This is my jquery that I wanted to convert into clickable code.
function add(){
$('input:checked[name=tab1]').each(function() {
var product = $(this).attr('data-product');
var price = $(this).attr('data-price');
var barcode = $(this).attr('data-barcode');
var unit = $(this).attr('data-unt');
var qty = prompt("Enter number of items",1);
var total = qty*price;
$('#tableData').append("<tr><td>"+barcode+"</td><td>"+product+"</td><td>₱"+price+"</td><td>"+unit+"</td><td>"+qty+"</td><td>₱"+total+"</td><tr>"); });}
My PHP code.
<?php
include('server/connection.php');
if (isset($_POST['products'])){
$name = mysqli_real_escape_string($db,$_POST['products']);
$num = 1;
$show = "SELECT * FROM products WHERE product_name LIKE '$name%' ";
$query = mysqli_query($db,$show);
if(mysqli_num_rows($query)>0){
while($row = mysqli_fetch_array($query)){
$total = $num*$row['sell_price'];
echo "<tr id='sas'><td>".$row['id']."</td><td>".$row['product_name']."</td>";
echo "<td>₱".$row['sell_price']."</td>";
echo "<td>".$row['unit']."</td>";
echo "<td>".$row['quantity']."</td>";
echo "<td><input type='checkbox' name='tab1' data-barcode='".$row['id']."' data-product='".$row['product_name']."' data-price='".$row['sell_price']."' data-unt='".$row['unit']."' data-qty='".$num."' data-total='".$total."'/></td></tr>";
}
}
else{
echo "<td></td><td>No Products found!</td><td></td>";
}
}
My Table
<table id="table1">
<thead>
<tr>
<td>Barcode</td>
<td>Product Name</td>
<td>Price</td>
<td>Unit</td>
<td>Stocks</td>
<td>Action</td>
</tr>
</thead>
<tbody id="products">
</tbody>
</table>
<table id="table2">
<thead>
<tr>
<th>Barcode</th>
<th>Description</th>
<th>Price</th>
<th>Unit</th>
<th>Qty</th>
<th>Sub.Total</th>
</tr>
</thead>
<tbody id="tableData">
</tbody>
</table>
I expect by just clicking the row it will automatically transfer to the table2 with a dialog box using prompt that will ask for quantity of a product then it will be printed to the second table along with the entire row.
This is my UI with css.

You are on the right way, just fix JS selectors using $(this) and formating the price...
$("#table1 .js-add").on("click", function() {
var target = $(this);
var product = target.attr('data-product');
var price = target.attr('data-price');
var barcode = target.attr('data-barcode');
var unit = target.attr('data-unt');
var qty = prompt("Enter number of items", 1);
var total = qty * price;
$('#tableData').append("<tr><td>" + barcode + "</td><td>" + product + "</td><td>" + price + "</td><td>" + unit + "</td><td>" + qty + "</td><td>" + total.toFixed(2) + "</td><tr>");
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<table id="table1" class="table">
<thead>
<tr>
<th>Barcode</th>
<th>Product Name</th>
<th>Price</th>
<th>Unit</th>
<th>Stocks</th>
<th>Action</th>
</tr>
</thead>
<tbody id="products">
<tr>
<td>123412</td>
<td>Test</td>
<td>12.99</td>
<td>1</td>
<td>10</td>
<td>
<input name='tab1' type="checkbox" class='js-add' data-barcode="123412" data-product="Test" data-price="12.99" data-unt="1"/>
</td>
</tr>
</tbody>
</table>
<br>
<table id="table2" class="table">
<thead>
<tr>
<th>Barcode</th>
<th>Description</th>
<th>Price</th>
<th>Unit</th>
<th>Qty</th>
<th>Sub.Total</th>
</tr>
</thead>
<tbody id="tableData">
</tbody>
</table>

You need to use event.target instead of this in the function.
$(document).ready(function() {
$( "#table1 tbody tr" ).on( "click", function( event ) {
var target = event.target;
var product = target.attr('data-product');
var price = target.attr('data-price');
var barcode = target.attr('data-barcode');
var unit = target.attr('data-unt');
var qty = prompt("Enter number of items",1);
var total = qty*price;
$('#tableData').append("<tr><td>"+barcode+"</td><td>"+product+"</td><td>₱"+price+"</td><td>"+unit+"</td><td>"+qty+"</td><td>₱"+total+"</td><tr>");});

On tr click event, you are using data-product and other selectors. data-product is not defined for tr. You have to add data-product attribute for each row. You can refer this - JQuery: Find (the index of) a row with a specific data attribute value

AngularJS tags doesn't work in innerHTML

In my code i've a table which is populated by ng-repeat tag., and that's ok. By clicking a button, a row is added to this table by innerHTML. This new row should contain 2 cells:
select
input-field + a confirm button
I want to populate the select with ng-option tag, and this is not going to happend.
The angularJS tags (and whatever script or function i try to insert) grafted with innerHTML do not work.
methods is a JSON containing 3 payment methods (PayPal, Postepay, Skrill).
payment_methods contains the user payment methods (method + notes).
If i try to add the innerHTML code simply in the html page, it all works, so there's no bug in http requests or angularJS tags.
Any solution? Thanks.
$http.get('/api/v1/getUserPaymentMethods', {params: {"idUser": myService.get()}}).success(function (data) {
$scope.payment_methods = data;
});
document.getElementById('insert-btn').onclick = function () {
var table = document.getElementById('table');
var row = table.insertRow(table.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML =
"<select ng-model=\"selectedMethod\" " +
"ng-options=\"method.method for method in methods\">" +
"<option value=\"\" disabled selected>Method</option>" +
"</select>";
cell2.innerHTML =
"<div class=\"input-field\" style=\"display:inline-block; width: 87%\">" +
"<input type=\"text\" ng-model=\"notes\" id=\"notes\">" +
"</div>" +
"<div style=\"display:inline-block; width: 10%\"> " +
"<button id=\"confirm-btn\">done</button>" +
"</div>";
$http.get('/api/v1/getMethods').success(function (data) {
$scope.methods = data;
});
}
}
document.getElementById('confirm-btn').onclick = function () {
// save data
}
HTML:
<table id="table">
<thead>
<tr>
<th style="width: 30%;" data-field="id_payment_method">Method</th>
<th data-field="notes">Notes</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="payment_method in payment_methods">
<td>{{payment_method.id_payment_method}}</td>
<td>{{payment_method.notes}}</td>
</tr>
</tbody>
<div style="bottom: 50px; right: 50px;">
<button id="insert-btn">add payment method</button>
</div>

With Angular you don't have to build html manually, but do something like this:
<table id="table">
<thead>
<tr>
<th style="width: 30%;" data-field="id_payment_method">Method</th>
<th data-field="notes">Notes</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="payment_method in payment_methods">
<td>{{payment_method.id_payment_method}}</td>
<td>{{payment_method.notes}}</td>
</tr>
<tr>
<td>
<select ng-model="selectedMethod" ng-options="method.method for method in methods" >
</select>
</td>
<td>
<input type="text" ng-model="notes" id="notes"/>
</td>
</tr>
</tbody>

How to Get InnerHTML for Table Cell instead of an object or NaN

I am attempting to create a string that contains all of the data within an HTML table using JavaScript (open to changing to JQuery). By using this method below, I receive an NaN value, instead of the data (numbers).
function Ard() {
var table = document.getElementById("tblData");
var dataStr = "";
for (var i = 0, row; row = table.rows[i]; i++) {
for (var j = 0, col; col = row.cells[j]; j++) {
var toAdd = col;
dataStr += toAdd;
}
}
};
I have also tried a jQuery method but it only returned an HTML object. It should be noted that when printing the 'col' value to the console, the data is collected properly (actual values).
The table I'm using is editable by the user, but it saves as a standard HTML table. Here is the basic code for the table below if it helps solve the problem.
<table id="tblData" class="table table-hover">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Treatment Number</th>
<th>Cell Number</th>
<th>Waste Container Number</th>
</tr>
</thead>
<tbody></tbody>
</table>
Any ideas towards how to get the innerHTML and add it properly to the string?
I would also like to do this with a row by column loop (set of two for or each loops maybe?) so that I know what column I'm grabbing from.

Since you are OK to use jquery,
var dataStr = "";
$('#tblData > tbody').each(function(e) {
dataStr += $(this).text();
});
console.log(dataStr);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tblData" class="table table-hover">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Treatment Number</th>
<th>Cell Number</th>
<th>Waste Container Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>10101</td>
<td>20202</td>
<td>30303</td>
<td>40404</td>
<td>50505</td>
</tr>
<tr>
<td>wowowo</td>
<td>sksksk</td>
<td>alalal</td>
<td>qpqpqp</td>
<td>zmzmzm</td>
</tr>
</tbody>
</table>
If you want the dataStr to have the <td> tags also, you should use,
dataStr += $(this).html()
EDIT
If you also want to access the current column index, you can use this. But here, the dataStr would finally contain a single line string concatenating all the texts inside <td> tags.
$('#tblData > tbody > tr > td').each(function(e) {
var currentColNo = $(this).index();
dataStr += $(this).html();
});

With jQuery you could select all rows and the iterate over them and get the text:
var str = "", values = [];
$("#tblData").find('tbody').find('tr').each(function() {
//You can concatenate a string or push the values to an array
str += $(this).text();
values.push($(this).text());
});
console.log(str, values);

You can do it with pure js:
function Ard() {
var table = document.querySelectorAll("#tblData tr th");
var dataStr = "";
for (var i = 0; i < table.length; i++) {
dataStr += table[i].innerHTML;
}
};
JSFiddle Demo

This will get you all text from the table <td>s and post it into a textarea (just for demonstration purposes):
$('#out').val($('#tblData td').text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblData" class="table table-hover">
<thead>
<tr>
<th>Date</th>
<th>Time</th>
<th>Treatment Number</th>
<th>Cell Number</th>
<th>Waste Container Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>some</td><td>extra</td><td>data</td>
</tr>
</tbody>
</table>
<textarea id="out" rows=10 cols=60></textarea>
Update:
If you "just" want to put the <td> contents into a single variable you could do:
var str=$('#tblData td').text()
I extended your example so you will actually get a result.