How to get the values from dynamically created rows and store all the column and row values in an array

The name of the pictureThe name of the pictureThe name of the pictureClash Royale CLAN TAG#URR8PPP



How to get the values from dynamically created rows and store all the column and row values in an array



This is the HTML code


<!DOCTYPE html>
<html lang="en">
<head>
<title>Tasklist</title>
</head>

<body>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<div>
<form>
<input type="button" class="add-row" value="Add Row">
<input type="button" class="load" value="Enter">
</form>
<table id='tablemain' class="table">
<thead>
<tr>
<th>SNo</th>
<th>Name</th>
<th>Assigned Task</th>
<th>Due Date</th>
<th>Status</th>
<th>Comments</th>
</tr>
</thead>
</table>
</div>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="script.js"></script>
</body>
</html>



This is the Javascript for that code


var status;
var sno = ;
var load;
var no_rows = 0;
var row;
$(document).ready(function ()
$(".add-row").click(function ()
row = "<tr id=tasklist><td>" + "<input type=text class=sno></input>" + "</td><td>" + "<input type=text class=pname></input>" + "</td><td>" + "<input type=text class=task></input>" + "</td><td>" + "<input type=text class=date></input>" + "</td><td>" + "<select class=status><option >Not Started</option><option>In progress</option><option>Finished</option></select>" + "</td><td>" + "<input type=text class=comment></input>" + "</td></tr>";
$("table").append(row);
$('.date').datepicker();
// $('.sno').css("background-color","blue");
$("select").change(function ()
status = $(this).find('option:selected').text();
if (status === "In progress")
$(this).css("background-color", "#a1a1ff");
//$('.task').addClass("blue");

if (status === "Finished")
$(this).css("background-color", "#54c654");
//$('.task').addClass("green");

if (status === "Not Started")
$(this).css("background-color", "#F8F8F8");
//$('.task').addClass("white");

)
++no_rows;
);

$('.load').click(function ()
//What should I write here
);
);



After clicking the enter button I need to load all the rows and columns in an array and display it in the console. For example if we created a table with two rows, the columns specified here is constant that is 6. The final output should be inside the arrays with two rows and 6 column within it.




4 Answers
4



Are you looking like This Fiddle




var status;
var sno = ;
var load;
var no_rows = 0;
var row;
var mainArr = ;
var tmpArr = ;

function loadValues()
var mainTable = $('#tablemain');
var tr = mainTable.find('tbody tr');
tr.each(function()
tmpArr = ; // has to clean on every found for take every td values into array
$(this).find('td').each(function()

var values = $(this).find('input, select').val();
tmpArr.push(values);

);
mainArr.push(tmpArr);
);
console.log(mainArr);



$(document).ready(function()
$(".add-row").click(function()
row = "<tr id=tasklist><td>" + "<input type=text class=sno></input>" + "</td><td>" + "<input type=text class=pname></input>" + "</td><td>" + "<input type=text class=task></input>" + "</td><td>" + "<input type=text class=date></input>" + "</td><td>" + "<select class=status><option >Not Started</option><option>In progress</option><option>Finished</option></select>" + "</td><td>" + "<input type=text class=comment></input>" + "</td></tr>";
$("table > tbody").append(row);
$('.date').datepicker();
// $('.sno').css("background-color","blue");
$("select").change(function()
status = $(this).find('option:selected').text();
if (status === "In progress")
$(this).css("background-color", "#a1a1ff");
//$('.task').addClass("blue");

if (status === "Finished")
$(this).css("background-color", "#54c654");
//$('.task').addClass("green");

if (status === "Not Started")
$(this).css("background-color", "#F8F8F8");
//$('.task').addClass("white");

)
++no_rows;
);

$('.load').click(function()
loadValues();
);
);


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form>
<input type="button" class="add-row" value="Add Row">
<input type="button" class="load" value="Enter">
</form>
<table id='tablemain' class="table">
<thead>
<tr>
<th>SNo</th>
<th>Name</th>
<th>Assigned Task</th>
<th>Due Date</th>
<th>Status</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>



some little HTML changed and



Array output looks like
Array output looks like





@Gowtham Koushik is this helped desired array as output mark as accepted answer for this question
– Munkhdelger Tumenbayar
Aug 10 at 7:54





Thank you for your help. Exactly what I expected.
– Gowtham Koushik
Aug 10 at 8:07






Glad it helped so mark it as accepted for Good
– Munkhdelger Tumenbayar
Aug 10 at 8:10



You do not need jQuery for that. Plain Javascript will do the job. Assign every row the same class. For example class="table-row" and use document.querySelector to query for that class to receive a node list.


class="table-row"


document.querySelector


const nodeList = document.querySelector('.table-row');
// watch out! A nodeList is not an array
// so you cannot use map, filter or other array functions,
// you need to parse nodeList to an array first.
const array = Array.prototype.slice.call(nodeList);



You have now an array of rows. Every row holds the six columns you specified. Therefore, you can now use a nested for-loop to iterate through the rows and each column.


for(row of array)
// a new row starts
for(column of row.childNodes)
// print the next column
console.log(column.textContent);




Also, you might want to have a look at: console.table(array) that will print a beautiful table to the browser/web console.


console.table(array)




var status;
var sno = ;
var load;
var no_rows = 0;
var row;
var mainArr = ;
var tmpArr = ;

function loadValues()
var mainTable = $('#tablemain');
var tr = mainTable.find('tbody tr');
tr.each(function()
tmpArr = ; // has to clean on every found for take every td values into array
$(this).find('td').each(function()

var values = $(this).find('input, select').val();
tmpArr.push(values);

);
mainArr.push(tmpArr);
);
console.log(mainArr);



$(document).ready(function()
$(".add-row").click(function()
row = "<tr id=tasklist><td>" + "<input type=text class=sno></input>" + "</td><td>" + "<input type=text class=pname></input>" + "</td><td>" + "<input type=text class=task></input>" + "</td><td>" + "<input type=text class=date></input>" + "</td><td>" + "<select class=status><option >Not Started</option><option>In progress</option><option>Finished</option></select>" + "</td><td>" + "<input type=text class=comment></input>" + "</td></tr>";
$("table > tbody").append(row);
$('.date').datepicker();
// $('.sno').css("background-color","blue");
$("select").change(function()
status = $(this).find('option:selected').text();
if (status === "In progress")
$(this).css("background-color", "#a1a1ff");
//$('.task').addClass("blue");

if (status === "Finished")
$(this).css("background-color", "#54c654");
//$('.task').addClass("green");

if (status === "Not Started")
$(this).css("background-color", "#F8F8F8");
//$('.task').addClass("white");

)
++no_rows;
);

$('.load').click(function()
loadValues();
);
);


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form>
<input type="button" class="add-row" value="Add Row">
<input type="button" class="load" value="Enter">
</form>
<table id='tablemain' class="table">
<thead>
<tr>
<th>SNo</th>
<th>Name</th>
<th>Assigned Task</th>
<th>Due Date</th>
<th>Status</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>




var status;
var sno = ;
var load;
var no_rows = 0;
var row;
var mainArr = ;
var tmpArr = ;

function loadValues()
var mainTable = $('#tablemain');
var tr = mainTable.find('tbody tr');
tr.each(function()
tmpArr = ; // has to clean on every found for take every td values into array
$(this).find('td').each(function()

var values = $(this).find('input, select').val();
tmpArr.push(values);

);
mainArr.push(tmpArr);
);
console.log(mainArr);



$(document).ready(function()
$(".add-row").click(function()
row = "<tr id=tasklist><td>" + "<input type=text class=sno></input>" + "</td><td>" + "<input type=text class=pname></input>" + "</td><td>" + "<input type=text class=task></input>" + "</td><td>" + "<input type=text class=date></input>" + "</td><td>" + "<select class=status><option >Not Started</option><option>In progress</option><option>Finished</option></select>" + "</td><td>" + "<input type=text class=comment></input>" + "</td></tr>";
$("table > tbody").append(row);
$('.date').datepicker();
// $('.sno').css("background-color","blue");
$("select").change(function()
status = $(this).find('option:selected').text();
if (status === "In progress")
$(this).css("background-color", "#a1a1ff");
//$('.task').addClass("blue");

if (status === "Finished")
$(this).css("background-color", "#54c654");
//$('.task').addClass("green");

if (status === "Not Started")
$(this).css("background-color", "#F8F8F8");
//$('.task').addClass("white");

)
++no_rows;
);

$('.load').click(function()
loadValues();
);
);


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form>
<input type="button" class="add-row" value="Add Row">
<input type="button" class="load" value="Enter">
</form>
<table id='tablemain' class="table">
<thead>
<tr>
<th>SNo</th>
<th>Name</th>
<th>Assigned Task</th>
<th>Due Date</th>
<th>Status</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>



I has a example for you.



First: update id of row to class: id=tasklist -> class=tasklist



Code for Enter button:


$('.load').click(function ()
//What should I write here
$(".tasklist").each(function(i)
sno.push(
sno: $(this).find(".sno").val(),
pname: $(this).find(".pname").val()
// add others properties to here
);
);
console.log(sno);
);





Thank you. This one also works.
– Gowtham Koushik
Aug 10 at 8:11





The final output should be inside the arrays with two rows and 6 column within it.
– Munkhdelger Tumenbayar
Aug 10 at 9:55






By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

-

Popular posts from this blog

Firebase Auth - with Email and Password - Check user already registered

Image
Clash Royale CLAN TAG #URR8PPP Firebase Auth - with Email and Password - Check user already registered I want to check when a user attempts to signup with createUserWithEmailAndPassword() in Firebase user Authentication method, this user is already registered with my app. createUserWithEmailAndPassword() 8 Answers 8 To detect whether a user with that email address already exists, you can detect when the call to createUserWithEmailAndPassword () fails with auth/email-already-in-use . I see that @Srinivasan just posted an answer for this. createUserWithEmailAndPassword () auth/email-already-in-use Alternatively, you can detect that an email address is already used by calling fetchSignInMethodsForEmail() (previous called fetchProvidersForEmail() ). fetchSignInMethodsForEmail() fetchProvidersForEmail() When the user trying to create an user with same email address, the task response will be "Response: The email address is already in use by another account." mFirebas...
Read more

Dynamically update html content plain JS

Image
Clash Royale CLAN TAG #URR8PPP Dynamically update html content plain JS So I have a script bound in my index.html, which literally has to fetch an array of jsons from an api, then dynamically update my page when get response. But as a result I'm getting an as the only update of my page. here is my script fetch(url) .then((resp) => resp.json()) .then((resp) => resp.results.forEach(item => fetch(item.url) .then((response)=> response.json()) .then((response) => pokeArr.push(response)) .catch(console.log) ) ).catch(console.log) const filler = () => if(!pokeArr) return 0 pokeArr.map((i,j)=> return `<tr>$i.name</tr>` ) const pokeindex = () => document.getElementById('a').appendChild(document.createElement(filler())) pokeindex() When I'm consoling it, I can see in the console all the responses I get, so I'm at least doing the fetching part right. What's parberakan ? What's pokeArr ? – T.J. Crowder Aug 8 at 12...
Read more

Creating a leaderboard in HTML/JS

Image
Clash Royale CLAN TAG #URR8PPP Creating a leaderboard in HTML/JS I'm trying to create a top 10 leaderboard, for now, I've only implemented 3 players, but I'm coming across an issue. My script doesn't seem to be outputting anything on webpage. The purpose of the script is to compare 3 arrays, player1,player2,and player3 solely based off of score. Which is the 2nd index of each array. I want the script to list the players in order of highest score. This method doesn't really seem to be efficient, especially when I'll have to add 7 more players. Could someone suggest perhaps an easier approach, as well as show me why my script wont output the info. Here's the JS function leaderboard() { var player1 = name:"Thomas",date:"01/23/18",score:"201"; var player2 = name:"Michael",date:"03/24/17",score:"943"; var player3 = Name:"Lisa",date:"06/04/18",Score:"79"; if(player1[2]...
Read more