将DOM表变量传递给PHP_Php_Javascript_Variables_Dynamic

将DOM表变量传递给PHP

php javascript variables dynamic

将DOM表变量传递给PHP,php,javascript,variables,dynamic,Php,Javascript,Variables,Dynamic,我不是很有经验，只是一个学习者。现在来问这个问题。我有一个动态表代码如下：工作正常 <head> <style type="text/css"> <!-- #tblitemsgrid td { padding: 0.5em; } .classy0 { background-color: #234567; color: #89abcd; } .classy1 { background-

我不是很有经验，只是一个学习者。现在来问这个问题。我有一个动态表代码如下：工作正常

    <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>

在上述情况下，如何将javascript变量传递到PHP（即服务器端和客户端）中？提前多谢。

您可以轻松地使用并将这些信息传递给服务器

记住。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');
       }
});

将变量从客户端传递到服务器端的方法是通过HTTP请求。因此，您可以重定向到一个PHP页面，将变量作为GET查询字符串或POST数据传入，也可以对GET或POST进行AJAX调用。

谢谢您的回答。是否可能在上述示例动态值中包含“数据”。因为用户可能有五组行要输入，例如accname1、accname2、accname3等等。我希望我能解释清楚。抱歉，我是新手。谢谢你的回复。你能给我举个例子吗？Cheers@pixelfreak也许你可以解释一下这个问题：

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

$.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');
       }
});