我必须使用javascript验证表列。但是我无法获得行方式列值。我使用java脚本函数生成此表,如添加行和添加列。我必须提交数据以插入数据库。在提交之前我必须检查数量和perunit价格应该是数值。 但我无法应用适当的JavaScript API来获取特定的行方式列值。
我发布了我所做的代码
<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>
尽快帮助我。