您的位置:首页 > Web前端 > JavaScript

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

2012-08-23 15:29 661 查看
/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>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息