innerHTML無法正常工作

-1

我有一些問題傢伙。在我的代碼中，當我點擊添加按鈕時，它會添加一個新的行，這將有一個不同的ID。但是當我添加一個新行時，上一行的內容將被刪除。我想要它保存它的內容。我該怎麼辦？這裏是我的代碼：innerHTML無法正常工作

<!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>

來源

2014-09-21 user3872746

下面是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>

來源

2014-09-21 21:15:16 Chris

你是怎麼改變，爲什麼？爲什麼OP的代碼不能按預期工作？提供正確的解釋將有助於他人理解問題和解決方案。 – 2014-09-21 21:24:03

haji damet garm fadayi dariiiiiii – user3872746 2014-09-21 21:48:21

非常感謝你！你救了我的生意！ – user3872746 2014-09-21 21:49:20

innerHTML無法正常工作

回答

相關問題