Member Avatar for confstu

0
down vote
favorite
I want to ask all of you for some help since i'm still new to web programming. So basically i have html table like this,

<table width='200' border='1'>
<TH>Year 1 Spring</TH>

<TR>
<TD>
<div id="y1f_0">one</div>
<div id="y1f_1">one</div>
</TD>
<TD>
<div id="y1s_0">two</div>
<div id="y1s_1">two</div>
</TD>
</TR>
</table>
<input  type="button" onclick="something">

and for example if i click the button, and it will save the table above and output/export it as a text file so later one i want get back that text file to export it back to the html table. I don't really know how to do this, should i use php? Really appreciate all your help, Thanks

  • 4 Contributors
  • 4 Replies
  • 2K Views
  • 1 Year Discussion Span
  • Latest Post Latest Post by dnyaneshk2
Member Avatar for baig123 
<html>
<script>
function makeTable()
{
    var row_num = 20;
    var cell_num = 4;

    var tab = document.createElement('table');
    tab.setAttribute('id','newtable');

    var tbo = document.createElement('tbody');
    tbo.setAttribute('id','tabody');

    var cont;
    for(var c = 0 ; c < row_num ; c++)
    {
        var row = document.createElement('tr');
        for(var k = 0 ; k < cell_num ; k++)
        {
            var cell = document.createElement('td');
            if (k > 0)
            {
                cont = document.createElement("input");
                cont.setAttribute('type','text');
            }
            else
            {
                cont = document.createTextNode("0" + (c+1));
            }
            cell.appendChild(cont);
            row.appendChild(cell);
        }
        tbo.appendChild(row);
    }
    tab.appendChild(tbo);
    document.body.appendChild(tab);
    tab.setAttribute("align", "top-left");
}
window.onload = function()
{
    makeTable();
};

function GetCellValues()
{
    var str = '';
    var rows = document.getElementsByTagName('tr');
    var table=document.getElementById("project");
    for (var i=0;i<table.rows[0].cells.length;i++)
    {
        if (i > 2 )
        {
            str = str + table.rows[0].cells[3].innerHTML.replace(", ");
        }
        else
        {
            str = str + (table.rows[0].cells[i].innerHTML) + ', ' ;
        }
    }
    for (var c = 1 ; c < rows.length ; c++)
    {
        str += '\n' + "0" + c + ', ';
        var row = rows[c];
        var inputs = row.getElementsByTagName('input');                
        for (var k = 0 ; k < inputs.length ; k++)
        if (k > 1)
        {
            str += inputs[k].value.replace(", ");
        }
        else 
        {
            str += inputs[k].value + ', ';
        }
    }   
    document.getElementById('hide').value = str;
}

</script>
</head>
<body>
<form action = "project.php" method = "POST">
<h1><u>PROJECT</u> :</h1>
<input type="hidden" id="hide" name="hide" value="">
<input type="submit" name="submit" onclick = "GetCellValues()" />
<table id = "project" border = "1" width ="60%" class = "newtable" cellpadding="10" cellspacing="0">
<tr>
<th align="center" width ="200px" id = "Sl.No." >Sl.No.</th>
<th align="center" width ="200px" id = "Project Name" >Project Name</th>
<th align="center" width ="200px" id = "ChangeDate" >ChangeDate</th>
<th align="center" width ="200px" id = "Changed By" >Changed By</th>
</tr>
</form>
</body>
</html>

Follow this

Member Avatar for baig123 
<html>
<script>
function makeTable()
{
    var row_num = 20;
    var cell_num = 4;

    var tab = document.createElement('table');
    tab.setAttribute('id','newtable');

    var tbo = document.createElement('tbody');
    tbo.setAttribute('id','tabody');

    var cont;
    for(var c = 0 ; c < row_num ; c++)
    {
        var row = document.createElement('tr');
        for(var k = 0 ; k < cell_num ; k++)
        {
            var cell = document.createElement('td');
            if (k > 0)
            {
                cont = document.createElement("input");
                cont.setAttribute('type','text');
            }
            else
            {
                cont = document.createTextNode("0" + (c+1));
            }
            cell.appendChild(cont);
            row.appendChild(cell);
        }
        tbo.appendChild(row);
    }
    tab.appendChild(tbo);
    document.body.appendChild(tab);
    tab.setAttribute("align", "top-left");
}
window.onload = function()
{
    makeTable();
};

function GetCellValues()
{
    var str = '';
    var rows = document.getElementsByTagName('tr');
    var table=document.getElementById("project");
    for (var i=0;i<table.rows[0].cells.length;i++)
    {
        if (i > 2 )
        {
            str = str + table.rows[0].cells[3].innerHTML.replace(", ");
        }
        else
        {
            str = str + (table.rows[0].cells[i].innerHTML) + ', ' ;
        }
    }
    for (var c = 1 ; c < rows.length ; c++)
    {
        str += '\n' + "0" + c + ', ';
        var row = rows[c];
        var inputs = row.getElementsByTagName('input');                
        for (var k = 0 ; k < inputs.length ; k++)
        if (k > 1)
        {
            str += inputs[k].value.replace(", ");
        }
        else 
        {
            str += inputs[k].value + ', ';
        }
    }   
    document.getElementById('hide').value = str;
}

</script>
</head>
<body>
<form action = "project.php" method = "POST">
<h1><u>PROJECT</u> :</h1>
<input type="hidden" id="hide" name="hide" value="">
<input type="submit" name="submit" onclick = "GetCellValues()" />
<table id = "project" border = "1" width ="60%" class = "newtable" cellpadding="10" cellspacing="0">
<tr>
<th align="center" width ="200px" id = "Sl.No." >Sl.No.</th>
<th align="center" width ="200px" id = "Project Name" >Project Name</th>
<th align="center" width ="200px" id = "ChangeDate" >ChangeDate</th>
<th align="center" width ="200px" id = "Changed By" >Changed By</th>
</tr>
</form>
</body>
</html>
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.