10 Replies - 438 Views - Last Post: 27 October 2013 - 05:16 PM

#1 technix  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 26-February 09

Assist with Code for Table Headers with Dynamic Fields

Posted 27 October 2013 - 01:29 PM

Hello,

I have found some code that helps do most of what I would like and have editted it most of my needs. I am uncertain of what I need in order to accomplish the following
So my code is a form. with js to add mroe rows as needed. I want a header but when I try and use the th in the table it messes the dynamic up. here is the code
<fieldset class="row2">
				<legend>Data Equipment</legend>
				<p> 
					<input type="button" value="Add Equipment" onclick="addRow('dataTable')" /> 
					<input type="button" value="Remove Equipment" onclick="deleteRow('dataTable')"  /> 
					<p>(All acions apply only to entries with check marked check boxes only.)</p>
				</p>
			   
               <table id="dataTable" class="form" border="1">
                  <tbody>
                    <tr>
                      <p>
                      	<td><input type="checkbox"  name="chk[]" checked="checked" /></td>
						<td>
							<input type="text"  name="item[]">
						 </td>
						 <td>
							<input type="text"  name="model[]">  
					     </td>
						 <td>							
							<input type="text"  name="serial[]">
						 </td>
						 <td>
							<input type="text"  name="problemd[]">
						 </td>
							</p>
                    </tr>
                    </tbody>
                </table>
				<div class="clear"></div>
				<legend>Video Equipment</legend>
				<p> 
					<input type="button" value="Add Equipment" onclick="addRow('dataTable2')" /> 
					<input type="button" value="Remove Equipment" onclick="deleteRow('dataTable2')"  /> 
					<p>(All acions apply only to entries with check marked check boxes only.)</p>
				</p>
			   
               <table id="dataTable2" class="form" border="1">
                  <tbody>
                    <tr>
                      <p>
                      	<td><input type="checkbox"  name="chkv[]" checked="checked" /></td>
						<td>
							<input type="text"  name="itemv[]">
						 </td>
						 <td>
							<input type="text"  name="modelv[]">  
					     </td>
						 <td>							
							<input type="text"  name="serialv[]">
						 </td>
						 <td>
							<input type="text"  name="problemv[]">
						 </td>
							</p>
                    </tr>
                    </tbody>
                </table>
				<div class="clear"></div>
            </fieldset>



Id like to put the headers for each of the fields in data equipment and also video but again if I use the th in the table it breaks the buttons, If you'd like to see the form working as is visit http://mypricesaving...m/rma/index.php

I have a couple of other things that I would like help with after this

Thank you for your help

Derrick

This post has been edited by technix: 27 October 2013 - 01:30 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Assist with Code for Table Headers with Dynamic Fields

#2 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3197
  • View blog
  • Posts: 10,727
  • Joined: 12-December 12

Re: Assist with Code for Table Headers with Dynamic Fields

Posted 27 October 2013 - 02:32 PM

I am unsure what your question is. Is it about the Javascript code? In which case you'll need to post it (and this question would be in the wrong forum).

Please describe your question more clearly.
Was This Post Helpful? 0
  • +
  • -

#3 technix  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 26-February 09

Re: Assist with Code for Table Headers with Dynamic Fields

Posted 27 October 2013 - 04:14 PM

I am not sure if it would be javascript, the file is php. basically the table that I posted which is the part I'd like to have headers for the 4 columns under data and video
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3197
  • View blog
  • Posts: 10,727
  • Joined: 12-December 12

Re: Assist with Code for Table Headers with Dynamic Fields

Posted 27 October 2013 - 04:25 PM

If you are talking about directly changing the HTML then there is a five-minute table tutorial here.
Was This Post Helpful? 0
  • +
  • -

#5 technix  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 26-February 09

Re: Assist with Code for Table Headers with Dynamic Fields

Posted 27 October 2013 - 04:30 PM

I appreciate your link. I must not be explaining well at all. If I use the th and do the headers, when I use the add ore remove button it messes up the whole table.

Derrick
Was This Post Helpful? 0
  • +
  • -

#6 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3197
  • View blog
  • Posts: 10,727
  • Joined: 12-December 12

Re: Assist with Code for Table Headers with Dynamic Fields

Posted 27 October 2013 - 04:34 PM

So you should post the HTML that includes the th-tags and the Javascript code that isn't then working. (How could we help you without this information? :dontgetit:)

This post has been edited by andrewsw: 27 October 2013 - 04:37 PM

Was This Post Helpful? 0
  • +
  • -

#7 technix  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 26-February 09

Re: Assist with Code for Table Headers with Dynamic Fields

Posted 27 October 2013 - 04:50 PM

I'm so sorry. as you may already be able to tell, I am not good at this, the least bit.

ok here is with the table headings

<fieldset class="row2">
				<legend>Data Equipment</legend>
				<p> 
					<input type="button" value="Add Equipment" onclick="addRow('dataTable')" /> 
					<input type="button" value="Remove Equipment" onclick="deleteRow('dataTable')"  /> 
					<p>(All acions apply only to entries with check marked check boxes only.)</p>
				</p>
			   
               <table id="dataTable" class="form" border="1">
                  <tbody>
                    <tr>
                    
                       <th></th>
                       <th>Router-Switch-AP</th>
                       <th>Model</th>
                       <th>Serial #</th>
                       <th>Problem</th>
                    </tr>
                    <tr>
                      <p>
                      	<td><input type="checkbox"  name="chk[]" checked="checked" /></td>
						<td>
							<input type="text"  name="item[]">
						 </td>
						 <td>
							<input type="text"  name="model[]">  
					     </td>
						 <td>							
							<input type="text"  name="serial[]">
						 </td>
						 <td>
							<input type="text"  name="problemd[]">
						 </td>
							</p>
                    </tr>
                    </tbody>
                </table>



So from first glance if you visit http://mypricesaving...m/rma/index.php you can see it works as it should. if you hit add equipment you will see where the error happens.

here is the js code



function addRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	if(rowCount < 15){							// limit the user from creating fields more than your limits
		var row = table.insertRow(rowCount);
		var colCount = table.rows[0].cells.length;
		for(var i=0; i<colCount; i++) {
			var newcell = row.insertCell(i);
			newcell.innerHTML = table.rows[0].cells[i].innerHTML;
		}
	}else{
		 alert("Maximum RMA Request is 15.");
			   
	}
}

function deleteRow(tableID) {
	var table = document.getElementById(tableID);
	var rowCount = table.rows.length;
	for(var i=0; i<rowCount; i++) {
		var row = table.rows[i];
		var chkbox = row.cells[0].childNodes[0];
		if(null != chkbox && true == chkbox.checked) {
			if(rowCount <= 1) { 						// limit the user from removing all the fields
				alert("Cannot Remove all the Equipment.");
				break;
			}
			table.deleteRow(i);
			rowCount--;
			i--;
		}
	}
}



If the problem is in the JS then I am in the wrong forum. I assumed since the file was .php that I was in the correct location.

Derrick
Was This Post Helpful? 0
  • +
  • -

#8 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3197
  • View blog
  • Posts: 10,727
  • Joined: 12-December 12

Re: Assist with Code for Table Headers with Dynamic Fields

Posted 27 October 2013 - 05:00 PM

It's okay, I've moved the topic.

Well you've inserted a new row at the top, so the first thing I would try would be to change the number 0 in the following to a 1:

newcell.innerHTML = table.rows[0].cells[i].innerHTML;

Added, yeah this works ;)

This post has been edited by andrewsw: 27 October 2013 - 05:02 PM

Was This Post Helpful? 1
  • +
  • -

#9 technix  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 26-February 09

Re: Assist with Code for Table Headers with Dynamic Fields

Posted 27 October 2013 - 05:05 PM

Thank you for your help, ok so making that a 1, did in fact correct the problem with the Add although the remove still has an error but you definatly found where the error lied
Was This Post Helpful? 0
  • +
  • -

#10 andrewsw  Icon User is online

  • Fire giant boob nipple gun!
  • member icon

Reputation: 3197
  • View blog
  • Posts: 10,727
  • Joined: 12-December 12

Re: Assist with Code for Table Headers with Dynamic Fields

Posted 27 October 2013 - 05:07 PM

For the deleteRow() I would change 0 to 1 in here:

for(var i=0; i<rowCount; i++) {

so that it is looking for checkboxes starting from the 2nd row (rows are numbered from 0).

I would change this

if(rowCount <= 1) {

from 1 to 2 as well.
Was This Post Helpful? 1
  • +
  • -

#11 technix  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 20
  • Joined: 26-February 09

Re: Assist with Code for Table Headers with Dynamic Fields

Posted 27 October 2013 - 05:16 PM

Thank you so much you have helped me solve this issue
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1