Get dynamically created table cell value on click of table button - javascript

I am creating dynamic table which I has 3 columns. First columns has campaign name 2nd & 3rd column is status of that campaign which is image button. What I expect when I click status button it should return respective campaign name. Nothing happens when I click on status button.
would be great if you can provide solution.
function displayCampaigns(campaignNames) {
var html = "<table class='table table - responsive - md' id='campaignTable'>";
for (var i = 0; i < campaignNames.length; i++) {
html += "<tr>";
html += "<td>" + campaignNames[i] + "</td>";
html += "<td><input type='button' id='telStatus' class='btn btn-success btn-circle btn-sm' onclick=function(){getRow(this)}/></td>";
html += "<td><img src='ready.jpg' id='readyStatus' /></td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("demo").innerHTML = html;
function getRow(obj) {
var txt;
e.preventDefault();
txt = $(this).parent().prev().prev().text();
alert(txt + 'selected txt');
}

i have fixed your problem.
function displayCampaigns(campaignNames) {
var html = "<table class='table table - responsive - md' id='campaignTable'>";
for (var i = 0; i < campaignNames.length; i++) {
html += "<tr>";
html += "<td class='parent'>" + campaignNames[i] + "</td>";
html += "<td><input type='button' id='telStatus' class='btn btn-success btn-circle btn-sm' onclick=getRow(this) /></td>";
html += "<td><img src='ready.jpg' id='readyStatus' /></td>";
html += "</tr>";
}
html += "</table>";
document.getElementById("demo").innerHTML = html;
}
function getRow(event) {
var txt = $(event).parent().prev().text();;
alert(txt + ' selected txt');
}
var a = ["test","test2"];
displayCampaigns(a);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo"></div>

You could save the #demo object in a variable and attach an event listener to that. On click check if the event target has a class that you attach to your buttons, like telStatus (don't use that as id because having more than one row will result in several html elements having the same id). Add the campaign name as id or a data attribute to the table rows and just check the clicked buttons parentNodes to retrieve the id/data attribue.
var campaignNames = [
'abc', 'efg'
]
var demo = document.querySelector('#demo');
displayCampaigns(campaignNames);
function displayCampaigns(campaignNames) {
var html = "<table class='table table-responsive-md' id='campaignTable'>";
for (var i = 0; i < campaignNames.length; i++) {
html += "<tr id='" + campaignNames[i] +"'>";
html += "<td>" + campaignNames[i] + "</td>";
html += "<td><input type='button' class='telStatus btn btn-success btn-circle btn-sm'/></td>";
html += "<td><img src='ready.jpg' /></td>";
html += "</tr>";
}
html += "</table>";
demo.innerHTML = html;
}
demo.addEventListener('click', function (evt) {
if (!evt.target.classList.contains('telStatus')) return;
var parentTr = evt.target.parentNode.parentNode;
var campaignName = parentTr.id;
alert(campaignName + ' selected txt');
});

Related

JavaScript Limit Drop Down Menu To Number In Input

I'm trying to get the drop down menu limited to whatever number you put in the max mark input field. E.G. if you put 10 in the max marks input field the drop down menu in the marks field is limited to 10
I tried using onchange but couldn't figure out how to use the number I put in the max mark field in the for loop I have made to create the drop down menu
$(document).ready(function () {
load();
});
function load(){
$("#txtNoOfRec").focus();
$("#btnNoOfRec").click(function () {
$("#AddControll").empty();
var NoOfRec = $("#txtNoOfRec").val();
if(NoOfRec > 0) {
createControll(NoOfRec);
}
});
}
function createControll(NoOfRec) {
var tbl = "";
tbl = "<table>"+
"<tr>"+
"<th> Section </th>"+
"<th> Max </th>"+
"<th> Comment </th>"+
"<th> Marks </th>"+
"</tr>";
for (i=1; i<=NoOfRec; i++) {
tbl += "<tr>"+
"<td>"+
"<input type='text' id='txtSection' placeholder='Section' autofocus/>"+
"</td>"+
"<td>"+
"<input type='text' id='txtMax' placeholder='Max' />"+
"</td>"+
"<td>"+
"<input type='text' id='txtComment' placeholder='Comment' />"+
"</td>"+
"<td>"+
"<select id='ddlMarks'>";
for (let a = 0; a <= 100; a++) {
tbl += "<option>" + a + "</option>";
}
tbl += "</select>"+
"</td>"+
"</tr>";
}
tbl += "</table>";
$("#AddControll").append(tbl);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvMain">
<label id="lblNoOfRec"> Enter No Of Rows</label>
<input type="text" id="txtNoOfRec"/>
<input type="button" value="CREATE" id="btnNoOfRec" />
</div>
<br>
<div id="AddControll">
</div>
You just need to loop thru NoOfRec the same way you are making the table rows
Instead of looping thru 100 for (let a = 0; a <= 100; a++) { you just loop thru the input number for (var a = 1; a <= NoOfRec; a++) {.
Updated answer
Due to comments from OP, I have updated the code to determine the dropdown options based on the input from the max field generated from the table
$(document).ready(function() {
load();
});
function load() {
$("#txtNoOfRec").focus();
$("#btnNoOfRec").click(function() {
$("#AddControll").empty();
var NoOfRec = $("#txtNoOfRec").val();
if (NoOfRec > 0) {
createControll(NoOfRec);
}
});
$("#AddControll").on( "keyup", ".txtMax", function() {
var $this = $(this);
// get the input value
var l = parseInt( $this.val() );
// if input is a number then append items in dropdown
if( typeof l == 'number' ) {
// find the row parent tr and get the dropdown element then empty it first
var $marks = $this.closest('tr').find('.ddlMarks');
$marks.empty();
// add dropdown items based on input
for (var j = 0; j < l; j++) {
$marks.append("<option>" + j + "</option>");
}
}
} );
}
function createControll(NoOfRec) {
var tbl = "";
tbl = "<table>" +
"<tr>" +
"<th> Section </th>" +
"<th> Max </th>" +
"<th> Comment </th>" +
"<th> Marks </th>" +
"</tr>";
for (i = 1; i <= NoOfRec; i++) {
// ID must be unique, updated ID on inputs/select to use class instead
tbl += "<tr>" +
"<td>" +
"<input type='text' class='txtSection' placeholder='Section' autofocus/>" +
"</td>" +
"<td>" +
"<input type='text' class='txtMax' placeholder='Max' />" +
"</td>" +
"<td>" +
"<input type='text' class='txtComment' placeholder='Comment' />" +
"</td>" +
"<td>" +
"<select class='ddlMarks'>";
for (var a = 0; a < 100; a++) {
tbl += "<option>" + a + "</option>";
}
tbl += "</select>" +
"</td>" +
"</tr>";
}
tbl += "</table>";
$("#AddControll").append(tbl);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvMain">
<label id="lblNoOfRec"> Enter No Of Rows</label>
<input type="text" id="txtNoOfRec" />
<input type="button" value="CREATE" id="btnNoOfRec" />
</div>
<br>
<div id="AddControll">
</div>

I can't show my array in JavaScript

I have some simple code in JavaScript. I was going to create code to add first name, last name and age of students from the client by click on "Add Student" button, and show the list of students including the one just added by clicking on the "Show Students" button.
The add action is successful, but when I click on "Show Students" button it just shows me a table without any information(First Name,Last Name,Age).
var students = new Array();
var i = 0;
function AddStudent()
{
var patt = /i[a-z]/;
var Fname = prompt("enter first name");
var Lname = prompt("enter last name");
var Age = prompt("enter age");
var std= {fname : Fname,lname : Lname,age : Age }
students[i++] =std;
}
function ShowStudents()
{
var table = "<table style='background-color:greenyellow; border:solid;'>";
table += "<tr><th>نام</th><th>نام خانوادگی</th><th>سن</th></tr>"
for( var j=0;j<students.length;j++)
{
table += "<tr>"
table += "<td>" + students[j].fname +"</td>"
table += "<td>" + students[j].lname + "</td>"
table += "<td>" + students[j].age + "</td>"
table +="</tr>"
}
table += "</table>";
document.getElementById("ShowStudents").innerHTML = table;
}
<input type="button" value="Add Student" onclick="AddStudent();"/>
<input type="button" value="Show Students" onclick="ShowStudents();"/>
<div id="ShowStudents"></div>
I think that your browser can not execute instructions without " ; " , so try to add it in this lines :
table += "<tr><th>نام</th><th>نام خانوادگی</th><th>سن</th></tr>"
for( var j=0;j<students.length;j++)
{
table += "<tr>"
table += "<td>" + students[j].fname +"</td>"
table += "<td>" + students[j].lname + "</td>"
table += "<td>" + students[j].age + "</td>"
table +="</tr>"
}
because for me it works like a charm.
i had some comment in my js page and useless functions.finally i clean the comment and useless functions and it worked!

creating and appending a button to the end of each row in a dynamic html table using javascript

I have a table that I have dynamically created from a JSON object I am getting from the server via an ajax request. I am trying to append buttons to the end of each of the rows in the table. The table has seven rows, thus I have 7 buttons. I want something like the following. I want to set a javascript variable to create each individual button with the following parameters :
(obviously with different ids)
<input type="button"id="submit-button2"class="btn btn primary"value="Submit" />
so that I can set up an array of buttons of these variables in javascript such as the following:
var buttons = [
button1,
button2,
button3,
button4,
button5,
button6,
button7
];
Then I can iterate through my JSON object and the buttons array appending them to the table (named requestTable) like the following :
for(var j = 0; j < request[0].DepartmentApprovals.length && buttons.length; j++) {
$("<tr>" + "<td id=\"Departments\">"
+ request[0].DepartmentApprovals[j].Department +":" + "</td>"
+ "<td input type=\"text\" id=\"ApproverLanId\" contenteditable=\"false\" class=\"underline\">"
+ request[0].DepartmentApprovals[j].Approver.LanId + "</td>"
+ "<td>" + "Date:" + "</td>"
+ "<td contenteditable=\"false\" class=\"underline\">" + request[0].DateApproved + "</td>"
+ "<td>" + buttons[j].outerHTML + "</td>"+ "</tr>").appendTo("#requestTable");
}
The table data works, My issue has been that I am able to get a button to append and show if I use the document.getElementById of an existing button already created elsewhere on the form, but clearly I do not want this, I want them dynamically created with differing ids that exist only in the scope of the table. I am not sure how to accomplish this through javascript.
I am not 100% sure if this is what you want, but this code should add a button with a dynamic ID (submit-button-1, submit-button-2, etc ...) inside the last cell of each row:
for (var j = 0; j < request[0].DepartmentApprovals.length && buttons.length; j++) {
var appendHTML = '';
appendHTML += '<tr>';
appendHTML += '<td id="Departments">' + request[0].DepartmentApprovals[j].Department + ':</td>';
appendHTML += '<td input type="text" id="ApproverLanId" contenteditable="false" class="underline">' + request[0].DepartmentApprovals[j].Approver.LanId + '</td>';
appendHTML += '<td>Date:</td>';
appendHTML += '<td contenteditable="false" class="underline">' + request[0].DateApproved + '</td>';
appendHTML += '<td><input type="button" id="submit-button-' + (j + 1) + '" class="btn btn primary" value="Submit" /></td>';
appendHTML += '</tr>';
appendHTML.appendTo('#requestTable');
}
try this
var button = document.createElement("button");
button.innerHTML ="/*put name of button here*/";
// 2. Append somewhere
var body = document.getElementsByTagName("body")[0];
body.appendChild(button);
// 3. Add event handler
button.addEventListener ("click", function(){/*put what button does here*/}

How to incorporate CSS into a table

I would like to put CSS code into my table but don't want to styles at every row of the table. I have the following code:
CSS:
.statetable th
{
width: 250px;
color: red;
text-align: left;
}
.statetable tr
{
width: 250px;
}
JavaScript:
function showState()
{
myTable = "<table class='statetable'><br><th><td>Type</td>";
myTable += "<td>Value</td></th>";
createRow("------------------", "------------");
createRow("Layout", (document.getElementById("startradio").form.format == "Default"));
myTable +="</table>";
document.getElementById("tableHolder").innerHTML = myTable;
}
function createRow(type, value)
{
myTable += "<table class='statetable'><tr><td>" + type + "</td>";
myTable += "<td>" + value + "</td></tr>";
}
HTML:
<input type="button" id="button" value="Click to show states" onclick="showState()"/>
<div id="tableHolder"></div>
The style is not working though. I have placed my th and tr's and placed the css with them but I am not sure what am I doing wrong.
Replace these:
myTable = "<table class='statetable'><br><th><td>Type</td>";
myTable += "<td>Value</td></th>";
With these:
myTable = "<table class='statetable'><tr><th>Type</th>";
myTable += "<th>Value</th></tr>";
Also, in createRow, replace:
myTable += "<table class='statetable'><tr><td>" + type + "</td>";
myTable += "<td>" + value + "</td></tr>";
With:
myTable += "<tr><td>" + type + "</td><td>" + value + "</td></tr>";
You are ending up with more starting <table> tags then closing ones. The createRow() method should not return a starting <table> tag.
Also, .set width on the table instead of the <tr>/<th>.

Create a table in javascript from returned JSON object by http get

This is the function in my javascript. Triggered by an onclick function by an another function.
function getValueUsingParentTag(){
var tv_type = [];
var screen_size = [];
var connectivity = [];
var features = [];
var chkArray = [tv_type,screen_size,connectivity,features];
$("#tvtype input:checked").each(function() {
tv_type.push($(this).val());
});
$("#screensize input:checked").each(function() {
screen_size.push($(this).val());
});
$("#connection input:checked").each(function() {
connectivity.push($(this).val());
});
$("#feature input:checked").each(function() {
features.push($(this).val());
});
console.log(chkArray);
//alert(JSON.stringify(chkArray));
alert('hello');
$.get("output-tv.php",{tv_type:tv_type,screen_size:screen_size,connectivity:connectivity,features:features},function(chkArray){
});
}
This is the sample json object returned
{"result":[
{"product_code":"B2810","tv_name":"32B2810","size":"32","tv_type":"INTERNET TV"},
{"product_code":"B2610","tv_name":"48B2610","size":"48","tv_type":"INTERNET TV"}
]}
I need to create a table in javascript based on the json object returned. I dont know how. Please Help.
following function builds the table in a string.
function getTable(data) {
var html = "";
html += "<table><tr><td>product_code</td><td>tv_name</td><td>size</td><td>tv_type</td></tr>";
html += "<tr>";
for(var i = 0, ceiling = data.result.length; i < ceiling; i++) {
var row = data.result[i];
html += "<td>" + row.product_code + "</td>";
html += "<td>" + row.tv_name + "</td>";
html += "<td>" + row.size + "</td>";
html += "<td>" + row.tv_type + "</td>";
}
html += "</tr>";
html += "</table>";
return html;
}
suppose you have a div with id mydiv, you can add the table to this div with following code:
document.getElementById("mydiv").innerHTML = getTable(data);
Here's a simple Javascript only loop example:
http://jsfiddle.net/mCLVL/
var tableData = {"result":[
{"product_code":"B2810","tv_name":"32B2810","size":"32","tv_type":"INTERNET TV"},
{"product_code":"B2610","tv_name":"48B2610","size":"48","tv_type":"INTERNET TV"}
]};
var tableHTML = "<table>";
for (var i = 0; i < tableData["result"].length; i++) {
tableHTML += "<tr>";
tableHTML += "<td>" + tableData["result"][i]["product_code"] + "</td>";
tableHTML += "<td>" + tableData["result"][i]["tv_name"] + "</td>";
tableHTML += "<td>" + tableData["result"][i]["size"] + "</td>";
tableHTML += "<td>" + tableData["result"][i]["tv_type"] + "</td>";
tableHTML += "</tr>";
}
tableHTML += "</table>";
console.log(tableHTML);
It will be so simple by using JSRender. I made a fiddle using jsrender template check it.
Using JSRender Fiddle

Categories

Resources