I have a CSV file which is always in the following format
COL A | COL B | COL C |
---------------------------------------
Email | First Name | Last Name |
So on each row, column A contains the email, column B the first name and column C the last name.
What I am attempting to do is read this CSV file and inject some of the data within a modal I am displaying. At the moment I have come up with the following
$(function () {
$("#preview-btn").bind("click", function () {
var regex = /^([a-zA-Z0-9\s\S_\\.\-:])+(.csv|.txt)$/;
if (regex.test($("#fileOne").val().toLowerCase())) {
if (typeof (FileReader) != "undefined") {
var reader = new FileReader();
reader.onload = function (e) {
var rows = e.target.result.split("\n");
for (var i = 0; i < 1; i++) {
var cells = rows[i].split(",");
$('#myModal .modal-body').load('./emailTemplate.html', function(){
$(this).find("#fName").append(cells[1]);
$(this).find("#lName").append(cells[2]);
});
}
$('#myModal').modal('show');
};
reader.readAsText($("#fileOne")[0].files[0]);
} else {
alert("This browser does not support HTML5.");
}
} else {
alert("Please upload a valid CSV file.");
}
});
});
So the function splits the rows within the CSV, loads a HTML template, and injects the first name and last name into the html for row 1.
So the above works fine. The problem I am having is that within my model I have the following buttons
<button type="button" class="btn btn-default btn-prev">Prev</button>
<button type="button" class="btn btn-default btn-next">Next</button>
What I am trying to do is if Next is clicked, to display the data from the next row, opposite for the Prev button. I am having issues integrating these 2 button events with the above.
With what I currently have in place, how can I step through the rows within the CSV?
Thanks
Here is a pseudo simple of how to manage the next/prev buttons.
The key is to declare a pointer for the current row. So when user clicks next the pointer will "move" to next (e.g. 0 to 1 etc.) than call the function which parse the row and display it.
If something is not clear, let me know.
var current = 0;
var rows = $('textarea').val().split('\n');
console.log(rows);
function applyRow() {
console.log(rows[current]);
var cells = rows[current].split(",");
$("#fName").html(cells[0]);
$("#lName").html(cells[1]);
}
applyRow();
$('.btn-next').click(function(){
current++;
applyRow();
});
$('.btn-prev').click(function(){
current--;
applyRow();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea>
john,doe
john1,doe1
john2,doe2
</textarea>
<table>
<tr>
<td id="fName"></td>
<td id="lName"></td>
</tr>
</table>
<hr />
<button type="button" class="btn btn-default btn-prev">Prev</button>
<button type="button" class="btn btn-default btn-next">Next</button>
If i understand you code right, you only load the first row
for (var i = 0; i < 1; i++) { ... }
Just load all rows this way and insert them into a table. With CSS you hide all rows of this table by default. When loading is done set a global variable var i=1. Add a function:
function updateRows(){
$('#tableId tr').hide()`;
$('#tableId tr:nth-child(i)').show()`;
}
And you buttons manipulate the i and then call updateRows()
Related
Basically, I am comparing the data in two sheets, so I want to show a dialog box with the data of two cells from two sheets and two buttons for the user to select which data cell is correct. Then I would like to loop through all the data that differed from one sheet to the other.
How can I show a dialog with the data, make the script wait for the button to be pressed and then go to the next item on the list?
This is the script that I have so far:
<script>
function myfunction() {
google.script.run.withSuccessHandler(qcComparison).qcGetData();
}
function qcComparison(sheetsData) {
var sheet1 = sheetsData["sheet1"];
var sheet2 = sheetsData["sheet2"];
var lastRow = sheet1.length;
var lastCol = sheet1[0].length
var headers = sheet1[0];
for (var row=1; row<=lastRow; row++) {
for (var col=0; col<lastCol; col++) {
// Do the comparison one cell at a time
var value1 = sheet1[row][col];
var value2 = sheet1[row][col];
if (value1 != value2) {
// Do something
}
}
}
}
document.addEventListener("DOMContentLoaded", myfunction());
</script>
And this is the HTML dialog that I wan to update with the data:
<table id="qc-table" class="qc-table">
<tr>
<td><button id="sheet-1" class="btn btn-primary btn-sm">Sheet 1</button></td>
<td class="profile-data"><p id="sheet-1-profile">Data from cell 1</p></td>
</tr>
<tr>
<td><button id="sheet-2" class="btn btn-secondary btn-sm">Sheet 2</button></td>
<td class="profile-data"><p id="sheet-2-profile">Data form cell 2</p></td>
</tr>
</table>
To display a dialog box when the values are not equal you can call an HTML service to create the HTML within Apps Script and then use getUi().showModalDialog.
EDIT: for loops aren't the best solution since they will continue to execute while the dialog box is open. It is better to use recursion in this case.
Sample code below:
var sheet1 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet1");
var sheet2 = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("Sheet2");
var range1 = sheet1.getRange(1,1,sheet1.getLastRow(),sheet1.getLastColumn()).getValues();
var range2 = sheet2.getRange(1,1,sheet2.getLastRow(),sheet2.getLastColumn()).getValues();
function qcComparison() {
var row = 0, col = 0;
compare(row, col);
}
function compare(row, col) {
Logger.log(row, col);
if (range1[row][col] != range2[row][col]) {
Logger.log("Different values!");
var html = HtmlService.createTemplateFromFile("page");
html.row = row;
html.col = col;
html.cell1 = range1[row][col];
html.cell2 = range2[row][col];
var htmlOutput = html.evaluate();
SpreadsheetApp.getUi().showModalDialog(htmlOutput, 'Choice');
}
else {
compareNext(row, col);
}
}
function compareNext(row, col) {
Logger.log("Compare next", row, col);
if (col < range1[row].length) {
if (row < range1[col].length-1) {
compare(++row, col);
}
else {
row = 0;
compare(row, ++col);
}
}
return;
}
The HTML is changed to accept values from Apps Script, sample code below:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
</head>
<body>
<table id="qc-table" class="qc-table">
<tr>
<td>
<button id="sheet-1" class="btn btn-primary btn-sm" onclick="google.script.run.setSheet1(<?=row?>,<?=col?>,<?=cell1?>);google.script.host.close();">Sheet 1</button></td>
<td class="profile-data"><p id="sheet-1-profile">Data from Sheet 1: <?=cell1?> </p></td>
</tr>
<tr>
<td><button id="sheet-2" class="btn btn-secondary btn-sm" onclick="google.script.run.setSheet2(<?=row?>,<?=col?>,<?=cell2?>);google.script.host.close();">Sheet 2</button></td>
<td class="profile-data"><p id="sheet-2-profile">Data from Sheet 2: <?=cell2?> </p></td>
</tr>
</table>
</body>
</html>
Note that the script now runs functions upon click of Sheet 1 or Sheet 2 to update the values:
function setSheet1(row, col, value) {
sheet2.getRange(++row,++col).setValue(value);
compareNext(--row, --col);
}
function setSheet2(row, col, value) {
sheet1.getRange(++row,++col).setValue(value);
compareNext(--row, --col);
}
References:
showModalDialog()
Templated HTML
Communication between HTML and Apps Script
I have a list of items, generated by PHP that is quite long. I don't want to show this list in a dropdown menu. Instead, I'm using jquery to have users type in a textbox, then filtering from that list based on user input:
Example HTML:
<table id = "table">
<tr>
<td>Select an animal:</td>
<td><input type="text" id = "animal" name="animal" placeholder="Choose an animal...">
<td id="animals">
<span class="animal_list">
<p onclick="insertme('horse')">Horse</p>
</span>
<span class="animal_list">
<p onclick="insertme('goat')">Goat</p>
</span>
<span class="animal_list">
<p onclick="insertme('sheep')">Sheep</p>
</span>
<span class="animal_list">
<p onclick="insertme('cow')">Cow</p>
</span>
</div>
</tr>
</table>
And the CSS to hide the list:
#animals .animal_list {
display: none;
}
JQuery filter:
$(document).ready(function(){
$('#animal').keyup(function() {
var search = this.value.split(';');
$('.animal_list').each(function(index, element) {
var text = $(element).text().toLowerCase();
var show = search.filter(function(e) {
return e != '' && text.indexOf(e.toLowerCase()) >= 0;
}).length > 0;
$(element).toggle(show);
});
});
});
And here's some JavaScript that allows users to click on the option to input it in the textbox:
function insertme(label){
document.getElementById('animal').value = label;
//when selected, hide all of variable 1 list
var list = document.getElementsByClassName("animal_list");
for (var i = 0; i < list.length; i++) {
list[i].style.display = "none";
};
}
This works great as is. However, for my application, the users need to be able to duplicate rows dynamically. My idea was to copy the html from the div (the "animals" div) and repeat it for every row:
function add_row(ID) {
var table = document.getElementById(ID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
// insert a row label
// insert a row label
var col1 = row.insertCell(0);
col1.innerHTML = "Select an animal:"
// second column...
// insert a search box
var col2 = row.insertCell(1);
var element = document.createElement("input");
element.type = "text";
element.name = "animal";
col2.appendChild(element);
// get the existing elements
var existing_list = document.getElementById("animals");
// create new object (so I can delete the first)
var list_copy = existing_list
// delete old list so it's not duplicating jquery effect across all rows
existing_list.remove();
//append list to new row
col2.appendChild(list_copy);
}
However, this doesn't seem to work. The second row doesn't filter based on the list anymore. According to my development console, the div does indeed get deleted from the first row, then inserted in the second row, but the list of items is not displaying based on user input. In other words, the JQuery filtering stops working at the second row.
Any ideas how to fix this? I'm happy to abandon my approach if there's a better way (i.e., better than copying a div to a new row and deleting the div associated with the original row).
(P.S. sorry for slovenly mixing JavaScript with JQuery. I'm a bit of a noob with both).
Putting it all together:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
function add_row(ID) {
var table = document.getElementById(ID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
// insert a row label
var col1 = row.insertCell(0);
col1.innerHTML = "Select an animal:"
// second column...
// insert a search box
var col2 = row.insertCell(1);
var element = document.createElement("input");
element.type = "text";
element.name = "animal";
col2.appendChild(element);
// get the existing elements
var existing_list = document.getElementById("animals");
// create new object (so I can delete the first)
var list_copy = existing_list
// delete old list so it's not duplicating jquery effect across all rows
existing_list.remove();
//append list to new row
col2.appendChild(list_copy);
}
function insertme(label){
document.getElementById('animal').value = label;
//when selected, hide all of variable 1 list
var list = document.getElementsByClassName("animal_list");
for (var i = 0; i < list.length; i++) {
list[i].style.display = "none";
};
}
$(document).ready(function(){
$('#animal').keyup(function() {
var search = this.value.split(';');
$('.animal_list').each(function(index, element) {
var text = $(element).text().toLowerCase();
var show = search.filter(function(e) {
return e != '' && text.indexOf(e.toLowerCase()) >= 0;
}).length > 0;
$(element).toggle(show);
});
});
});
</script>
<style type="text/css">
#animals .animal_list {
display: none;
}
</style>
</head>
<body>
<table id = "table">
<tr>
<td>Select an animal:</td>
<td><input type="text" id = "animal" name="animal" placeholder="Choose an animal...">
<td id="animals">
<span class="animal_list">
<p onclick="insertme('horse')">Horse</p>
</span>
<span class="animal_list">
<p onclick="insertme('goat')">Goat</p>
</span>
<span class="animal_list">
<p onclick="insertme('sheep')">Sheep</p>
</span>
<span class="animal_list">
<p onclick="insertme('cow')">Cow</p>
</span>
</div>
</tr>
</table>
<input type="button" onclick="add_row('table')" value = "Add Row">
</body>
</html>
The HTML for each row was incorrect.
Unclosed tags and hanging end tags. I've adjusted it so that the cells are consistent.
id must be unique, so I've changed it to be class="animals", which may be helpful in the future for DOM selection.
changed CSS style #animals -> .animals
It's important that each row is encapsulated, self-contained, and consistent so that DOM traversal can be done reliably. This allows for code related to each DOM node to be self-contained, so you can treat them like components. It will also help with CSS styling.
With this organization, all you have to do is cloneNode(true) the row to add a new one, and for the events traverse within the row to select the DOM nodes you need to target.
I've used Event Delegation to attach a single event to the table that targets every input[name="animals"] node inside it. So all new rows get targeted correctly.
Since all the DOM traversal and event handlers are self-contained for each row, the same event handler can be reused for all nodes.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script type="text/javascript">
function add_row(ID) {
var table = document.getElementById(ID);
var rowCount = table.rows.length;
// (full) clone the last row and append to table
table.appendChild(table.rows[rowCount - 1].cloneNode(true))
}
function insertme(el, label) {
var row = $(el).closest('tr')
row.find('input[name="animal"]')[0].value = label;
//when selected, hide all of variable 1 list
var list = row[0].getElementsByClassName("animal_list");
for (var i = 0; i < list.length; i++) {
list[i].style.display = "none";
};
}
$(document).ready(function() {
// event delegation on table for all inputs with name "animal"
$('#table').on('keyup', 'input[name="animal"]', function(event) {
var search = this.value.split(';');
// traverse DOM to find containing row, then search for animal list nodes
$(this).closest('tr').find('.animal_list').each(function(index, element) {
var text = $(element).text().toLowerCase();
var show = search.filter(function(e) {
return e != '' && text.indexOf(e.toLowerCase()) >= 0;
}).length > 0;
$(element).toggle(show);
});
});
});
</script>
<style type="text/css">
.animals .animal_list {
display: none;
}
</style>
</head>
<body>
<table id="table">
<tr>
<td>Select an animal:</td>
<td><input type="text" name="animal" placeholder="Choose an animal..."></td>
<td class="animals">
<span class="animal_list">
<p onclick="insertme(this,'horse')">Horse</p>
</span>
<span class="animal_list">
<p onclick="insertme(this,'goat')">Goat</p>
</span>
<span class="animal_list">
<p onclick="insertme(this,'sheep')">Sheep</p>
</span>
<span class="animal_list">
<p onclick="insertme(this,'cow')">Cow</p>
</span>
</td>
</tr>
</table>
<input type="button" onclick="add_row('table')" value="Add Row">
</body>
</html>
I have a nodes table with 6 columns.
On the first column (named "Node id"), there is the index number for each node (each one on a different row). When I click on a specific index number, a modal window opens, containing the node's info.
When I created the table, I've made each node id an anchor element:
if (key[j] == "nodeid") {
var cell = document.createElement("td");
var aux = document.createElement("a");
Then, when a click a particular one, I call a function that gets the node's info from a server:
$("a").click(function(test) {
getEndpoints(test.target.innerHTML);//innerHTML= node id number
});
What I want to do, is to click anywhere on the row in order to open that modal window containing the information for the node displayed on that row.
What I've tried so far is to make every <td> and anchor element by redefining the if statement:
if (key[j]) {
var cell = document.createElement("td");
var aux = document.createElement("a");
cell.appendChild(aux);
var cellText = document.createTextNode(value[key[j]]);
aux.appendChild(cellText);
row.appendChild(cell);
The thing is, in order for this to work correct, I always have to click on the node index first in order to get the info. If I click anywhere else on the row first, the content i get is blank.
///LATER EDIT
Here is the getEndpoints function I use in order to get data for a particular node:
function getEndpoints(nodeid) {
$.get(".../iot/cmd/node/" + nodeid + "/class/mib/act/allS", function (node) {
window.data = node;
var key = ["epid", "clslist", "loc", "type", "zplus"];
var endpoints = node.endpoints[0];
for (var k = 0; k < key.length; k++) {
$("#" + key[k]).text(endpoints[key[k]]);
}
});
}
Then I populate this div with the data requested from getEndpoints:
<div id="endDiv" style="display: none">
<ol class="rounded-list">
<li><label>ID: <span id="name"></span></label></li>
<li><label>LOC. NAME: <span id="loc"></span></label></li>
<li><label>EPID: <span id="epid"></span></label></li>
<li><label>CLSLIST: <span id="clslist"></span></label></li>
<li><label>TYPE: <span id="type"></span> </label></li>
<li><label>ZPLUS: <span id="zplus"></span> </label></li>
</ol>
</div>
Then I put the div content in the modal window:
$("a").on( "click", function() {
$("#endDiv").contents().appendTo(".modal-content")
});
I have this javascript that dynamically creates a table in HTML from a CSV file. I’m also using bootstrap and they have a cool ‘content editable’ class for table cells where you can edit the ’td’ element. I’m trying to add some css or just a border to a table cell after it has been edited. I’ve tried some jQuery but with no success. Any suggestions would be appreciated.
heres the github i used click here, essentially the same example with a few extra lines of javascript.
JavaScript:
<script type="text/javascript">
// check browser support
// console.log(SimpleExcel.isSupportedBrowser);
var fileInputCSV = document.getElementById('fileInputCSV');
// when local file loaded
fileInputCSV.addEventListener('change', function (e) {
// parse as CSV
var file = e.target.files[0];
var csvParser = new SimpleExcel.Parser.CSV();
csvParser.setDelimiter(',');
csvParser.loadFile(file, function () {
// draw HTML table based on sheet data
var sheet = csvParser.getSheet();
var table = document.getElementById('result');
var tbody = document.createElement('tbody');
table.innerHTML = "";
sheet.forEach(function (el, i) {
var row = document.createElement('tr');
el.forEach(function (el, i) {
var cell = document.createElement('td');
cell.setAttribute('contenteditable', 'true');
cell.setAttribute('id', 'cells');
cell.innerHTML = el.value;
row.appendChild(cell);
});
table.appendChild(tbody);
tbody.appendChild(row);
});
// create button to export as TSV
var btnSave = document.getElementById('fileExport');
btnSave.hidden = false;
btnSave.value = 'Save as TSV file ->';
document.body.appendChild(btnSave);
// export when button clicked
btnSave.addEventListener('click', function (e) {
var tsvWriter = new SimpleExcel.Writer.TSV();
tsvWriter.insertSheet(csvParser.getSheet(1));
tsvWriter.saveFile();
});
var data = csvParser.getSheet(1);
// var json_data = JSON.stringify(data);
console.log("data here", data);
angular.element('#angular-controller').scope().getCSV(data);
// print to console just for quick testing
// console.log(csvParser.getSheet(1));
// console.log(csvParser.getSheet(1).getRow(1));
// console.log(csvParser.getSheet(1).getColumn(2));
// console.log(csvParser.getSheet(1).getCell(3, 1));
// console.log(csvParser.getSheet(1).getCell(2, 3).value);
});
});
</script>
jQuery:
$(document).ready(function() {
$('#fileInputCSV').on('change',function() {
$('#save-button').css('display','inline-block');
$('#add-row').css('display', 'inline-block');
});
$('#cells').on('change', function() {
console.log("change");
$('#cells').css('style','border:2px solid orange');
});
});
HTML:
<div class="row">
<div class="container-fluid">
<button type="button" class="btn btn-success btn-sm" id="add-row" style="display:none" data-toggle="modal" data-target="#myModal">Add Row</button>
<button class="btn btn-sm btn-success pull-right" id="save-button" style="display:none">Save</button>
<table id="result" class="table table-condensed"></table>
<input type="button" id="fileExport" hidden="true" />
</div>
</div>
Have you tried to insert bootstrap´s table-bordered class to the object after is has been edited, like:
<table id="result" class="table table-condensed table-bordered"></table>
Check in the usagehere
Look at all bootstrap table possible flags here
To load a class dynamically to the result table (id="result") use:
$(#result).addClass("table-bordered");
I want to get each cell value from an HTML table using JavaScript when pressing submit button.
How to get HTML table cell values?
To get the text from this cell-
<table>
<tr id="somerow">
<td>some text</td>
</tr>
</table>
You can use this -
var Row = document.getElementById("somerow");
var Cells = Row.getElementsByTagName("td");
alert(Cells[0].innerText);
function Vcount() {
var modify = document.getElementById("C_name1").value;
var oTable = document.getElementById('dataTable');
var i;
var rowLength = oTable.rows.length;
for (i = 1; i < rowLength; i++) {
var oCells = oTable.rows.item(i).cells;
if (modify == oCells[0].firstChild.data) {
document.getElementById("Error").innerHTML = " * duplicate value";
return false;
break;
}
}
var table = document.getElementById("someTableID");
var totalRows = document.getElementById("someTableID").rows.length;
var totalCol = 3; // enter the number of columns in the table minus 1 (first column is 0 not 1)
//To display all values
for (var x = 0; x <= totalRows; x++)
{
for (var y = 0; y <= totalCol; y++)
{
alert(table.rows[x].cells[y].innerHTML;
}
}
//To display a single cell value enter in the row number and column number under rows and cells below:
var firstCell = table.rows[0].cells[0].innerHTML;
alert(firstCell);
//Note: if you use <th> this will be row 0, so your data will start at row 1 col 0
You can also use the DOM way to obtain the cell value:
Cells[0].firstChild.data
Read more on that in my post at http://js-code.blogspot.com/2009/03/how-to-change-html-table-cell-value.html
You can get cell value with JS even when click on the cell:
.......................
<head>
<title>Search students by courses/professors</title>
<script type="text/javascript">
function ChangeColor(tableRow, highLight)
{
if (highLight){
tableRow.style.backgroundColor = '00CCCC';
}
else{
tableRow.style.backgroundColor = 'white';
}
}
function DoNav(theUrl)
{
document.location.href = theUrl;
}
</script>
</head>
<body>
<table id = "c" width="180" border="1" cellpadding="0" cellspacing="0">
<% for (Course cs : courses){ %>
<tr onmouseover="ChangeColor(this, true);"
onmouseout="ChangeColor(this, false);"
onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp?courseId=<%=cs.getCourseId()%>');">
<td name = "title" align = "center"><%= cs.getTitle() %></td>
</tr>
<%}%>
........................
</body>
I wrote the HTML table in JSP.
Course is is a type. For example Course cs, cs= object of type Course which had 2 attributes: id, title.
courses is an ArrayList of Course objects.
The HTML table displays all the courses titles in each cell. So the table has 1 column only:
Course1
Course2
Course3
......
Taking aside:
onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp?courseId=<%=cs.getCourseId()%>');"
This means that after user selects a table cell, for example "Course2", the title of the course- "Course2" will travel to the page where the URL is directing the user: http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp . "Course2" will arrive in FoundS.jsp page. The identifier of "Course2" is courseId. To declare the variable courseId, in which CourseX will be kept, you put a "?" after the URL and next to it the identifier.
I told you just in case you'll want to use it because I searched a lot for it and I found questions like mine. But now I found out from teacher so I post where people asked.
The example is working.I've seen.
Just simply.. #sometime when larger table we can't add the id to each tr
<table>
<tr>
<td>some text</td>
<td>something</td>
</tr>
<tr>
<td>Hello</td>
<td>Hel</td>
</tr>
</table>
<script>
var cell = document.getElementsByTagName("td");
var i = 0;
while(cell[i] != undefined){
alert(cell[i].innerHTML); //do some alert for test
i++;
}//end while
</script>
<td class="virtualTd" onclick="putThis(this)">my td value </td>
function putThis(control) {
alert(control.innerText);
}
I found this as an easiest way to add row . The awesome thing about this is that it doesn't change the already present table contents even if it contains input elements .
row = `<tr><td><input type="text"></td></tr>`
$("#table_body tr:last").after(row) ;
Here #table_body is the id of the table body tag .
Here is perhaps the simplest way to obtain the value of a single cell.
document.querySelector("#table").children[0].children[r].children[c].innerText
where r is the row index and c is the column index
Therefore, to obtain all cell data and put it in a multi-dimensional array:
var tableData = [];
Array.from(document.querySelector("#table").children[0].children).forEach(function(tr){tableData.push(Array.from(tr.children).map(cell => cell.innerText))});
var cell = tableData[1][2];//2nd row, 3rd column
To access a specific cell's data in this multi-dimensional array, use the standard syntax: array[rowIndex][columnIndex].
Make a javascript function
function addSampleTextInInputBox(message) {
//set value in input box
document.getElementById('textInput').value = message + "";
//or show an alert
//window.alert(message);
}
Then simply call in your table row button click
<td class="center">
<a class="btn btn-success" onclick="addSampleTextInInputBox('<?php echo $row->message; ?>')" title="Add" data-toggle="tooltip" title="Add">
<span class="fa fa-plus"></span>
</a>
</td>