StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POPassing DOM table variables to PHP
primarykey
Id
6716859
data
AcceptedAnswerId
6716869
AnswerCount
2
ClosedDate
CommentCount
0
CommunityOwnedDate
CreationDate
2011-07-16T10:50:28.283
FavoriteCount
0
LastActivityDate
2011-07-16T10:53:03.057
LastEditDate
LastEditorUserId
0
OwnerUserId
837168
ParentId
0
PostTypeId
1
Score
0
ViewCount
809
LastEditorDisplayName
text
Body
<p>I am not very experienced just a learner. Now come to the question. I have a dynamic table codes are below: works fine as intended.</p> <pre><code> <head> <style type="text/css">  </style> <script type="text/javascript"> var INPUT_NAME_PREFIX = 'input'; // this is being set via script var RADIO_NAME = 'totallyrad'; // this is being set via script var TABLE_NAME = 'tblitemsgrid'; // this should be named in the HTML var ROW_BASE = 1; // first number (for display) var hasLoaded = false; window.onload=fillInRows; function fillInRows() { hasLoaded = true; addRowToTable(); } // CONFIG: // myRowObject is an object for storing information about the table rows function myRowObject(one, two, three, four, five) { this.one = one; // text object this.two = two; // text object this.three = three; // text object this.four = four; // text object } /* * insertRowToTable * Insert and reorder */ function insertRowToTable() { if (hasLoaded) { var tbl = document.getElementById(TABLE_NAME); var rowToInsertAt = tbl.tBodies[0].rows.length; for (var i=0; i<tbl.tBodies[0].rows.length; i++) { } addRowToTable(rowToInsertAt); reorderRows(tbl, rowToInsertAt); } } /* * addRowToTable function addRowToTable(num) { if (hasLoaded) { var tbl = document.getElementById(TABLE_NAME); var nextRow = tbl.tBodies[0].rows.length; var iteration = nextRow + ROW_BASE; if (num == null) { num = nextRow; } else { iteration = num + ROW_BASE; } // add the row var row = tbl.tBodies[0].insertRow(num); // CONFIG: requires classes named classy0 and classy1 row.className = 'classy' + (iteration % 2); // CONFIG: This whole section can be configured // cell 0 - text - Serial Number var cell0 = row.insertCell(0); var textNode = document.createTextNode(iteration); cell0.appendChild(textNode); // cell 1 - input text - Account name var cell1 = row.insertCell(1); var txtInpACC = document.createElement('input'); txtInpACC.setAttribute('type', 'text'); txtInpACC.setAttribute('name', 'accname' + iteration); txtInpACC.setAttribute('size', '40'); txtInpACC.setAttribute('value', iteration); cell1.appendChild(txtInpACC); // cell 2 - input box- Dr amount var cell2 = row.insertCell(2); var txtInpDR = document.createElement('input'); txtInpDR.setAttribute('type', 'text'); txtInpDR.setAttribute('name', 'DrAmount' + iteration); txtInpDR.setAttribute('size', '10'); txtInpDR.setAttribute('value', iteration); // iteration included for debug purposes cell2.appendChild(txtInpDR); // cell 3 - input box- Cr amount var cell3 = row.insertCell(3); var txtInpCR = document.createElement('input'); txtInpCR.setAttribute('type', 'text'); txtInpCR.setAttribute('name', 'CrAmount' + iteration); txtInpCR.setAttribute('size', '10'); txtInpCR.setAttribute('value', iteration); // iteration included for debug purposes cell3.appendChild(txtInpCR); // cell 4 - input button - Delete var cell4 = row.insertCell(4); var btnEl = document.createElement('input'); btnEl.setAttribute('type', 'button'); btnEl.setAttribute('value', 'Delete'); btnEl.onclick = function () {deleteCurrentRow(this)}; cell4.appendChild(btnEl); // Pass in the elements you want to reference later // Store the myRow object in each row row.myRow = new myRowObject(textNode, txtInpACC, txtInpDR, txtInpCR, btnEl); } } // CONFIG: this entire function is affected by myRowObject settings function deleteCurrentRow(obj) { if (hasLoaded) { var oRows = document.getElementById('tblitemsgrid').getElementsByTagName('tr'); var iRowCount = (oRows.length - 2); if (iRowCount <1+1) { alert('Your table has ' + iRowCount + ' row(s). Row count can not be zero.'); return } var delRow = obj.parentNode.parentNode; var tbl = delRow.parentNode.parentNode; var rIndex = delRow.sectionRowIndex; var rowArray = new Array(delRow); deleteRows(rowArray); reorderRows(tbl, rIndex);} } function reorderRows(tbl, startingIndex) { if (hasLoaded) { if (tbl.tBodies[0].rows[startingIndex]) { var count = startingIndex + ROW_BASE; for (var i=startingIndex; i<tbl.tBodies[0].rows.length; i++) { // CONFIG: next line is affected by myRowObject settings tbl.tBodies[0].rows[i].myRow.one.data = count; // text // CONFIG: next line is affected by myRowObject settings tbl.tBodies[0].rows[i].myRow.two.name = INPUT_NAME_PREFIX + count; // input text var tempVal = tbl.tBodies[0].rows[i].myRow.two.value.split(' '); tbl.tBodies[0].rows[i].myRow.two.value = count + ' was' + tempVal[0]; // CONFIG: next line is affected by myRowObject settings tbl.tBodies[0].rows[i].myRow.four.value = count; // input radio // CONFIG: requires class named classy0 and classy1 tbl.tBodies[0].rows[i].className = 'classy' + (count % 2); count++; } } } } function deleteRows(rowObjArray) { if (hasLoaded) { for (var i=0; i<rowObjArray.length; i++) { var rIndex = rowObjArray[i].sectionRowIndex; rowObjArray[i].parentNode.deleteRow(rIndex); } } } function openInNewWindow(frm) { // open a blank window var aWindow = window.open('', 'TableAddRow2NewWindow', 'scrollbars=yes,menubar=yes,resizable=yes,toolbar=no,width=400,height=400'); // set the target to the blank window frm.target = 'TableAddRow2NewWindow'; // submit frm.submit(); } </script> </head> <body> <form action="tableaddrow_nw.php" method="get"> <p> <input type="button" value="Add" onclick="addRowToTable();" /> <input type="button" value="Insert [I]" onclick="insertRowToTable();" />  <input type="button" value="Submit" onclick="openInNewWindow(this.form);" /> </p> <table border="0" cellspacing="0" id="tblitemsgrid" width=600> <thead> <tr> <th colspan="5">Sample table</th> </tr> <tr> <th>E.#</th> <th>Account name</th> <th>Debit</th> <th>Credit</th> <th></th> </tr> </thead> <tbody></tbody> </table> </form> </body> </html> </code></pre> <p>This is a processing page:</p> <pre><code> <head> <title>Table Add Row - new window</title> <script language="JavaScript">  </script> </head> <body> <b>MREDKJ's Table Add Row</b> <br /> Below should be the name/value pairs that were submitted: <p> <script language="JavaScript">  </script> </p> </body> </html> </code></pre> <p>the above displays a result:</p> <pre><code>accname1=1 DrAmount1=1 CrAmount1=1 input2=2+was2 DrAmount2=2 CrAmount2=2 input3=3+was3 DrAmount3=3 CrAmount3=3 input4=4+was4 DrAmount4=4 CrAmount4=4 </code></pre> <p>how can I pass javascript variables into PHP (which is server side and client side) in the above case ? thanks alot in advance.</p>
Tags
<php><javascript><variables><dynamic>
Title
Passing DOM table variables to PHP
singulars
PostAcceptedAnswerId
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
PostParentId
1. This table or related slice is empty.
PostTypePostTypeId
1. PTQuestion
UserLastEditorUserId
1. This table or related slice is empty.
UserOwnerUserId
1. USuser837168
plurals
PostLinksPostIdRelatedPostId
1. PL
  singulars
  LinkTypeLinkTypeId
  LTLinked
PostLinksRelatedPostIdPostId
1. This table or related slice is empty.
PostsAcceptedAnswerId
1. This table or related slice is empty.
PostsParentIdCreationDate
1. PO
  singulars
  PostTypePostTypeId
  PTAnswer
2. PO
  singulars
  PostTypePostTypeId
  PTAnswer
VotesPostIdCreationDate
1. This table or related slice is empty.
CommentsPostId
1. This table or related slice is empty.

Querying!

Guidance

A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.