14 Replies - 9964 Views - Last Post: 13 October 2011 - 05:00 AM

#1 shabbaranks   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 08-August 11

Creating a table based on selections from a php/mysql query

Posted 07 October 2011 - 03:58 AM

Hi Guys,

Firstly this isnt a double post, I stupidly posted in the Java forum not the java script forum. Im trying to create a dynamic table based on the selections of multiple lists as per here Screen Shot

A user would select thier choices from the various lists and then add them to a table - this is where my questiobn comes in. How do I achieve creating a table which will grow depending on how many additions a user adds?

Hope I make sense, Im trying to get my head around this.

:)

Is This A Good Question/Topic? 0
  • +

Replies To: Creating a table based on selections from a php/mysql query

#2 JackOfAllTrades   User is offline

  • Saucy!
  • member icon

Reputation: 6246
  • View blog
  • Posts: 24,014
  • Joined: 23-August 08

Re: Creating a table based on selections from a php/mysql query

Posted 07 October 2011 - 05:32 AM

Supply a button which when pushed, populates a row in the HTML table; if desired, send that record via AJAX to the PHP/MySQL back end first; if not, supply another button which iterates through the HTML table data and submits all the data to the back end for saving to the DB.
Was This Post Helpful? 0
  • +
  • -

#3 satis   User is offline

  • D.I.C Head

Reputation: 82
  • View blog
  • Posts: 231
  • Joined: 26-May 11

Re: Creating a table based on selections from a php/mysql query

Posted 07 October 2011 - 05:49 AM

If the question is, how do you make an HTML table dynamically get bigger as a user interacts with the page, the answer is document.createElement and (element).appendChild.

Here's a simple example
<script type='text/javascript'>
	function addRow(){
		//get a reference to the table tbody
		var myTable = document.getElementById('myTable').getElementsByTagName('TBODY')[0];
		//create the table row
		var tr = document.createElement('TR');
		//create the 4 column cells
		var td1 = document.createElement('TD');
			td1.innerHTML = '<input>';
		var td2 = document.createElement('TD');
			td2.innerHTML = '<input>';
		var td3 = document.createElement('TD');
			td3.innerHTML = '<input>';
		var td4 = document.createElement('TD');
			td4.innerHTML = '<input>';
		//add the column cells to the row
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		tr.appendChild(td4);
		
		//append the row to the table
		myTable.appendChild(tr);
	}
</script>
<table id='myTable'>
	<thead>
		<tr>
			<td>Column 1</td>
			<td>Column 2</td>
			<td>Column 3</td>
			<td>Column 4</td>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>
<button onclick='addRow();'>Add a row</button>

Was This Post Helpful? 1
  • +
  • -

#4 shabbaranks   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 08-August 11

Re: Creating a table based on selections from a php/mysql query

Posted 10 October 2011 - 01:00 AM

Thanks, thats what Im trying to do. I have amended your code to hold the 7 sections\headings that Im trying to capture but after I add them it throws the layout off the page.
<button onclick='addRow();'>Add a row</button>
<script type='text/javascript'>
	function addRow(){
		//get a reference to the table tbody
		var myTable = document.getElementById('myTable').getElementsByTagName('TBODY')[0];
		//create the table row
		var tr = document.createElement('TR');
		//create the 4 column cells
		var td1 = document.createElement('TD');
			td1.innerHTML = '<input>';
		var td2 = document.createElement('TD');
			td2.innerHTML = '<input>';
		var td3 = document.createElement('TD');
			td3.innerHTML = '<input>';
		var td4 = document.createElement('TD');
			td4.innerHTML = '<input>';
		var td5 = document.createElement('TD');
			td5.innerHTML = '<input>';
		var td6 = document.createElement('TD');
			td6.innerHTML = '<input>';
		var td7 = document.createElement('TD');
			td7.innerHTML = '<input>';	
		//add the column cells to the row
		tr.appendChild(td1);
		tr.appendChild(td2);
		tr.appendChild(td3);
		tr.appendChild(td4);
		tr.appendChild(td5);
		tr.appendChild(td6);
		tr.appendChild(td7);
		
		//append the row to the table
		myTable.appendChild(tr);
	}
</script>
<table id='myTable'>
	<thead>
		<tr>
			<td>Name</td>
			<td>Date</td>
			<td>Project</td>
			<td>Hours</td>
			<td>Department</td>
			<td>Activity</td>
			<td>Description</td>
		</tr>
	</thead>
	<tbody>
	</tbody>
</table>


My link
Is there anyway to control either the size of the boxes or the whole table? Thanks again :)

This post has been edited by shabbaranks: 10 October 2011 - 01:05 AM

Was This Post Helpful? 0
  • +
  • -

#5 satis   User is offline

  • D.I.C Head

Reputation: 82
  • View blog
  • Posts: 231
  • Joined: 26-May 11

Re: Creating a table based on selections from a php/mysql query

Posted 10 October 2011 - 06:46 AM

You can control the size of the boxes by putting a size on there. like

 td1.innerHTML = '<input size=5>'


That's the easiest way. You'll want to use the appropriate size for the appropriate input. You could also work with setting overflows and set static widths on stuff, but I don't think that's worth the headache.
Was This Post Helpful? 1
  • +
  • -

#6 shabbaranks   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 08-August 11

Re: Creating a table based on selections from a php/mysql query

Posted 10 October 2011 - 06:51 AM

Thanks Satis I actually got this working by adding some additional css templates and then applied them to the relevant boxes.

On a different note, can you tell me how I would capture the results of the drop down boxes as per here http://i.imgur.com/ImUdg.jpg and populate the rows within the table. The lists are php lists from a mysql database?

Thanks for all your help on this :)
Was This Post Helpful? 0
  • +
  • -

#7 shabbaranks   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 08-August 11

Re: Creating a table based on selections from a php/mysql query

Posted 11 October 2011 - 07:02 AM

Ok so Im making slight progress.. Ive labelled my lists will be using
var selectedValue = document.getElementById("myActivityCombo").value;
to get the value from the drop down list. How do I then get the var from "myActivityCombo" into a field within the table?

Thanks
Was This Post Helpful? 0
  • +
  • -

#8 satis   User is offline

  • D.I.C Head

Reputation: 82
  • View blog
  • Posts: 231
  • Joined: 26-May 11

Re: Creating a table based on selections from a php/mysql query

Posted 11 October 2011 - 08:20 AM

There's no way for you to insert data into a table directly from javascript. Javascript runs on the client's PC, not on the server. What you would need to do is get the values in javascript, then send it to the server, probably using AJAX.

The server would then received the AJAX request, process it (in PHP or whatever server side language you're using) and do the database inserting. That, however, is a very, very broad topic. I'd recommend you check out some of the excellent AJAX tutorials out there.
Was This Post Helpful? 0
  • +
  • -

#9 shabbaranks   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 08-August 11

Re: Creating a table based on selections from a php/mysql query

Posted 12 October 2011 - 05:22 AM

So would I be storing the values in a table at all? I thought the way I would need to go about it was to in effect copy/reference the selected choice in the drop down list to a table. The user would then submit the whole table to a table within mysql?
Was This Post Helpful? 0
  • +
  • -

#10 satis   User is offline

  • D.I.C Head

Reputation: 82
  • View blog
  • Posts: 231
  • Joined: 26-May 11

Re: Creating a table based on selections from a php/mysql query

Posted 12 October 2011 - 10:07 AM

I suppose you could create a construct in javascript to hold your table and allow the user to manipulate it. Eventually he could hit a 'save' or 'commit' button, at which point javascript would transfer that data to the server, perhaps via POST or AJAX. Regardless, eventually a server-side language would need to process the data and insert/update the mysql database.

This post has been edited by satis: 12 October 2011 - 10:07 AM

Was This Post Helpful? 1
  • +
  • -

#11 shabbaranks   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 08-August 11

Re: Creating a table based on selections from a php/mysql query

Posted 12 October 2011 - 11:59 AM

When you say create a construct within javascript, do I still populate a table which the user can see? If so would it be an html table? Or do I create a table using javascript?

About the commiting the data to the table on the database, when you say post. Would this be posted using php? If so I think I can get that sorted, Im really stuck trying to get the data from the drop down to a table in the first place - I dont suppose you have a sample or guide as to how I do this?

Thanks
Was This Post Helpful? 0
  • +
  • -

#12 satis   User is offline

  • D.I.C Head

Reputation: 82
  • View blog
  • Posts: 231
  • Joined: 26-May 11

Re: Creating a table based on selections from a php/mysql query

Posted 12 October 2011 - 12:26 PM

Regarding a javascript construct, that all depends on how you want to do things. When we're talking about "table" we're talking about several different things. One is the actual HTML table that exists on the web page. We're also talking about a table in the database sense... a table of data. The html table is a representation of that table... and is fine if that's what you want to do. You could also build a data structure that exists purely in javascript to hold that data. Doing so would give you the capability to add business rules and whatnot to the data, but is probably more than you're looking for.

Once the user hits "save" or whatever, you would then need to use javascript to go through that table, pull the data out, and then arrange it in a way the server-size can handle. For instance, you could dynamically build a FORM with a POST and then submit it. Personally, I'd do AJAX, but I'm comfortable with AJAX. How you want to do it is up to you.
Was This Post Helpful? 1
  • +
  • -

#13 shabbaranks   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 08-August 11

Re: Creating a table based on selections from a php/mysql query

Posted 12 October 2011 - 01:21 PM

Ok thanks, I think best if I work with one field in a table get that going and then gradually add another.

I think I need to concentrate on getting the selection to a field to which I can then start working on creating some sort of submit to the server.

Just reading back on what I have said in previous posts, I never actually meant having a table in which data was selected/entered which is fed straight into the mysql backend I thought there would be some method of executing (using php) to append the data to the mysql table.

Another question - can I not use getelementbyid to add the referenced id to a table row?

Thanks again :)
Was This Post Helpful? 0
  • +
  • -

#14 satis   User is offline

  • D.I.C Head

Reputation: 82
  • View blog
  • Posts: 231
  • Joined: 26-May 11

Re: Creating a table based on selections from a php/mysql query

Posted 12 October 2011 - 02:00 PM

getElementById is used by javascript to get a reference to a specific HTML element that has that id applied to it. I think you're asking if you can use that method to add an element to an id, and the answer is no. But you can add IDs in other ways.

Ok, so here's a quick synopsis. You've already got the code to put together a table and add new rows on demand. It's got an id of myTable. I'm going to use straight javascript on this, though in real life I'd probably use jquery to make my life easier.

So anyway, someone hits the submit button, so the first thing I do is get a reference to each of their rows of data. Since they could have any number, this has to be some sort of variable.
var rows = document.getElementById('myTable').getElementsByTagName('TBODY')[0].getElementsByTagName('TR');


So, I create a variable called rows. I use getElementById to get the table, then I use getElementsByTagName to get the TBODY within myTable, then I select the first (and only) TBODY, and then I use getElementsByTagName to get all rows within that TBODY.

Now I have an array of every row of data in the TBODY. I can then use a for loop to loop through each rows. I can further do another getElementsByTagName to get each input field and loop through that. From there, I could do all kinds of things.
for(var i=0; i<rows.length; i++){
	var inputs = rows[i].getElementsByTagName('INPUT');
	for(var k=0; k<inputs.length; k++){
		alert('rows ' + i + ', input ' + k + ' has a value of ' + inputs[k].value);
	}
}


What I would probably do in your case is start to create and HTML form with fields based on the HTML table the user's been manipulating. Here's some very rough, untested code, but hopefully it'll give you an idea what I'm talking about.
var form = document.createElement('FORM');
	form.method = 'POST';
	var totalField = document.createElement('input');
		totalField.name = 'TotalRows';
		totalField.value = rows.length;
	form.appendChild(totalField);
for(var i=0; i<rows.length; i++){
	var inputs = rows[i].getElementsByTagName('INPUT');
	for(var k=0; k<inputs.length; k++){
		var field = document.createElement('input');
			field.name = 'row' + i + 'field' + k;
			field.value = inputs[k].value;
		form.appendChild(field);
	}
}
document.appendChild(form);
form.submit();


Then it's just a matter of setting up PHP to pull that info. You could grab that TotalRows field so you know how many rows of data are being sent, then set up a loop to decode the fields. This assumes you know how many fields per row... if that end sup being variable, you'd probably need to supply that as well somewhere.

Personally, I'd use AJAX to send each row separately, but that's just how I'd do it.
Was This Post Helpful? 1
  • +
  • -

#15 shabbaranks   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 55
  • Joined: 08-August 11

Re: Creating a table based on selections from a php/mysql query

Posted 13 October 2011 - 05:00 AM

Thanks for this, I still cant seem to get the values from the select's to the rows... Would I be needing to reference table data in some way?

Im really not very good at all this :(
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1