File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
The moose likes HTML, CSS and JavaScript and the fly likes about checking values between rows with dynamic table created using java script Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "about checking values between rows with dynamic table created using java script" Watch "about checking values between rows with dynamic table created using java script" New topic

about checking values between rows with dynamic table created using java script

prajapatisagar Sagar
Ranch Hand

Joined: Feb 28, 2011
Posts: 35
<%@page contentType="text/html; charset=iso-8859-1" language="java" import="java.sql.*,java.util.*" errorPage="" %>
<%@ page import="*" %>
<%@ page import="*"%>
<%@ page import="*" %>
<jsp:include page="../include/invSessionManager.jsp" />
Utilities util=new Utilities();
String msg="";
Branch br=new Branch();
String fiscalYr = br.getFiscalYr();
String reqId = br.getMaxReqId();
java.util.Iterator itemList=br.getItem().iterator();
<link href="../css/style.css" rel="stylesheet" type="text/css">
<link href="../css/table_style.css" rel="stylesheet" type="text/css">
<link href="../css/menu.css" type="text/css" media="screen" rel="stylesheet">
<script type="text/javascript">if (!window.qmad){qmad=new Object();qmad.binit="";qmad.bvis="";qmad.bhide="";}</script>
<script type="text/JavaScript" src="../js/menu.js"> </script>

<script language="javascript" src="../js/cal2.js"></script>
<script language="javascript" src="../js/cal_conf2.js"></script>
<script language="javascript" src="../js/getEmpNameByEmail_ajax.js"></script>
<script language="JavaScript">
function dates(){
var date = new Date();
var d = date.getDate();
var day = (d < 10) ? '0' + d : d;
var m = date.getMonth() + 1;
var month = (m < 10) ? '0' + m : m;
var yy = date.getYear();
var year = (yy < 1000) ? yy + 1900 : yy;
document.f1.reqDt.value=year + "-" + month + "-" + day;
<script language="JavaScript" type="text/JavaScript">
function callLov(theURL,height,width){,'LOV','scrollbars=yes,resizable=no,width='+width+',height='+height)
<script language="JavaScript" type="text/JavaScript">
function check(val,name){
if (val=='' || val==0 || val<0 || isNaN(val)){
alert('Enter the Qty, it must be greater than 0');


function checkform(){
var msg="";
var foo="";
var sum="The following errors occurred,\n";
var myform;
myform= document.f1;
if( document.f1.reqDt.value=="") {
msg=msg+" - Missing Requisition Date\n";
if( document.f1.empEmail.value=="") {
msg=msg+" - Missing Approving Email\n";
if( document.f1.empName.value=="") {
msg=msg+" - Missing Approving Name\n";

return false;

<script type="text/javascript">
// these array values correspond to the current status of their checkboxes
var itemDtl = new Array();
itemDtl["itemCd"] = true;
itemDtl["itemDesc"] = true;
itemDtl["qty"] = true;
itemDtl["ch"] = false;

document.getElementsByClassName = function(class_name) {
var docList = this.all || this.getElementsByTagName("*");
var matchArray = new Array();

// create a regular expression object for class
var re1 = new RegExp("\\b"+class_name+"\\b");

// create regular expression to handle dashes in class name
var re2 = new RegExp("[\S]"+class_name+"|"+class_name+"[\S]");

for (var i = 0; i < docList.length; i++) {
if (re1.test(docList[i].className) && !re2.test(docList[i].className) ) {
matchArray[matchArray.length] = docList[i];
return matchArray;

// add/remove table column for specified language
function dyn_table_change_itemm(itemm) {
var cb = document.getElementById("cb"+itemm);

itemDtl[itemm] = cb.checked;

// make sure at least one checkbox is checked
if (!cb.checked) {
var num_checked = 0;
for (var key in itemDtl) {
if (itemDtl[key]) {

if (num_checked == 0) {
itemDtl[itemm] = true;
cb.checked = true;
alert("You must keep at least one language enabled.");

var cells = document.getElementsByClassName(itemm);
for (var i=0; i<cells.length; i++) {
cells[i].style.display = cb.checked ? "block" : "none";
// hide all table cells that are part of a disabled language/column
function dyn_table_hide_itemDtl() {
for (var itemm in itemDtl) {
if (!itemDtl[itemm]) {
var cells = document.getElementsByClassName(itemm);
for (var i=0; i<cells.length; i++) {
cells[i].style.display = "none";

// add a new table row
function dyn_table_add_category() {
var tbody = document.getElementById("dyn_table_categories");
// count up all the existing categories on the screen so that new rows category id can be determined
var category_id = 1;
while (true) {
var row = document.getElementById("category"+category_id);
if (!row) {

var tr = document.createElement("tr");
tr.setAttribute("id", "category"+category_id);

var td_label = document.createElement("td");
td_label.appendChild(document.createTextNode("Item "+category_id+" Name:"));
td_label.setAttribute("class", "left");
td_label.setAttribute("className", "left");

var td_itemCd = document.createElement("td");
td_itemCd.setAttribute("class", "itemCd");
td_itemCd.setAttribute("className", "itemCd");

var td_itemDesc= document.createElement("td");
td_itemDesc.setAttribute("class", "itemDesc");
td_itemDesc.setAttribute("className", "itemDesc");

var td_unitDesc= document.createElement("td");
td_unitDesc.setAttribute("class", "unitDesc");
td_unitDesc.setAttribute("className", "unitDesc");

var td_qty = document.createElement("td");
td_qty.setAttribute("class", "qty");
td_qty.setAttribute("className", "qty");

var td_ch = document.createElement("td");
td_ch.setAttribute("class", "ch");
td_ch.setAttribute("className", "ch");

var td_del_link = document.createElement("td");

var a_del_link = document.createElement("a");

a_del_link.setAttribute("id", "del_category"+category_id);
a_del_link.setAttribute("href", "javascript:dyn_table_del_category("+category_id+")");
a_del_link.appendChild(document.createTextNode("Delete Item "+category_id));

var input_itemCd = document.createElement("input");
input_itemCd.setAttribute("type", "text");
input_itemCd.setAttribute("name", "itemCd"+category_id);
input_itemCd.setAttribute("id", "itemCd"+category_id);
// input_itemCd.setAttribute("onDblClick","javascript:callLov('../lov/lovItemDetails.jsp?id="+category_id+"','300','316')");

var input_itemDesc= document.createElement("input");
input_itemDesc.setAttribute("type", "text");
input_itemDesc.setAttribute("name", "itemDesc"+category_id);
input_itemDesc.setAttribute("id", "itemDesc"+category_id);
input_itemDesc.setAttribute("size", "40");

var input_qty= document.createElement("input");
input_qty.setAttribute("type", "text");
input_qty.setAttribute("name", "qty"+category_id);
input_qty.setAttribute("id", "qty"+category_id);
var q=this.value;
if (q=='' || q==0 || q<0 || isNaN(q)){
alert('Enter the Qty, it must be greater than 0');



var input_unitDesc= document.createElement("input");
input_unitDesc.setAttribute("type", "text");
input_unitDesc.setAttribute("name", "unitDesc"+category_id);
input_unitDesc.setAttribute("id", "unitDesc"+category_id);

var input_ch= document.createElement("input");
input_ch.setAttribute("type", "hidden");
input_ch.setAttribute("name", "ch"+category_id);
input_ch.setAttribute("id", "ch"+category_id);
input_ch.setAttribute("value", category_id);



// remove specified category/row
function dyn_table_del_category(category_id) {
var tr = document.getElementById("category"+category_id);
if (!tr) {

// must decrement category_id value of all subsequent rows
while (true) {
var new_category_id = category_id - 1;
tr = document.getElementById("category"+category_id);

if (!tr) {
var children = tr.childNodes;
tr.setAttribute("id", "category"+new_category_id);

// I tried avoiding 'innerHTML', but that didn't help

//children[0].innerHTML = "";
children[0].appendChild(document.createTextNode("Item "+new_category_id+" Name:"));
children[1].childNodes[0].setAttribute("name", "itemCd"+new_category_id);
children[1].childNodes[0].setAttribute("id", "itemCd"+new_category_id);
children[2].childNodes[0].setAttribute("name", "itemDesc"+new_category_id);
children[2].childNodes[0].setAttribute("id", "itemDesc"+new_category_id);
children[3].childNodes[0].setAttribute("name", "qty"+new_category_id);
children[3].childNodes[0].setAttribute("id", "qty"+new_category_id);
children[4].childNodes[0].setAttribute("name", "unitDesc"+new_category_id);
children[4].childNodes[0].setAttribute("id", "unitDesc"+new_category_id);
children[5].childNodes[0].setAttribute("name", "ch"+new_category_id);
children[5].childNodes[0].setAttribute("id", "ch"+new_category_id);
children[6].childNodes[0].setAttribute("id", "del_category"+new_category_id);
children[6].childNodes[0].setAttribute("href", "javascript:dyn_table_del_category("+new_category_id+")");

var a_del_link = document.createElement("a");
a_del_link.setAttribute("id", "del_category"+new_category_id);
a_del_link.setAttribute("href", "javascript:dyn_table_del_category("+new_category_id+")");
a_del_link.appendChild(document.createTextNode("Delete Item "+new_category_id));

//children[4].childNodes[0].innerHTML = "";
<body onLoad="dates();document.f1.empEmail.focus();">
<jsp:include page="../include/header.jsp" />
<div class="clear">
<jsp:include page="../include/isInvMenu.jsp" />
<script type="text/javascript">

<div id="content">
<% if (msg != null){out.println(msg);}%>
<div class="title">Add Requisition Details</div>
<div class="contentbox">
<form name="f1" action="doAddRequisition.jsp" method="post" onSubmit="return checkform();">
<TABLE border="0" cellpadding="4" width="100%">
<td width="40"> </td>
<td width="103" > </td>
<td colspan="3" > </td>
<td> </td>
<td >Fiscal year</td>
<td ><input name="fiscalYear" type="text" value=<%=fiscalYr%> maxlength="64" readonly></td>
<td width="80" >Branch/Department: </td>
<td width="465" colspan="2">
<input name="deptCd" type="hidden" value="<%=session.getAttribute("curDeptCd").toString()%>" maxlength="64" readonly size="40">
<input name="deptDesc" type="text" value="<%=util.getDesc("department_desc","department","department_cd",session.getAttribute("curDeptCd").toString())%>" maxlength="64" readonly size="80" class="input-nobox" style="padding:5px;">
<td> </td>
<td>Requisition Date </td>
<td width="170"><input name="reqDt" type="text" maxlength="10" size="20" readonly="">
 <a href="javascript:showCal('Calendar3')"><img src="../../hrm/images/calendar.gif" width="11" height="13" border="0"></a> </td>
<td colspan="2"> </td>

<td> </td>
<td>Approving Email</td>
<td ><input name="empEmail" type="text" size="35" onChange="getEmpNameByEmail(this.value);" maxlength="50"></td>
<td colspan="3" ><input name="empName" type="text" class="input-nobox" readonly size="35" maxlength="50">
<input name="empCd" type="hidden"></td>
<td> </td>
<td colspan="4"><input name="remarks" type="text" value="" maxlength="100" size="60"></td>
<td> </td>
<td > </td>
<td colspan="3" > </td>
<table width="100%" border="0" align="center" cellpadding="2" cellspacing="1" bgcolor="#000000">
<tr bgcolor="#ECE9D8">
<div id="dyn_table" class="channel_fields">
<div class="box dark">
<table width="100%" border="0" cellpadding="2" cellspacing="2" bgcolor="#ECE9D8">
<!-- IE7 requires the tbody tag when appending/removing children with JS -->
<tbody id="dyn_table_categories">
<Td width="174"><div class="left"><a href="javascript:dyn_table_add_category()">Add New Item</a></div></Td>
<td width="126" class="left"></td>
<td class="left"> </td>
<td width="126" class="itemCd"><strong>Item Code</strong></td>
<td width="212" class="itemDesc"><strong>Item Description</strong></td>
<td width="169" class="qty"><strong>Quantity</strong></td>
<td width="169" class="qty"><strong>Unit</strong></td>
<tr id="category1">
<td class="left">Item 1 Name:</td>
<td ><input type="text" name="itemCd1" id="itemCd1" onDblClick="callLov('../lov/lovItemDetails.jsp?id=1','300','316')" readonly="" title="Double Click Here"/></td>
<td ><input type="text" name="itemDesc1" id="itemDesc1" readonly="" size="40" class="input-nobox"/></td>
<td ><input type="text" name="qty1" id="qty1" onChange="check(this.value,;" /></td>
<td ><input type="text" name="unitDesc1" id="unitDesc1" class="input-nobox" readonly=""/></td>
<td width="231"><input name="ch1" type="hidden" value="1"></td>

<TABLE align="left" width="100%">
<TD><input type="submit" name="Submit" value="Submit" /></TD>
<td><jsp:include page="../include/footer.html"/></td>

Above is the code i am using to create dynamic table with item cd,item description,quantity,unit etcs
every thing here now is running fine now what i want to do is test values in item cd field.
the item cd field is unique while entering to database,on clicking the add category link its takes values from the database such that is puts the values in item code,item description,quantity etc, now i want to check the item code value so that it cannot select the same item code twice.

i dont have idea please help.
Eric Pascarello

Joined: Nov 08, 2001
Posts: 15385
Use code tags!

There is way too much code to weed through.

What issue are you having with that validation step? Seems like you would keep an array of values that are selected and check to see if the item in in the array. If it is, throw an error.

prajapatisagar Sagar
Ranch Hand

Joined: Feb 28, 2011
Posts: 35
Eric Pascarello wrote:Use code tags!

There is way too much code to weed through.

What issue are you having with that validation step? Seems like you would keep an array of values that are selected and check to see if the item in in the array. If it is, throw an error.


i just want to check if the itemCd value has been inserted earlier in the dynamically created itemCd that is text box how to do this ???
I agree. Here's the link:
subject: about checking values between rows with dynamic table created using java script
It's not a secret anymore!