Jump to content

how can i update each content name of each cells in a row if i delete one of the

willyamPax

By willyamPax
in Javascript Help

how can i update each content name of each cells in a row if i delete one of them...  

1 member has voted

  1. 1. how can i update each content name of each cells in a row if i delete one of them...

    • help
      0
    • help
      1
    • help
      0

Recommended Posts

willyamPax Newbie

willyamPax

Posted
Posted 

<script type="text/javascript">
var t=1;
var intime=0;

//showData(data){

//}
function insRow(r)
{
intime=intime+1;

var x=document.getElementById('myTable').insertRow(t);

var date=x.insertCell(0);

var h=x.insertCell(1);
var d=x.insertCell(2);
var r=x.insertCell(3);
var del=x.insertCell(4);

//date.innerHTML="<input type='text' size='10' name='date"+t+"'>";

var date1= document.createElement('input');
date1.name="date"+t;
date1.value="date"+t;
date1.size='10';
date.appendChild(date1);


var hours= document.createElement('input');
hours.name='hours'+t; 
hours.value='hours'+t;
h.appendChild(hours);

var des= document.createElement('textarea');
des.name='descrition'+t;
des.cols='20';
des.rows='5';
d.appendChild(des);
//des.innerHTML="<textarea rows='5' name='descrition"+t+"' cols='20'></textarea>"

var sel = document.createElement('select');
 sel.name = 'remarks' + t;
 sel.options[0] = new Option('Done', 'Done');
 sel.options[1] = new Option('ongoing', 'ongoing');

r.appendChild(sel);
del.innerHTML="<input type='button' value='Delete' onclick='deleteRow(this)'>";
t++;
document.time.time1.value=intime;
}
function deleteRow(r)
{
var i=r.parentNode.parentNode.rowIndex;
document.getElementById('myTable').deleteRow(i);
t=t-1;

intime=intime-1;
document.time.time1.value=intime;
/* i comment this one coz i cant seem to update the content of every cell in a row
for (c=1;c<=intime;c++){
var x=document.getElementById('myTable').rows;
   var y=x[c].cells;
y[c].innerHTML="NEW CONTENT";

}*/
}

</script>
<form name ='time' >
<table id="myTable" border="1">
<input type="text" size='1'name='time1'value=''>
<tr><td>Date</td>

 <td>Hours</td>
 <td>Description</td>
 <td>Remarks</td>
 <td><input type="button" onclick="insRow(this)" value="Insert row"></td>


 </tr>
</table>
</form>

 

please help me on this one....

how can i update each content name of each cells in a row if i delete one of them...

 

Psycho Prolific Member

Psycho

Posted
Posted

This might not be the most efficinet, but it works:

<html>
<head>

<script type="text/javascript">
var t=1;
var intime=0;

//showData(data){

//}
function insRow(r)
{
intime=intime+1;

var x=document.getElementById('myTable').insertRow(t);

var date=x.insertCell(0);

var h=x.insertCell(1);
var d=x.insertCell(2);
var r=x.insertCell(3);
var del=x.insertCell(4);

//date.innerHTML="<input type='text' size='10' name='date"+t+"'>";

var date1= document.createElement('input');
date1.name="date"+t;
date1.value="date"+t;
date1.id="date"+t;
date1.size='10';
date.appendChild(date1);


var hours= document.createElement('input');
hours.name='hours'+t; 
hours.value='hours'+t;
hours.id='hours'+t; 
h.appendChild(hours);

var des= document.createElement('textarea');
des.name='descrition'+t;
des.id='descrition'+t;
des.cols='20';
des.rows='5';
d.appendChild(des);
//des.innerHTML="<textarea rows='5' name='descrition"+t+"' cols='20'></textarea>"

var sel = document.createElement('select');
  sel.name = 'remarks' + t;
  sel.id = 'remarks' + t;
  sel.options[0] = new Option('Done', 'Done');
  sel.options[1] = new Option('ongoing', 'ongoing');

r.appendChild(sel);
del.innerHTML="<input type='button' value='Delete' onclick='deleteRow(this)'>";
t++;
document.time.time1.value=intime;
}
function deleteRow(r)
{
    var i=r.parentNode.parentNode.rowIndex;

    document.getElementById('myTable').deleteRow(i);
    t=t-1;

    while (document.getElementById('date'+(i+1)))
    {
        nextID = (i+1);

        dateObj = document.getElementById('date'+nextID);
        dateObj.name =  'date'+i;
        dateObj.value = 'date'+i;
        dateObj.id =    'date'+i;

        hoursObj = document.getElementById('hours'+nextID);
        hoursObj.name =  'hours'+i;
        hoursObj.value = 'hours'+i;
        hoursObj.id =    'hours'+i;

        descObj = document.getElementById('descrition'+nextID);
        descObj.name =  'descrition'+i;
        descObj.id =    'descrition'+i;

        remObj = document.getElementById('remarks'+nextID);
        remObj.name =  'remarks'+i;
        remObj.id =    'remarks'+i;

        i++;

    }


    intime=intime-1;
    document.time.time1.value=intime;
    /* i comment this one coz i cant seem to update the content of every cell in a row
    for (c=1;c<=intime;c++){
        var x=document.getElementById('myTable').rows;
        var y=x[c].cells;
y[c].innerHTML="NEW CONTENT";

    }*/
}

</script>
</head>
<body>

<form name ='time' >
<table id="myTable" border="1">
<input type="text" size='1'name='time1'value=''>
<tr><td>Date</td>

  <td>Hours</td>
  <td>Description</td>
  <td>Remarks</td>
  <td><input type="button" onclick="insRow(this)" value="Insert row"></td>


  </tr>
</table>
</form>

</body></html>

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.