javascript - 用javascript中的数据替换html元素

Question

我尝试在行增加时自动增加序列号，并在 JavaScript 中删除行时自动重新调整编号顺序。为此，我使用以下克隆方法来完成我的任务。其余的事情工作正常，除了它没有增加 srno，因为它创建了它的克隆。以下是我的代码:

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]);                
            }
        }
    }

以下是我的 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>

我想更改 srno。 span 元素在递增和递减后动态变化。

需要帮助，谢谢

Answer 1

我认为你想要的是这样的:

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