0

我已经看到了与此类似的问题,但没有一个可以帮助我。因为我的代码缺少一些结果,我现在不知道为什么。

在此处输入图像描述

如上图所示,输出是 6 个结果而不是 12 个

这是用于获取值的代码

            //Fetch Sales**********************************************
            function fetchsales(){
            var Dt = document.getElementById("sDate").value;
            var Usr = document.getElementById("UserID").value;
            var Stp = document.getElementById("tstamp").value;
            var e = document.getElementById("sdepot");
            var Dpt = e.options[e.selectedIndex].value;
            var sale = new Array();

            var Tbl = document.getElementById('tbl_sales'); //html table
            var tbody = Tbl.tBodies[0];    // Optional, based on what is rendered
            for (var i = 2; i < tbody.rows.length; i++) {
            var row = tbody.rows[i];
            for (var j = 2; j < row.cells.length; j++) {
            var cell = row.cells[j];

            // For Every Cell get the textbox value
            var unitsold = cell.childNodes[0].value ;
            //Get selectbox distributor
            var Sdist = row.cells[1].childNodes[0]; //Select box always on second coloumn
            var Distributor = Sdist.options[Sdist.selectedIndex].value;
            //Get selectbox Product
            var Sprod = tbody.rows[1].cells[j].childNodes[0];
            var Product = Sprod.options[Sprod.selectedIndex].value;

            sale[(j*i)] = new Array ('('+Dt,Dpt,Product,unitsold,Distributor,Usr,Stp+')<br/>');

            }
            }

            //Debug
            var fsale = new Array();
            fsale = sale.filter(function(n){return n});
            document.getElementById("output").innerHTML = fsale;
            }
            //End Fetch Sales******************************************************

这是包含上述代码的整个文档。

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
                <html xmlns="http://www.w3.org/1999/xhtml">
                <head>
                <style>

                </style>
                <script type="text/javascript">
                //*********************************Start Add Row **********************************************************
                function addRowToTable() {
                var tbl = document.getElementById('tbl_sales'); //html table
                var columnCount = tbl.rows[0].cells.length; //no. of columns in table 
                var rowCount = tbl.rows.length; //no. of rows in table 
                var row = tbl.insertRow(rowCount); //insert a row method

                // For Every Row Added a Checkbox on first cell--------------------------------------
                var cell_1 = row.insertCell(0); //Create a new cell
                var element_1 = document.createElement("input"); //create a new element
                element_1.type = "checkbox"; //set element type
                element_1.setAttribute('id', 'newCheckbox'); //set id attribute
                cell_1.appendChild(element_1); //Append element to created cell

                // For Every Row Added add a Select box on Second cell------------------------------
                var cell_2 = row.insertCell(1);
                var element_2 = document.createElement('select');
                element_2.name = 'SelDist' + rowCount;
                element_2.className = 'styled-select';
                element_2.options[0] = new Option('John Doe', '1');
                element_2.options[1] = new Option('Dane Doe', '2');
                cell_2.appendChild(element_2);

                // For Every Row Added add a textbox on the rest of the cells starting with the 3rd,4th,5th...  coloumns going on...
                if (columnCount >= 2) { //Add cells for more than 2 columns
                for (var i = 3; i <= columnCount; i++) {
                var newCel = row.insertCell(i - 1); //create a new cell           
                var element_3 = document.createElement("input");
                element_3.type = "text";
                element_3.className = "rounded";
                element_3.name = 'txt_r'+ rowCount +'c'+(i-1);
                element_3.id = 'txt_r'+ rowCount +'c'+(i-1);  
                element_3.size = 5;  
                element_3.value = 'txt_r'+rowCount+'c'+(i-1); 
                newCel.appendChild(element_3);
                }
                }
                }
                //***************************** End Add Row ***************************************************************
                // *****************************Start Add Column**********************************************************
                function addColumn() {
                var tblBodyObj = document.getElementById('tbl_sales').tBodies[0];
                var rowCount = tblBodyObj.rows.length;

                //for every Coloumn Added Add checkbox on first row ----------------------------------------------
                var newchkbxcell = tblBodyObj.rows[0].insertCell(-1);
                var element_4 = document.createElement("input");
                element_4.type = "checkbox";
                element_4.setAttribute('id', 'newCheckbox');
                newchkbxcell.appendChild(element_4);

                //For Every Coloumn Added add Drop down list on second row-------------------------------------
                var newselectboxcell = tblBodyObj.rows[1].insertCell(-1);
                var element_5 = document.createElement('select');
                element_5.name = 'SelProd' + rowCount;
                element_5.className = 'styled-select';
                element_5.options[0] = new Option('Product11', '11');
                element_5.options[1] = new Option('Product12', '12');
                element_5.options[2] = new Option('Product13', '13');
                element_5.options[3] = new Option('Product14', '14');
                element_5.options[4] = new Option('Product15', '15');
                element_5.options[5] = new Option('Product16', '16');

                newselectboxcell.appendChild(element_5);

                // For Every Coloumn Added add a textbox on the rest of the row cells starting with the 3rd,4th,5th......  
                for (var i = 2; i < tblBodyObj.rows.length; i++) { //Add cells in all rows starting with 3rd row
                var newCell = tblBodyObj.rows[i].insertCell(-1); //create new cell
                var ClmCount = ((tblBodyObj.rows[0].cells.length)-1); 
                var element_6 = document.createElement("input");
                element_6.type = "text";
                element_6.className = "rounded"
                element_6.name = 'txt_r'+ i + 'c' + ClmCount;
                element_6.id = 'txt_r'+ i + 'c' + ClmCount;  
                element_6.size = 5;  
                element_6.value = 'txt_r'+i+'c'+ClmCount;
                newCell.appendChild(element_6)
                }
                }
                //*****************************Start Delete Selected Rows **************************************************
                function deleteSelectedRows() {
                var tb = document.getElementById('tbl_sales');
                var NoOfrows = tb.rows.length;
                for (var i = 0; i < NoOfrows; i++) {
                var row = tb.rows[i];
                var chkbox = row.cells[0].childNodes[0]; //get check box object               
                if (null != chkbox && true == chkbox.checked) { //wheather check box is selected                   
                tb.deleteRow(i); //delete the selected row                    
                NoOfrows--; //decrease rowcount by 1                   
                i--;
                }
                }
                }
                //*****************************End Delete Selected Columns **************************************************
                //*****************************Start Delete Selected Columns ************************************************
                function deleteSelectedColoumns() {
                var tb = document.getElementById('tbl_sales'); //html table
                var NoOfcolumns = tb.rows[0].cells.length; //no. of columns in table 
                for (var clm = 3; clm < NoOfcolumns; clm++) {
                var rw = tb.rows[0]; //0th row with checkboxes
                var chkbox = rw.cells[clm].childNodes[0];
                console.log('Current Coloumn:'+clm+',', NoOfcolumns, chkbox); // test with Ctrl+Shift+K or F12
                if (null != chkbox && true == chkbox.checked) {
                //-----------------------------------------------------
                var lastrow = tb.rows;
                for (var x = 0; x < lastrow.length; x++) {
                tb.rows[x].deleteCell(clm);
                }
                //----------------------------------------- 
                NoOfcolumns--;
                clm--;
                } else {
                //alert("not selected");
                }
                }
                }
                //*****************************End Delete Selected Columns **************************************************


                //Fetch Sales**********************************************
                function fetchsales(){
                var Dt = document.getElementById("sDate").value;
                var Usr = document.getElementById("UserID").value;
                var Stp = document.getElementById("tstamp").value;
                var e = document.getElementById("sdepot");
                var Dpt = e.options[e.selectedIndex].value;
                var sale = new Array();

                var Tbl = document.getElementById('tbl_sales'); //html table
                var tbody = Tbl.tBodies[0];    // Optional, based on what is rendered
                for (var i = 2; i < tbody.rows.length; i++) {
                var row = tbody.rows[i];
                for (var j = 2; j < row.cells.length; j++) {
                var cell = row.cells[j];

                // For Every Cell get the textbox value
                var unitsold = cell.childNodes[0].value ;
                //Get selectbox distributor
                var Sdist = row.cells[1].childNodes[0]; //Select box always on second coloumn
                var Distributor = Sdist.options[Sdist.selectedIndex].value;
                //Get selectbox Product
                var Sprod = tbody.rows[1].cells[j].childNodes[0];
                var Product = Sprod.options[Sprod.selectedIndex].value;

                sale[(j*i)] = new Array ('('+Dt,Dpt,Product,unitsold,Distributor,Usr,Stp+')<br/>');

                }
                }

                //Debug
                var fsale = new Array();
                fsale = sale.filter(function(n){return n});
                document.getElementById("output").innerHTML = fsale;
                }
                //End Fetch Sales******************************************************     
                //on loading create 3 coloumns and 2 rows
                window.onload = function () {addColumn();addColumn();addColumn();addRowToTable();addRowToTable();}; 
                </script>

                <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
                <title>Distributor Sales</title>
                </head>

                <body>
                <!--A--->
                <div class="datagrid shadow" style="float:left; min-width:160px; width:220px">
                <table  id="top">
                <tbody>
                <tr>
                <td width="100px">
                <label for="textfield2">Date</label>
                <input id="sDate" name="sDate" type="date" size="10" class="rounded" value="2013-06-04" />
                </td>
                </tr>
                <tr class="alt">
                <td width="220px">
                <label for="select">Depot</label>
                <select name="sdepot" id="sdepot" class="styled-select">
                <option value="1">Muranga</option>
                <option value="2" selected="selected">Nyahururu</option>
                <option value="3">Karatina</option>
                </select>
                </td>
                </tr>
                </tbody>
                </table>
                </div>
                <!--C--->
                <div class="datagrid shadow" style="float:left; margin-left:20px; width:250px; min-width:250px">
                <table>
                <tbody>
                <tr>
                <td>
                <label for="textfield4">User ID</label>
                <input id="UserID" name="UserID" type="text" class="rounded" value="121" />
                </td>

                </tr>
                <tr class="alt">
                <td>

                <label for="textfield5">Time Stamp</label>
                <input type="date" name="tstamp" id="tstamp" class="rounded" value="2013-06-02" />
                </td>
                </tr>
                </tbody>
                </table>
                </div>
                <div style="clear:both"></div>
                </br>
                <div class="mainG gradient-style shadow"  style="min-width:500px; min-height:120px">  
                <table id="tbl_sales" border="1" bordercolor="#E1EEF4" background="table-images/blurry.jpg">
                <tr>
                <td></td>
                <td><input type="button" name="button3" id="button3" value="-Row" onclick="deleteSelectedRows()" />
                <input type="button" name="button4" id="button4" value="-Coloumn" onclick="deleteSelectedColoumns()" /></td>
                </tr>
                <tr>
                <td></td>
                <td><input type="button" name="addrowbutton" id="adrwbutton" value="+Row" onclick="addRowToTable();" />
                <input type="button" name="adclmbutton" id="addclmnbutton" value="+Coloumn" onclick="addColumn()" />
                </td>
                </tr>
                </table>
                </div> 
                <div style="clear:both"></div>
                <br/>
                <div class="datagrid shadow" style="float:left; margin-left:20px; width:200px; min-width:200px; padding-left:10px">
                <table id="bottom1" style="min-width:200px">
                <tbody>
                <tr>
                <td>
                <div align="center"><input name="myBtn" type="submit" value="Save Information" onClick="javascript:fetchsales();">
                </td>
                </tr>
                </tbody>
                </table>
                </div>
                <div style="clear:both"></div>
                <br/>
                <div id="output"></div>
                </body>
                </html>

注意:我希望将结果连接到 mysql insert 语句

任何帮助将不胜感激。

4

1 回答 1

1

问题来自这一行:

sale[(j*i)] = new Array ('('+Dt,Dpt,Product,unitsold,Distributor,Usr,Stp+')<br/>');

使用 for 循环索引乘以自身并不能确保唯一的数组索引,在某些情况下它们会重复(例如 2*3 和 3*2)并且数组中的前一个值会被覆盖。

于 2013-06-04T16:13:53.553 回答