Replace html element with data in javascript

Question

I trying to auto increment the serial number when row increases and automatically readjust the numbering order when a row gets deleted in javascript. For that I am using the following clone method for doing my task. Rest of the thing is working correct except its not increasing the srno because its creating the clone of it. Following is my code for this:

function addCloneRow(obj) {
        if(obj) {       
            var tBody = obj.parentNode.parentNode.parentNode;
            var trTable = tBody.getElementsByTagName("tr")[1];
            var trClone = trTable.cloneNode(true);
            if(trClone) {       
                var txt  = trClone.getElementsByTagName("input");
                var srno  = trClone.getElementsByTagName("span");
                var dd   = trClone.getElementsByTagName("select");

                text = tBody.getElementsByTagName("tr").length;   
                alert(text) //here i am getting the srno in increasing order 
                //I tried something like following but not working                                        
                //var ele = srno.replace(document.createElement("h1"), srno);
                //alert(ele);

                for(var i=0; i<dd.length; i++) {
                    dd[i].options[0].selected=true;
                    var nm = dd[i].name;
                    var nNm = nm.substring((nm.indexOf("_")+1),nm.indexOf("["));
                    dd[i].name = nNm+"[]";
                }
                for(var j=0; j<txt.length; j++) {
                    var nm = txt[j].name;
                    var nNm = nm.substring((nm.indexOf("_")+1),nm.indexOf("["));
                    txt[j].name = nNm+"[]";
                    if(txt[j].type == "hidden"){ 
                        txt[j].value = "0"; 
                    }else if(txt[j].type == "text") {               
                        txt[j].value = "";              
                    }else if(txt[j].type == "checkbox") {               
                        txt[j].checked = false;
                    }
                }

                for(var j=0; j<txt.length; j++) {
                    var nm = txt[j].name;
                    var nNm = nm.substring((nm.indexOf("_")+1),nm.indexOf("["));
                    txt[j].name = nNm+"[]";
                    if(txt[j].type == "hidden"){ 
                        txt[j].value = "0"; 
                    }else if(txt[j].type == "text") {               
                        txt[j].value = "";              
                    }else if(txt[j].type == "checkbox") {               
                        txt[j].checked = false;
                    }
                }
                tBody.insertBefore(trClone,tBody.childNodes[1]);                
            }
        }
    }

Following is my html :

<table id="step_details" style="display:none;">
            <tr>
                <th width="5">#</th>
                <th width="45%">Step details</th>
                <th>Expected Results</th>
                <th width="25">Execution</th>
                <th><img src="gui/themes/default/images/ico_add.gif" onclick="addCloneRow(this);"/></th>
            </tr>

            <tr>
                <td><span>1</span></td>
                <td><textArea name="step_details[]"></textArea></td>
                <td><textArea name="expected_results[]"></textArea></td>
                <td><select onchange="content_modified = true"  name="exec_type[]">
                        <option selected="selected" value="1" label="Manual">Manual</option>
                        <option value="2" label="Automated">Automated</option>
                    </select>
                </td>
                <td><img src="gui/themes/default/images/ico_del.gif" onclick="removeCloneRow(this);"/></td>
            </tr>    
        </table>

I want to change the srno. of span element dynamically after increment and decrement on it.

Need help thanks

Josep · Accepted Answer · 2012-12-12 05:01:07Z

2

I think that what you want is something this:

var varcharCurrentNumber = trClone.getElementsByTagName("span")[0].innerHTML;
var nextNumber= eval(varcharCurrentNumber) +1;
trClone.getElementsByTagName("span")[0].innerHTML = nextNumber;

answered Dec 12, 2012 at 5:01

Josep

13.1k2 gold badges45 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Replace html element with data in javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related