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

@karthie-UlD8ye • Oct 26, 2024

Oct 26, 2024

1.2K

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

Like 0 Replies 5

Replies

Welcome, guest

Join CrazyEngineers to reply, ask questions, and participate in conversations.

CrazyEngineers powered by Jatra Community Platform

Manish Goyal

@manish-r2Hoep • 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>

karthie

@karthie-UlD8ye • 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 😀
0
Manish Goyal

@manish-r2Hoep • Jan 19, 2010

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

@vik001ind-rOaCSy • 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

0
karthie

@karthie-UlD8ye • 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>

0