Friday 11 September 2015



<html>

<head>
<TITLE>ROW Add</TITLE>

    <script type="text/javascript">

function displayResult(j)
{
    if (j <= document.getElementById("purchaseItems").rows.length) {
        for (var i= document.getElementById("purchaseItems").rows.length; i>j ;i--) {
            var elName = "addRow[" + i + "]";
            var newName = "addRow[" + (i+1) + "]";
            var newClick = "displayResult(" + (i+1) + ")";
            var modEl = document.getElementsByName(elName);

            modEl.setAttribute("onclick", newClick);
            document.getElementsByName("addRow[" + i + "]").setAttribute('name', "addRow[" + (i+1) + "]");
        }
    }
    var table=document.getElementById("purchaseItems");
    var row=table.insertRow(j);
    var cell1=row.insertCell(0);
    var cell2=row.insertCell(1);
    var cell3=row.insertCell(2);
    var cell4=row.insertCell(3);
    var cell5=row.insertCell(4);
    cell1.innerHTML="<input type=text class='tbDescription' name='description[]' required/>";
    cell2.innerHTML="<input type=text name='itemPrice[]' required />";
    cell3.innerHTML="<input type=text name='itemquantity[]' required />";
    cell4.innerHTML="<input type='text' name='lineTotal[]' readonly />";
    cell5.innerHTML="<input type='button' name='addRow["+ j + "]' class='add' onclick=\"displayResult(" + (j+1) + ")\" value='+' />";
}
    </script>



</head>
<body>
<h2>Add Row </h2>


<table id= "purchaseItems" name="purchaseItems" align="center">
<tr>
    <th>Description</th>
    <th>price</th>
    <th>quantity</th>
    <th>Line Total</th>
    <td>&nbsp;</td>
</tr>
<tr>
    <td><input type="text" name="description[]" class="tbDescription" required /></td>
    <td><input type="text" name="price[]" required /></td>
    <td><input type="text" name="quantity[]" required /></td>
    <td><input type="text" name="lineTotal[]" readonly /></td>
    <td><input type="button" name="addRow[1]" onclick="displayResult(2)" class="add" value='+' /></td>
</tr>
</table>
</body>

</html>
Posted by at No comments:
Labels:


<html>

<head>
<TITLE>ROW Add</TITLE>

    <script type="text/javascript">
function addRow() {
       
    var myName = document.getElementById("name");
    var age = document.getElementById("age");
    var table = document.getElementById("myTableData");

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);

    row.insertCell(0).innerHTML= '<input type="button" value = "Delete" onClick="Javacsript:deleteRow(this)">';
    row.insertCell(1).innerHTML= myName.value;
    row.insertCell(2).innerHTML= age.value;

}

function deleteRow(obj) {
   
    var index = obj.parentNode.parentNode.rowIndex;
    var table = document.getElementById("myTableData");
    table.deleteRow(index);
 
}

function addTable() {
   
    var myTableDiv = document.getElementById("myDynamicTable");
   
    var table = document.createElement('TABLE');
    table.border='1';
 
    var tableBody = document.createElement('TBODY');
    table.appendChild(tableBody);
   
    for (var i=0; i<3; i++){
       var tr = document.createElement('TR');
       tableBody.appendChild(tr);
     
       for (var j=0; j<4; j++){
           var td = document.createElement('TD');
           td.width='75';
           td.appendChild(document.createTextNode("Cell " + i + "," + j));
           tr.appendChild(td);
       }
    }
    myTableDiv.appendChild(table);
 
}

function load() {
 
    console.log("Page load finished");

}
    </script>



</head>
<body onload="load()">
<div id="myform">
<b>Simple form with name and age ...</b>
<table>
    <tr>
        <td>Name:</td>
        <td><input type="text" id="name"></td>
    </tr>
    <tr>
        <td>Age:</td>
        <td><input type="text" id="age">
        <input type="button" id="add" value="Add" onclick="Javascript:addRow()"></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
</div>
<div id="mydata">
<b>Current data in the system ...</b>
<table id="myTableData"  border="1" cellpadding="2">
    <tr>
        <td>&nbsp;</td>
        <td><b>Name</b></td>
        <td><b>Age</b></td>
    </tr>
</table>
&nbsp;

</div>
<div id="myDynamicTable">
<input type="button" id="create" value="Click here" onclick="Javascript:addTable()">
to create a Table and add some data using JavaScript
</div>
</body>

</html>
Posted by at No comments:
Labels:

Tuesday 8 September 2015

Marksheet Codes in Javascript with HTML and CSS


<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Mark Sheet</title>
<link rel="stylesheet" href="domi.css" />

<script>
function myfunction(){
var a = document.form1.txtname.value;
document.getElementById("name").innerHTML=a;
var b = document.form1.txtfame.value;
document.getElementById("fname").innerHTML = b;
var c = document.form1.txtinstitute.value;
document.getElementById("inst_name").innerHTML = c;
var d = document.form1.txtbatch.value;
document.getElementById("batch").innerHTML = d;
var e = document.form1.txtaccount.value;
document.getElementById("account").innerHTML = e;
var f = document.form1.txtdesign.value;
document.getElementById("designing").innerHTML = f;
var g = document.form1.txtmath.value;
document.getElementById("math").innerHTML = g;
var h = document.form1.txtdevelop.value;
document.getElementById("develop").innerHTML = h;

var txt1 = eval(parseFloat(document.form1.txtaccount.value)+parseFloat(document.form1.txtdesign.value)+parseFloat(document.form1.txtmath.value)+parseFloat(document.form1.txtdevelop.value));
document.getElementById("total").innerHTML = txt1;

var txt2 =eval(parseFloat(txt1*100)/400);
document.getElementById("percent").innerHTML = txt2.toFixed(2)+"%";


switch(true)
{
case(txt2>=80):
document.getElementById("grade").innerHTML="A1";
break;
case(txt2>=70):
document.getElementById("grade").innerHTML="A";
break;
case(txt2>=60):
document.getElementById("grade").innerHTML="B";
break;
case(txt2>=50):
document.getElementById("grade").innerHTML="C";
break;
case(txt2>=40):
document.getElementById("grade").innerHTML="D";
break;
case(txt2<40):
document.getElementById("grade").innerHTML="Fail";
break;
}

}


</script>

</head>

<body>
<div id="container">

<div class="marksheet">
<h1>STUDENT MARKSHEET</h1>

<fieldset>
<legend>Student Information</legend>
<table id="tbl1">
<form name="form1">
<tr>
<td>Name:</td><td><input type="text" name="txtname" /> </td>
<td>&nbsp; &nbsp; Father Name:</td><td><input type="text" name="txtfame" /></td>
</tr>
<tr>
<td>Institute Name:</td><td><input type="text" name="txtinstitute" /></td>
<td>&nbsp; &nbsp; Batch:</td><td><input type="numb" name="txtbatch" /></td>
</tr>
</table>
</fieldset>
<br /><br />

<fieldset>
<legend>Suject Remarks</legend>
<table height="232" id="tbl2">
<tr>
<td width="140">Accounting</td><td><input type="text" name="txtaccount" maxlength="2" size="10" />
&nbsp; Out of 100</td>
</tr>
<tr>
<td width="140">Web Designin</td><td><input type="text" name="txtdesign" size="10" maxlength="2" />
&nbsp; Out of 100</td>
</tr>
<tr>
<td width="140">Mathematic</td><td><input type="text" name="txtmath" maxlength="2" size="10" />
&nbsp; Out of 100</td>
</tr>
<tr>
<td width="140">Web Development</td><td><input type="text" name="txtdevelop" maxlength="2"  size="10" />
&nbsp; Out of 100
</td>
</tr>
</table>
<div class="btn">
<button type="button" onclick="myfunction()">Submitt</button>
<button type="reset" name="reset">Reset</button>
</div>
</fieldset>
</form>


<div class="std_info">
<table border="1">
<tr>
<th colspan="2" width="240">Student Information</th>
</tr>
<tr>
<td width="135">Name:</td><td><FONT face="arial" id="name"></FONT></td>
</tr>
<tr>
<td width="135">Father Name:</td><td><font face="arial" id="fname"></font></td>
</tr>
<tr>
<td width="135">Institute Name:</td><td><font face="arial" id="inst_name"></font></td>
</tr>
<tr>
<td width="135">Batch:</td><td><font face="arial" id="batch"></font></td>
</tr>



<tr>
<th colspan="2" width="135">Subject Remarks</th>
</tr>
<tr>
<td width="135">Accounting:</td><td><font face="arial" id="account"></font></td>
</tr>
<tr>
<td  width="135">Web Designing:</td><td><font face="arial" id="designing"></font></td>
</tr>
<tr>
<td width="135">Mathematic:</td><td><font face="arial" id="math"></font></td>
</tr>
<tr>
<td width="135">Web Development:</td><td><font face="arial" id="develop"></font></td>
</tr>


<tr>
<th colspan="2" width="140">Subject Remarks</th>
</tr>
<tr>
<td width="135">Total:</td><td><font face="arial" id="total"></font></td>
</tr>
<tr>
<td width="135">Percentage:</td><td><font face="arial" id="percent"></font></td>
</tr>
<tr>
<td width="135">Grade:</td><td><font face="arial" id="grade"></font></td>
</tr>

</table>
</div>

</div><!--marksheet-->
</div><!--container-->
</body>
</html>

Posted by at 5 comments:
Labels:
Subscribe to: Posts (Atom)