How to insert rows and colums using javascript and also edit the values inline

karthie · 2010-01-05T07:36:47+00:00

Hi friends, How to insert Rows and Columns based on user input using javascript(HTML)?It should grow based on user selection.. And also edit the values inside the table inline using JS

How to insert rows and colums using javascript and also edit the values inline

karthie

Member

Updated: Oct 26, 2024

Views: 1.0K

Hi friends,
How to insert Rows and Columns based on user input using javascript(HTML)?It should grow based on user selection.. And also edit the values inside the table inline using JS

0

Replies

Howdy guest!

Dear guest, you must be logged-in to participate on CrazyEngineers. We would love to have you as a member of our community. Consider creating an account or login.

Replies

Manish Goyal

Member • Jan 5, 2010

Use this script...First of all it will open a Prompt box then it will ask for no of rows and create a new tables according to requirements..but i have set that max rows can be 100 and columns can be 4..you can change it..

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
.mytable {
border:1px solid #000000;
border-collapse:collapse;
width:200px;
}
.mytable td{
background:#cccccc;
border:1px solid #000000;
}
</style>

<script type="text/javascript">
onload=function(){
var nrCols=4;
var maxRows=100;
var nrRows=maxRows+1;
while(nrRows>maxRows){
nrRows=Number(prompt('Please enter no of rows',''));
}
var root=document.getElementById('mydiv');
var tab=document.createElement('table');
tab.className="mytable";
var tbo=document.createElement('tbody');
var row, cell;
for(var i=0;i<nrRows;i++){
    row=document.createElement('tr');
    for(var j=0;j<nrCols;j++){
        cell=document.createElement('td');
        cell.appendChild(document.createTextNode(i+' '+j))
        row.appendChild(cell);
    }
    tbo.appendChild(row);
}
tab.appendChild(tbo);
root.appendChild(tab);
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>

Are you sure? This action cannot be undone.

Cancel

karthie

Member • Jan 19, 2010

But i need "Add rows" and "Add columns" button, whenever the user clicks the button the rows and columns needs to add. And need of inline editing. Thanks in advance 😀

Are you sure? This action cannot be undone.
Cancel
Manish Goyal

Member • Jan 19, 2010

Have you tried it on your own?If yes then please post

Are you sure? This action cannot be undone.
Cancel
vik001ind

Member • Jan 19, 2010

Goto site #-Link-Snipped-#
tutorial available for all web scripting languages such as php, html, xhtml, javascript etc.
In fact its the best site for all these materials

Are you sure? This action cannot be undone.
Cancel
karthie

Member • Jan 20, 2010

Here is the script to insert rows and columns with inline editing.

<html>
<head>
<script src="inlineeditor.js"></script>
<script type="text/javascript">
function addRow(){
var root=document.getElementById('mytab').getElementsByTagName('tbody')[0];
var rows=root.getElementsByTagName('tr');
var clone=cloneEl(rows[rows.length-1]);
root.appendChild(clone);
}
function addColumn(){
var rows=document.getElementById('mytab').getElementsByTagName('tr'), i=0, r, c, clone;
while(r=rows[i++]){
c=r.getElementsByTagName('td');
clone=cloneEl(c[c.length-1]);
c[0].parentNode.appendChild(clone);
}
}
function cloneEl(el){
var clo=el.cloneNode(true);
return clo;
}
</script>
</head>
<body>
<div class="editable">
<table cellpadding="1" cellspacing="1" border="1">
<tr>
<td>90</td>
<td>80</td>
<td>70</td>
<td>60</td>
<td>50</td>
</tr>
</table>
</div>
<input type="submit" name="Add Row" value="Add Row" onclick="addRow()" />
<input type="submit" name="Add Column" value="Add Column" onclick="addColumn()" />
</body>
</html>

To include inline editing script(inlineeditor.js) visit this URL: <a href="https://iharder.sourceforge.net/current/misc/inlineeditor/index.html" target="_blank" rel="nofollow noopener noreferrer">Javascript Inline Editor</a>

Are you sure? This action cannot be undone.
Cancel