将 DOM 表变量传递给 PHP

Question

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.我有一个动态表代码如下：按预期工作。

    <head>

    <style type="text/css">
    <!--
    #tblitemsgrid 
    td { 
    padding: 0.5em; 
    }
    .classy0 { background-color: #234567; color: #89abcd; }
    .classy1 { background-color: #89abcd; color: #234567; }

    th { 
    padding: 0.5em;
    background:#39C;
    text-align:center;




    }

    -->
    </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="Delete [D]" onclick="deleteChecked();" />-->
    <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>

This is a processing page:这是一个处理页面：

    <head>
    <title>Table Add Row - new window</title>
    <script language="JavaScript"> 
    <!--
    function printToPage()
    {
    var pos;
    var searchStr = window.location.search;
    var searchArray = searchStr.substring(1,searchStr.length).split('&');
    var htmlOutput = '';
    for (var i=0; i<searchArray.length; i++) {
    htmlOutput += searchArray[i] + '<br />';
    }
    return(htmlOutput);
    }
    //-->
    </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"> 
    <!--
    document.write(printToPage());
    //-->
    </script>
    </p>
    </body>
    </html>

the above displays a result:以上显示结果：

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

how can I pass javascript variables into PHP (which is server side and client side) in the above case?在上述情况下，如何将 javascript 变量传递给 PHP （服务器端和客户端）？ thanks alot in advance.提前非常感谢。

Answer 1

The way to pass variables from client-side to server-side is via HTTP Request.将变量从客户端传递到服务器端的方式是通过 HTTP 请求。 So either you redirect to a PHP page passing in the variable as GET query strings or POST data or you can also do an AJAX call of either GET or POST.因此，要么重定向到 PHP 页面，将变量作为 GET 查询字符串或 POST 数据传递，要么也可以执行 GET 或 POST 的 AJAX 调用。

Answer 2

You can use jQuery and ajax to pass these informations to server easy way您可以使用jQuery和ajax将这些信息传递给服务器简单的方法

And remember.记住。 PHP isn't client side language PHP 不是客户端语言

$.ajax({
       'url': 'ajax.php', 
       'type': 'POST',
       'data': 'accname1='+accname1+'&input1='+input1+'&input2='+input2+'&input3='+input3+'&DrAmount1='+DrAmount1+'&DrAmount2='+DrAmount2+'&DrAmount3='+DrAmount3+'&CrAmount1='+CrAmount1'&CrAmount2='+CrAmount2'&CrAmount3='+CrAmount3,
       'success': function(){
             alert('data sent');
       }
});

将 DOM 表变量传递给 PHP

问题描述

2 个解决方案

解决方案1
1 2011-07-16 10:53:03

解决方案2
0 已采纳 2011-07-16 10:52:49

将 DOM 表变量传递给 PHP

问题描述

2 个解决方案

解决方案1 1 2011-07-16 10:53:03

解决方案2 0 已采纳 2011-07-16 10:52:49

解决方案1
1 2011-07-16 10:53:03

解决方案2
0 已采纳 2011-07-16 10:52:49