![Implement a Javascript application that allows the user to enter strings into a variable number of
input widgets. As a string is entered by the user its length is automatically displayed next to the
input widget. Buttons are provided to control the interface and to provide some functionality. .
Clicking one button will add another input widget Clicking another button will remove an input
widget, always leaving at least one input widget. . Clicking anther button will cause the visible
strings to be sorted As a convenience to the user, the application will remember the string
entered into a widget even after the widget is removed. If the widget is added back again, then
the saved value will be displayed in the widget. But, be careful, the saved strings do not
participate in a sort operation if not visible. Provide styling that will approximately center the
visible components. Also, change the default color for the background. Organize the application
in three files: the HTML file that is the user interface to the application; a file with most of the
Javascript code; a file with the styling rules.
Solution
<HTML>
<HEAD>
<TITLE> My Program in Java Script </TITLE>
<SCRIPT language="javascript">
function addNewRow(tableID) {
var table = document.getElementById(tableID);
var count_row = table.rows.length;
var row = table.insertRow(count_row);
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="check_box[]";
cell1.appendChild(element1);
var cell2 = row.insertCell(1);
cell2.innerHTML = count_row + 1;](https://image.slidesharecdn.com/implementajavascriptapplicationthatallowstheusertoenterstrin-230209005205-9132c1b7/85/Implement-a-Javascript-application-that-allows-the-user-to-enter-strin-docx-1-320.jpg)
![var cell3 = row.insertCell(2);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell3.appendChild(element2);
}
function deletePreviousRow(tableID) {
try {
var table = document.getElementById(tableID);
var count_row = table.rows.length;
for(var i=0; i<count_row; i++) {
var row = table.rows[i];
var check_box = row.cells[0].childNodes[0];
if(null != check_box && true == check_box.checked) {
table.deletePreviousRow(i);
count_row--;
i--;
}
}
}catch(e) {
alert(e);
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addNewRow('myTable')" />
<INPUT type="button" value="Delete Row" onclick="deletePreviousRow('myTable')" />
<TABLE id="myTable" width="350px" border="1">
<TR>
<TD><INPUT type="checkbox" name="chk"/></TD>
<TD> 1 </TD>
<TD> <INPUT type="text" /> </TD>
</TR>
</TABLE>](https://image.slidesharecdn.com/implementajavascriptapplicationthatallowstheusertoenterstrin-230209005205-9132c1b7/85/Implement-a-Javascript-application-that-allows-the-user-to-enter-strin-docx-2-320.jpg)
Ad
More Related Content
Similar to Implement a Javascript application that allows the user to enter strin.docx (20)
More from mckerliejonelle (20)
Ad
Recently uploaded (20)
Ad
Implement a Javascript application that allows the user to enter strin.docx
- 1. Implement a Javascript application that allows the user to enter strings into a variable number of input widgets. As a string is entered by the user its length is automatically displayed next to the input widget. Buttons are provided to control the interface and to provide some functionality. . Clicking one button will add another input widget Clicking another button will remove an input widget, always leaving at least one input widget. . Clicking anther button will cause the visible strings to be sorted As a convenience to the user, the application will remember the string entered into a widget even after the widget is removed. If the widget is added back again, then the saved value will be displayed in the widget. But, be careful, the saved strings do not participate in a sort operation if not visible. Provide styling that will approximately center the visible components. Also, change the default color for the background. Organize the application in three files: the HTML file that is the user interface to the application; a file with most of the Javascript code; a file with the styling rules. Solution <HTML> <HEAD> <TITLE> My Program in Java Script </TITLE> <SCRIPT language="javascript"> function addNewRow(tableID) { var table = document.getElementById(tableID); var count_row = table.rows.length; var row = table.insertRow(count_row); var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "checkbox"; element1.name="check_box[]"; cell1.appendChild(element1); var cell2 = row.insertCell(1); cell2.innerHTML = count_row + 1;
- 2. var cell3 = row.insertCell(2); var element2 = document.createElement("input"); element2.type = "text"; element2.name = "txtbox[]"; cell3.appendChild(element2); } function deletePreviousRow(tableID) { try { var table = document.getElementById(tableID); var count_row = table.rows.length; for(var i=0; i<count_row; i++) { var row = table.rows[i]; var check_box = row.cells[0].childNodes[0]; if(null != check_box && true == check_box.checked) { table.deletePreviousRow(i); count_row--; i--; } } }catch(e) { alert(e); } } </SCRIPT> </HEAD> <BODY> <INPUT type="button" value="Add Row" onclick="addNewRow('myTable')" /> <INPUT type="button" value="Delete Row" onclick="deletePreviousRow('myTable')" /> <TABLE id="myTable" width="350px" border="1"> <TR> <TD><INPUT type="checkbox" name="chk"/></TD> <TD> 1 </TD> <TD> <INPUT type="text" /> </TD> </TR> </TABLE>