動的に表の行を追加して削除する

Question

誰かが私を助けてくれるかどうか疑問に思う。以下に示すように、私は、ユーザーがテーブルの行を追加したり削除したりすることができますよう、私はいくつかのコードを適応してきたいくつかの例を使用して

。

Javascriptのコード

function addRow(addimagetable) { 
    var table = document.getElementById(addimagetable); 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    var cell1 = row.insertCell(0); 
    var element1 = document.createElement("input"); 
    element1.type = "radio"; 
    cell1.appendChild(element1); 
    var cell2 = row.insertCell(1); 
    var element2 = document.createElement("input"); 
    element2.type = "text"; 
    cell2.appendChild(element2); 
    var cell3 = row.insertCell(2); 
    var element3 = document.createElement("input"); 
    element3.type = "file"; 
    cell3.appendChild(element3); 
    } 
    function deleteRow(addimagetable) { 
    try { 
    var table = document.getElementById(addimagetable); 
    var rowCount = table.rows.length; 
    for(var i=0; i<rowCount; i++) { 
    var row = table.rows[i]; 
    var radio = row.cells[0].childNodes[0]; 
    if(null != radio && true == radio.checked) { 
    table.deleteRow(i); 
    rowCount--; 
    i--; 
    } 
    } 
    }catch(e) { 
    alert(e); 
    } 
    } 

HTMLの表

<input type="button" value="Add Row" onclick="addRow('addimagetable')" /> <input type="button" value="Delete Row" onclick="deleteRow('addimagetable')" /> 
       <table id="addimagetable" width="407" border="1"> 
       <tr><td width="20"><input type="radio" name="radio"/></td> 
        <td width="147"><input type="text" name="title" /></td> 
        <td width="218"><input type="file" name="image" /></td> 
       </tr> 

      </table> 
      </div> 

あなたは上記の表のコードから見ることができるように、行が追加または削除されたボタンを経由して 'クリック'。私が解決しようとしてきたことは、 'Add'ボタンを取り除く代わりに、行にセル '2'と '3'のデータがある場合、下の新しい行が作成される関数で置き換える方法です。

私は今、しばらくの間、これに取り組んできたと私はこの作業を取得する方法を見つけるように見えることはできません。

私はちょうど誰かが、おそらく私に救いの手を与えると私は間違って行くよどこ私を見ることができるかどうかを疑問に思いました。私は同様の問題を整理しようとしていたとして

感謝

Answer 1

私はあなたの質問を見つけました。問題をトラブルシューティングするためにあなたのケースを（私のものよりも簡単なので）使用しました...結果をあなたと共有することは公正であると思いました。

次のコードは、各行の2つの監視対象入力のうち1つがフォーカスを失うたびにチェックします - 行の監視対象入力が両方とも値を持つ場合（行がまだ追加行を生成していない場合）次の行が追加されます。

HTML：

 <input type="button" value="Add Row" onclick="addRow('addimagetable')" /> 
    <input type="button" value="Delete Row" onclick="deleteRow('addimagetable')" /> 
    <table id="addimagetable" width="407" border="1"> 
     <tr> 
      <td width="20"><input type="radio" name="radio"/></td> 
      <td width="147"><input type="text" name="title" onblur="check(1)" /></td> 
      <td width="218"><input type="file" name="image" onblur="check(1)" /></td> 
     </tr> 
    </table> 

スクリプト：

<script> 
var numrows = 1; // because you are starting with 1 row visible 
var rowsarray = ["0", "0"]; 
function addRow(addimagetable) { 
    numrows = numrows + 1; 
    rowsarray[numrows] = "0"; 
    var table = document.getElementById(addimagetable); 
    var rowCount = table.rows.length; 
    var row = table.insertRow(rowCount); 
    var cell1 = row.insertCell(0); 
    var element1 = document.createElement("input"); 
    element1.type = "radio"; 
    cell1.appendChild(element1); 
    var cell2 = row.insertCell(1); 
    var element2 = document.createElement("input"); 
    element2.type = "text"; 
    cell2.appendChild(element2); 
    element2 = cell2.getElementsByTagName("input")[0]; 
    element2.setAttribute("onblur","check("+numrows+")"); 
    var cell3 = row.insertCell(2); 
    var element3 = document.createElement("input"); 
    element3.type = "file"; 
    cell3.appendChild(element3); 
    element3 = cell3.getElementsByTagName("input")[0]; 
    element3.setAttribute("onblur","check("+numrows+")"); 
    } 
    function deleteRow(addimagetable) { 
    try { 
    var table = document.getElementById(addimagetable); 
    var rowCount = table.rows.length; 
    for(var i=0; i<rowCount; i++) { 
    var row = table.rows[i]; 
    var radio = row.cells[0].childNodes[0]; 
    if(null != radio && true == radio.checked) { 
    table.deleteRow(i); 
    rowCount--; 
    i--; 
    } 
    } 
    }catch(e) { 
    alert(e); 
    } 


} 
     function check(num) { 
      table = document.getElementById('addimagetable'); 
      row = table.getElementsByTagName("tr")[num-1]; 
      c1 = row.getElementsByTagName("td")[1].getElementsByTagName('input')[0].value; 
      c2 = row.getElementsByTagName("td")[2].getElementsByTagName('input')[0].value; 
      if ((c1 !== "") && (c1 !== null) && (c2 !== "") && (c2 !== null) && (rowsarray[num] !== 1)) { addRow('addimagetable'); rowsarray[num] = 1; } 
     } 
     </script>