innerHTML无法正常工作

时间：2014-09-21 20:32:49

标签： javascript php

我有些问题。在我的代码中，当我点击添加按钮时，它将添加一个具有不同ID的新行。但是当我添加一个新行时，上一行的内容将被删除。我希望它保存其内容。我该怎么办？这是我的代码：

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8"> 
    <script>
    var currRow=0;
    function addRow(){
    currRow++;
    document.getElementById('container').innerHTML+=
    "<tr id='input"+currRow+"'><td><input type='text' size='2' class='c-text' name='tariff"+currRow+"' /></td><td><select type='text' class='c-text required' onchange=unSelect('required') name='mark"+currRow+"'  style='width:80px;' />{$dropDownc}</select></td>"+
    "<td><select type='text' class='c-text required' onchange=unSelect('required') name='pryear"+currRow+"'  style='width:60px;'/>{$dropDown8}</select></td><td><select type='text' class='c-text required' onchange=unSelect('required') name='lit"+currRow+"'  style='width:60px;'/>{$dropDown10}</select></td>"+
    "<td><select type='text' class='c-text required' onchange=unSelect('required') name='model"+currRow+"'  style='width:80px;'/>{$dropDown9}</select></td><td><select type='text' class='c-text required' onchange=unSelect('required') name='weight"+currRow+"' />{$dropDown11}</select></td>"+
    "<td><input type='text' size='2' class='c-text' id='price"+currRow+"' onkeyup='onlyNumber(this)' onkeydown='onlyNumber(this)' onchange='onlyNumber(this)' name='price"+currRow+"' /></td><td><input type='text' size='1' class='c-text' id='carnum"+currRow+"' onkeyup='onlyNumber(this)' onkeydown='onlyNumber(this)' onchange='onlyNumber(this)' name='carnum"+currRow+"' /></td>"+
    "<td><input type='text' size='2' class='c-text' id='sumprice"+currRow+"' onclick='SumPrice("+currRow+")' onkeydown='onlyNumber(this)' onchange='onlyNumber(this)' name='sumprice"+currRow+"' /></td><td><select type='text' class='c-text required' onchange=unSelect('required') name='status"+currRow+"' />{$dropDown12}</select></td></tr>";
    }


    </script>
    </head>
    <body>
    <?php



    $ht="<table id='container' width='100%'>
    <tr>
    <th>test1</th>
    <th>test2</th>
    <th>test3</th>
    <th>test4<br>LIT</th>
    <th>test5</th>
    <th>test6</th>
    <th>test7</th>
    <th>test8</th>
    <th>test9</th>
    <th>test10</th>
    </tr>
    </table>

    <input type='button' id='add' value='add new row' class='c-button' onclick='addRow()' >
    ";

    echo $ht.'<br>';

    ?>
    </body>
    </html>

1 个答案:

答案 0 :(得分：1)

这是javascript代码：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8"> 
        <script type="text/javascript">
            var currRow=0;
            function addRow() {
                currRow++;
                var mydiv = document.getElementById("container");
                var newcontent = document.createElement('table');
                newcontent.innerHTML = "<tr id='input"+currRow+"'><td><input type='text' size='2' class='c-text' name='tariff"+currRow+"' /></td><td><select type='text' class='c-text required' onchange=unSelect('required') name='mark"+currRow+"'  style='width:80px;' />{$dropDownc}</select></td>"+
                "<td><select type='text' class='c-text required' onchange=unSelect('required') name='pryear"+currRow+"'  style='width:60px;'/>{$dropDown8}</select></td><td><select type='text' class='c-text required' onchange=unSelect('required') name='lit"+currRow+"'  style='width:60px;'/>{$dropDown10}</select></td>"+
                "<td><select type='text' class='c-text required' onchange=unSelect('required') name='model"+currRow+"'  style='width:80px;'/>{$dropDown9}</select></td><td><select type='text' class='c-text required' onchange=unSelect('required') name='weight"+currRow+"' />{$dropDown11}</select></td>"+
                "<td><input type='text' size='2' class='c-text' id='price"+currRow+"' onkeyup='onlyNumber(this)' onkeydown='onlyNumber(this)' onchange='onlyNumber(this)' name='price"+currRow+"' /></td><td><input type='text' size='1' class='c-text' id='carnum"+currRow+"' onkeyup='onlyNumber(this)' onkeydown='onlyNumber(this)' onchange='onlyNumber(this)' name='carnum"+currRow+"' /></td>"+
                "<td><input type='text' size='2' class='c-text' id='sumprice"+currRow+"' onclick='SumPrice("+currRow+")' onkeydown='onlyNumber(this)' onchange='onlyNumber(this)' name='sumprice"+currRow+"' /></td><td><select type='text' class='c-text required' onchange=unSelect('required') name='status"+currRow+"' />{$dropDown12}</select></td></tr>";

                while (newcontent.firstChild) {
                    mydiv.appendChild(newcontent.firstChild);
                }
            }
        </script>
    </head>
    <body>
        <?php
        $ht="<table id='container' width='100%'>
        <tr>
        <th>test1</th>
        <th>test2</th>
        <th>test3</th>
        <th>test4<br>LIT</th>
        <th>test5</th>
        <th>test6</th>
        <th>test7</th>
        <th>test8</th>
        <th>test9</th>
        <th>test10</th>
        </tr>
        </table>

        <input type='button' id='add' value='add new row' class='c-button' onclick='addRow()' >
        ";

        echo $ht.'<br>';

        ?>
    </body>
    </html>

这个用jQuery：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"> 
    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script>
    var currRow=0;
    function addRow(){
    currRow++;
    jQuery('#container').append("<tr id='input"+currRow+"'><td><input type='text' size='2' class='c-text' name='tariff"+currRow+"' /></td><td><select type='text' class='c-text required' onchange=unSelect('required') name='mark"+currRow+"'  style='width:80px;' />{$dropDownc}</select></td>"+
    "<td><select type='text' class='c-text required' onchange=unSelect('required') name='pryear"+currRow+"'  style='width:60px;'/>{$dropDown8}</select></td><td><select type='text' class='c-text required' onchange=unSelect('required') name='lit"+currRow+"'  style='width:60px;'/>{$dropDown10}</select></td>"+
    "<td><select type='text' class='c-text required' onchange=unSelect('required') name='model"+currRow+"'  style='width:80px;'/>{$dropDown9}</select></td><td><select type='text' class='c-text required' onchange=unSelect('required') name='weight"+currRow+"' />{$dropDown11}</select></td>"+
    "<td><input type='text' size='2' class='c-text' id='price"+currRow+"' onkeyup='onlyNumber(this)' onkeydown='onlyNumber(this)' onchange='onlyNumber(this)' name='price"+currRow+"' /></td><td><input type='text' size='1' class='c-text' id='carnum"+currRow+"' onkeyup='onlyNumber(this)' onkeydown='onlyNumber(this)' onchange='onlyNumber(this)' name='carnum"+currRow+"' /></td>"+
    "<td><input type='text' size='2' class='c-text' id='sumprice"+currRow+"' onclick='SumPrice("+currRow+")' onkeydown='onlyNumber(this)' onchange='onlyNumber(this)' name='sumprice"+currRow+"' /></td><td><select type='text' class='c-text required' onchange=unSelect('required') name='status"+currRow+"' />{$dropDown12}</select></td></tr>");
    }
    </script>
</head>
<body>
    <?php



    $ht="<table id='container' width='100%'>
    <tr>
    <th>test1</th>
    <th>test2</th>
    <th>test3</th>
    <th>test4<br>LIT</th>
    <th>test5</th>
    <th>test6</th>
    <th>test7</th>
    <th>test8</th>
    <th>test9</th>
    <th>test10</th>
    </tr>
    </table>

    <input type='button' id='add' value='add new row' class='c-button' onclick='addRow()' >
    ";

    echo $ht.'<br>';

    ?>
</body>
</html>
相关问题
最新问题