如何使用javascript

时间:2016-01-25 11:37:21

标签: javascript jquery jsp

我必须使用javascript验证表列。但是我无法获得行方式列值。我使用java脚本函数生成此表,如添加行和添加列。我必须提交数据以插入数据库。在提交之前我必须检查数量和perunit价格应该是数值。           但我无法应用适当的JavaScript API来获取特定的行方式列值。

please check this image

我发布了我所做的代码

   <script language="javascript">

                    // Add row to the HTML table

                    function addRow() {    
                        var table = document.getElementById('my_table'); //html table
                        var rowCount = table.rows.length; //no. of rows in table
                        var columnCount =  table.rows[0].cells.length; //no. of columns in table          
                        var row = table.insertRow(rowCount); //insert a row            

                        var cell1 = row.insertCell(0); //create a new cell           
                        var element1 = document.createElement("input"); //create a new element           
                        element1.type = "checkbox"; //set the element type 
                        element1.setAttribute('id', 'newCheckbox'); //set the id attribute  
                        element1.setAttribute('checked',true); //set the id attribute 
                        cell1.appendChild(element1); //append element to cell

                        var cell2 = row.insertCell(1);            
                        var element2 = document.createElement("input");            
                        element2.type = "text"; 
                        element2.setAttribute('id', 'newInput'); //set the id attribute
                        element2.setAttribute('name', 'sl'+rowCount);
                        element2.setAttribute('style', 'width: 50px');
                        cell2.appendChild(element2);      

                        var cell3 = row.insertCell(2);            
                        var element3 = document.createElement("input");            
                        element3.type = "textarea"; 
                        element3.setAttribute('rows', '4');
                        element3.setAttribute('cols','40');
                        element3.setAttribute('id', 'newInput'); //set the id attribute
                        element3.setAttribute('name', 'discription'+rowCount);
                        cell3.appendChild(element3);         

                        var cell4 = row.insertCell(3);            
                        var element4 = document.createElement("input");            
                        element4.type = "text"; 
                        element4.setAttribute('id', 'newInput'); //set the id attribute
                        element4.setAttribute('name', 'quantity'+rowCount);

                        cell4.appendChild(element4);


                        var cell5 = row.insertCell(4);            
                        var element5 = document.createElement("input");            
                        element5.type = "text"; 
                        element5.setAttribute('id', 'newInput'); //set the id attribute
                        element5.setAttribute('name', 'price'+rowCount);
                        cell5.appendChild(element5);



                        var cell6 = row.insertCell(5);            
                        var element6 = document.createElement("input");            
                        element6.type = "text"; 
                        element6.setAttribute('id', 'newInput'); //set the id attribute
                        element6.setAttribute('name', 'CST'+rowCount);
                        element6.setAttribute('style', 'width: 50px');
                        cell6.appendChild(element6);




                        var cell7 = row.insertCell(6); //create a new cell           
                        var element7 = document.createElement("input"); //create a new element           
                        element7.type = "checkbox"; //set the element type 
                        element7.setAttribute('id', 'vat5'); //set the id attribute 
                        element7.setAttribute('name','tax'+rowCount);
                        element7.setAttribute('value','vat5');
                        cell7.appendChild(element7);

                        var cell8 = row.insertCell(7); //create a new cell      
                        var element8 = document.createElement("input"); //create a new element           
                        element8.type = "checkbox"; //set the element type 
                        element8.setAttribute('id', 'vat14'); //set the id attribute 
                        element8.setAttribute('name','tax'+rowCount);
                        element8.setAttribute('value','vat14')  ;     
                        cell8.appendChild(element8);

                        var cell9 = row.insertCell(8); //create a new cell      
                        var element9 = document.createElement("input"); //create a new element           
                        element9.type = "checkbox"; //set the element type 
                        element9.setAttribute('id', 'serviceTax'); //set the id attribute 
                        element9.setAttribute('name','tax'+rowCount);    
                        element9.setAttribute('value','serviceTax');
                        cell9.appendChild(element9);

                    }

                    //Alert




                    // delete the selected rows from table
                    function deleteSelectedRows() {    
                        var table = document.getElementById('my_table'); //html table
                        var rowCount = table.rows.length; //no. of rows in table          
                        for(var i=0; i< rowCount; i++) { //loops for all row in table               
                            var row = table.rows[i]; //return a particular row              
                            var chkbox = row.cells[0].childNodes[0]; //get check box object               
                            if(null != chkbox && true == chkbox.checked) { //wheather check box is selected                   
                                table.deleteRow(i); //delete the selected row                    
                                rowCount--; //decrease rowcount by 1                   
                                i--;               
                            }             
                        }
                    }

                    // append column to the HTML table
                    function addColumn() {    
                        var tblHeadObj = document.getElementById('my_table').tHead; //table head
                        for (var h=0; h< tblHeadObj.rows.length; h++) {
                            var newTH = document.createElement('th');
                            tblHeadObj.rows[h].appendChild(newTH); //append ne th to table
                            newTH.innerHTML = 'Column '+ (tblHeadObj.rows[h].cells.length); //append th content to th
                        }

                        var tblBodyObj = document.getElementById('my_table').tBodies[0]; //table body
                        for (var i=0; i< tblBodyObj.rows.length; i++) {
                            var newCell = tblBodyObj.rows[i].insertCell(-1); //create new cell
                            newCell.innerHTML = 'cell '+ (tblBodyObj.rows[i].cells.length); //append data to cell
                        }
                    }

                    // delete table rows with index greater then 0
                    function deleteAllRows() {    
                        var tbl = document.getElementById('my_table'); // table reference        
                        lastRow = tbl.rows.length - 1; // set the last row index           
                        // delete rows with index greater then 0    
                        for (i = lastRow; i > 0; i--) {        
                            tbl.deleteRow(i);  //delete the row  
                        }
                    } 

                    // delete last table column
                    function deleteColumn() {    
                        var allRows = document.getElementById('my_table').rows;
                        for (var i=0; i< allRows.length; i++) {
                            if (allRows[i].cells.length > 3) {
                                allRows[i].deleteCell(-1); //delete the cell
                            } else {
                                alert("You can't delete more columns.");
                                return;
                            }
                        }
                    }

                    function generate(){
                        var table = document.getElementById('my_table'); 
                        var rowCount = table.rows.length;
                        var f = document.form;
                        f.target = "_blank";
                        f.method="post";
                        f.action='ViewPO.jsp?rowCount='+rowCount;
                        f.submit();

                    }





                function generate1(){
                    var table = document.getElementById('my_table'); 
                    var rowCount = table.rows.length;
                    document.write(rowCount)
                    var a;
                    var b=document.myform.punitprice.value;
                    var c=document.myform.ptax.value;
                    var regexLetter = /[a-zA-z]/;


                    for(var j=1;i<=rowcount;i++){
                         var oCells = table.rows.item(j).cells;
                     a=oCells[3].firstChild.data;
                    }
                    if(regexLetter.test(a)){
                        alert('Enter Only Numeric Values For ');
                        return false;
                    } 
                    var f = document.form;
                    f.target = "";
                    f.method="post";
                    f.action='purchaseAction.jsp?rowCount='+rowCount;
                   // f.submit();
                }

                 </script>                      
<table id="my_table" align="center" border="2" cellpadding="0" cellspacing="0">
                                <thead><tr>
                                        <th>Select</th>
                                        <th>Sl.no</th>
                                        <th>Description of Services/Goods</th>
                                        <th>Quantity</th>
                                        <th>Price/Unit</th>  
                                        <th>CST %</th>                                      
                                        <th>VAT5.5%</th>
                                        <th>VAT14.5%</th>
                                        <th>ServiceTax%</th>


                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>


                         </div>
                         <br>
                         </center>
                          <center>
                        <hr/>
                        <bgcolor ="red"/>
                        <input type="button" value="Add row"  name="add" onClick="addRow()"/>
                        <input type="button" value="Delete selected rows" name="delete_all" onClick="deleteSelectedRows()" />
                        <input type="button" value="Delete all rows" name="delete" onClick="deleteAllRows()" /><br/>
                        <hr/>
                        <p>

                            <input type="submit" value="Save" onclick="generate1()" />
                            <input type="submit" value="View PO" onclick="generate()"/>

                             </center>
                             <hr/>
                    </form>
            </div>

尽快帮助我。

0 个答案:

没有答案