Tom's Guide | Tom's Hardware | Tom's Games
 |
 |
 |
Can you please provide any examples in JS that does below. Thanks in advance..I have a table with 16 columns..when the user clicks 'Add Row' , It should add a row with editable mode for columns 1,2,3,4,5,6,7,8,9,13,14 and non editable for columns 10,11,12,15,16.
I modified some code that I'm using elsewhere to use here as an example.
Each push of the "Add Row" button, adds a row with one non-editable and one editable column to the table.
Push "Show Values" to display the values from the editable fields below the buttons.
You can view the code at: http://www.arnett.name/examples/javascriptAddRow.html
<html>
<head>
<style>
<!-- Non Essential CSS Stuff -->
th, td { padding : 5px; }
th { border : 1px solid black; }
td.nonEditable { border : 1px solid red; }
td.editable { border : 1px solid lime; }
</style>
<script type="text/javascript">
function addRow()
{
//
// Get the current number of table rows from the hidden variable
//
objNumberOfRows = document.getElementById("numberOfRows")//
// Set the new row number (since the first row is zero, the 'number of rows' is the next row number
//
newRowNumber = objNumberOfRows.value//
// Insert a new row into itemTable (at the bottom)
//
row = document.getElementById("itemTable").insertRow(objNumberOfRows.value)//
// Build the first column of the row (a non-editable column)
//
td = document.createElement("TD") // create a TD
td.className = "nonEditable" // set the class for the TD (optional)
td.appendChild(document.createTextNode("Row "+newRowNumber)) // put some text into the cell
row.appendChild(td); // add the TD to the row
//
// Build the second column of the row (an editable field)
//
td = document.createElement("TD")
td.className = "editable"
element = document.createElement("input") // create an INPUT element to put in the TD
element.name = "editable"+newRowNumber // set the 'name' and 'id' (appending rowNumber to make them unique)
element.id = "editable"+newRowNumber
element.size = 30 // set the INPUT field size
element.setAttribute("autocomplete","OFF");
focusElement = element
td.appendChild(element) // add the INPUT to the TD
row.appendChild(td); // add the TD to the row//
// Update the "number of rows" value
//
objNumberOfRows.value = parseInt(newRowNumber) + 1// Set focus to first element of new row
focusElement.focus()
}
function showValues()
{
objItemTable = document.getElementById("itemTable")objNumberOfRows = document.getElementById("numberOfRows")
numberOfRows = objNumberOfRows.valueobjValuesString = document.getElementById("valuesString")
objValuesString.value = ""
for (i=1; i < numberOfRows; ++i)
{
objValuesString.value += "Row "+i+": "+document.getElementById("editable"+i).value+"\n"
}
}</script>
</head>
<body>
<form>
<table id="itemTable">
<tr>
<th>Non-editable</th>
<th>Editable</th>
</tr>
</table>
<br /><br >
<input type="hidden" name="numberOfRows" id="numberOfRows" value="1" /><div>
<input type="button" value="Add Row" onClick="javascript:void addRow()" />
<input type="button" value="Show Editable Values" onClick="javascript:void showValues()" /><br /><br /><br />
<textarea id="valuesString" cols="50" rows="10"></textarea>
</div>
</form>
</body>
</html>
0 
 |
 |
 |
This post is quite old and has been locked from receiving new replies. Please create a new posting instead.
| Ads by Google |
