现在的位置: 首页 > 综合 > 正文

JS 动态添加删除文本 并获取文本值

2018年02月11日 ⁄ 综合 ⁄ 共 4040字 ⁄ 字号 评论关闭

/html 代码


<table id="SignFrame">
            <tr>
                <td colspan="2">
                    <div class="start-edge-links" dir="ltr" jstcache="0">
                        <span jsdisplay="topbar_config.show_directions_link" jstcache="5">
                            <a id="d_launch" class="kd-button dir-button" jsaction="llm.showDirections" jsattrs="href: topbar_config.directions_url" href="javascript:void(0)" jstcache="12">获取路线</a>
                        </span>
                        <span jstcache="0">
                            <a id="m_launch" class="kd-button" style="display:none" jsaction="llm.showMyPlaces" jsattrs="href: topbar_config.my_places_url" href="http://blog.163.com/yanlicheng0719@126/blog/#" jsdisplay="topbar_config.show_my_places_link" jstcache="13">我的地点</a>
                        </span>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <span class='legs'>第<span class="num">1</span>段:</span><input type="text"  id="txtName1" />
                </td>
                <td  rowspan="2">
                    <div id="dir_rev" jsaction="dl.rev" title="获取返程路线" style="">
                        <a id="zhunh" class="kd-button" href="javascript:void(0)">
                            <img class="dir-reverse" src="http://maps.gstatic.com/mapfiles/transparent.png"/>
                        </a>
                    </div>
                </td>
            </tr>
            <tr>
                <td>
                    <span class='legs'>第<span class="num">2</span>段:</span><input type="text"  id="txtName2" />
                </td>
            </tr>
        </table>
        <a id="addArr" href="javascript:void(0)" onclick="AddSignRow()">添加目的地</a><br />
            <input name='txtTRLastIndex' type='hidden' id="txtTRLastIndex" value="3" />

//JS 代码
<script type="text/javascript">

    function findObj(theObj, theDoc) {
        var p, i, foundObj;
        if (!theDoc) theDoc = document;
        if ((p = theObj.indexOf("?")) > 0 && parent.frames.length) {
            theDoc = parent.frames[theObj.substring(p + 1)].document; theObj = theObj.substring(0, p);
        }
        if (!(foundObj = theDoc[theObj]) && theDoc.all) foundObj = theDoc.all[theObj];
        for (i = 0; !foundObj && i < theDoc.forms.length; i++) foundObj = theDoc.forms[i][theObj];

        for (i = 0; !foundObj && theDoc.layers && i < theDoc.layers.length; i++) foundObj = findObj(theObj, theDoc.layers[i].document);
        if (!foundObj && document.getElementById) foundObj = document.getElementById(theObj);

        return foundObj;
    }

    //添加一段
    function AddSignRow() {
        //读取最后一行的行号,存放在txtTRLastIndex文本框中
        var txtTRLastIndex = findObj("txtTRLastIndex", document);
        var rowID = parseInt(txtTRLastIndex.value);
        if (txtTRLastIndex.value > 9) { $("#addArr").css('color','#ccc'); return false; }
        var signFrame = findObj("SignFrame", document);
       
        //添加行
        var newTR = signFrame.insertRow(signFrame.rows.length);
        newTR.id = "SignItem" + rowID;

        //添加列:航段
        var newNameTD = newTR.insertCell(0);
        //添加列内容
        newNameTD.innerHTML = "<span class='legs'>第<span class='num'>" + newTR.rowIndex.toString() + "</span>段:<span>" + "<input name='txtName" + newTR.rowIndex.toString() + "' id='txtName" + newTR.rowIndex.toString() + "' type='text'  />";       

        //添加列:删除按钮
        var newDeleteTD = newTR.insertCell(1);
        //添加列内容
        newDeleteTD.innerHTML = "<div align='center' style='width:30px;'><a style=' font-weight:bold;color:#999;' href='javascript:;' onclick=\"DeleteSignRow('SignItem" + rowID + "')\">×</a></div>";

        //将行号推进下一行
        txtTRLastIndex.value = (rowID + 1).toString();

        $("#zhunh").hide();
    }

    //删除指定行
    function DeleteSignRow(rowid) {

        var signFrame = findObj("SignFrame", document);
        var signItem = findObj(rowid, document);
        //获取将要删除的行的Index
        var rowIndex = signItem.rowIndex;
        //删除指定Index的行
        signFrame.deleteRow(rowIndex);

        var txtTRLastIndex = findObj("txtTRLastIndex", document);
        txtTRLastIndex.value--;
       
        $("#addArr").show();
        if (txtTRLastIndex.value == "3") { $("#zhunh").show(); }
        var nber = $(".num");
       
        for (var i = 0; i < nber.length; i++) {
            nber[i].innerHTML = i + 1;
        }
    }
</script>

抱歉!评论已关闭.