Передача переменных таблицы DOM в PHP - PullRequest
Новая
       0

Передача переменных таблицы DOM в PHP

0 голосов
/ 16 июля 2011

Я не очень опытный, просто ученик.Теперь перейдем к вопросу.У меня динамическая таблица кодов ниже: работает нормально, как задумано. 

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

Это страница обработки: 

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

выше показывается результат: 

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

как я могу передать переменные javascript в PHP (на стороне сервера и на стороне клиента) в приведенном выше случае?Большое спасибо заранее.

Ответы [ 2 ]

1 голос
/ 16 июля 2011

Способ передачи переменных со стороны клиента на сторону сервера - через HTTP-запрос.Так что либо вы перенаправляете на страницу PHP, передающую переменную в виде строк запроса GET или данных POST, либо вы можете также вызывать AJAX-вызов GET или POST.

0 голосов
/ 16 июля 2011

Вы можете использовать jQuery и ajax для простой передачи этой информации на сервер

И помните.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');
       }
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...