2010-12-05 15 views
1

を使用して行を削除、追加...私はjQuery.Iを使用して同じことを達成したいが動的に私はこのようなコードを持ってjQueryの

<html> 
    <head> 
     <title>test</title> 
     <script type="text/javascript"> 
      var counter = 2; 
      var idCounter= 3; 
      function addNew() { 
      if(counter<=5){ 
       // Get the main Div in which all the other divs will be added 
       var mainContainer = document.getElementById('mainContainer'); 
       // Create a new div for holding text and button input elements 
       var newDiv = document.createElement('div'); 
       newDiv.id='divs'+counter; 
       // Create a new text input 
       var newText = document.createElement('input'); 
       var newText1 = document.createElement('input'); 
       newText.type = "input"; 
       newText.id="ans"+(idCounter); 
       idCounter++; 
       newText1.type = "input"; 
       newText1.id="ans"+(idCounter); 
       idCounter++; 
       // newText.value = counter; 
       // Create a new button input 
       var newDelButton = document.createElement('input'); 
       newDelButton.type = "button"; 
       newDelButton.value = "Remove"; 

       // Append new text input to the newDiv 
       newDiv.appendChild(newText); 
       newDiv.appendChild(newText1); 
       // Append new button input to the newDiv 
       newDiv.appendChild(newDelButton); 
       // Append newDiv input to the mainContainer div 
       mainContainer.appendChild(newDiv); 
       counter++; 

       // Add a handler to button for deleting the newDiv from the mainContainer 
       newDelButton.onclick = function() { 
         mainContainer.removeChild(newDiv); 
         counter--; 
       } 
      } 
      else{ 
       alert('Only 5 rows are allowed'); 
      }}sss 
      function removeRow(divId){ 
       mainContainer.removeChild(divId); 
       counter--; 
      } 

     </script> 
    </head> 

    <body > 
     <div id="mainContainer"> 
      <div><input type="button" value="Add New Row" onClick="addNew()"></div> 
      <div id="div1"><input type="text" id="ans1"><input type="text" id="ans2"><input type="button" value="Remove" onClick ="javascript:removeRow(div1);"></div> 
     </div> 
    </body> 
</html> 

はまた、これらのtextboxes.Pleaseヘルプのそれぞれに入力された値を必要としています。

+3

「私のコードは私に書いてください」という質問はしないでください。また、具体的な問題を述べないで、完全なソースコードを投稿しないでください。 – Tomalak

+0

追加ボタンの最大5行、onclickを追加し、各行の隣接する削除ボタンのonclickを削除します。私はまた、これらのテキストボックスのそれぞれに入力された値を取得する必要があります。 –

+0

あなたはその特定の(x)htmlコードに縛られているのですか、それとも、少し恐ろしいものに服従するでしょうか? –

答えて

3

私はやりたいことが何もなかったので、正直言って私は興味があったので、私はこれをまとめました。私ははっきりいませんでしたが、(

<form action="#" method="post"> 
    <fieldset id="rows"> 
     <ul> 
      <li> 
       <input type="text" id="ans1" name="ans1" /> 
       <input type="text" id="ans2" name="ans2" /> 
      </li> 
     </ul> 
    </fieldset> 
    <fieldset id="controls"> 
     <button id="addRow">add</button> 
     <button id="removeRow" disabled>remove</button> 
    </fieldset> 
</form> 

次jQueryを使って:私のコメントで示唆されるように、上記の、私は特に、あなたはそれがレイアウトされていた方法で好きではなかったので、私は、次の(X)HTMLを使用しました最適化された、またはそれを洗練が、それは)あなたの要件を満たす必要があります。

$(document).ready(
    function(){ 
     $('#addRow').click(
      function() { 
       var curMaxInput = $('input:text').length; 

       $('#rows li:first') 
        .clone() 
        .insertAfter($('#rows li:last')) 
        .find('input:text:eq(0)') 
        .attr({'id': 'ans' + (curMaxInput + 1), 
          'name': 'ans' + (curMaxInput + 1) 
          }) 
        .parent() 
        .find('input:text:eq(1)') 
        .attr({ 
         'id': 'ans' + (curMaxInput + 2), 
         'name': 'ans' + (curMaxInput + 2) 
        }); 
       $('#removeRow') 
        .removeAttr('disabled'); 
       if ($('#rows li').length >= 5) { 
        $('#addRow') 
         .attr('disabled',true); 
       } 
       return false; 
      }); 

     $('#removeRow').click(
      function() { 
       if ($('#rows li').length > 1) { 
        $('#rows li:last') 
         .remove(); 
       } 
       if ($('#rows li').length <= 1) { 
        $('#removeRow') 
         .attr('disabled', true); 
       } 
       else if ($('#rows li').length < 5) { 
        $('#addRow') 
         .removeAttr('disabled'); 

       } 
       return false; 
      }); 
    }); 

JS Fiddle demo of the above

私は、しかし、あなたは何を意味するかわからない:

これらのテキストボックスに入力した値も必要です。

私は助けるために全力を尽くしますあなたはそれが何を意味するのかを説明したり、(彼らはすでにあなたに利用じゃない理由、そして、理想的には)それらを利用できるようにしたいどのように場合。

+0

+1、退屈でクールなattrの使用のため – IAdapter

+0

@ 01、男、[酔っぱらった爆発のための+3955を得る](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml) -self-contained-tags/1732454#1732454)、退屈で+1になります。私が退屈していて、飲み始めたら、私はもっと飲みますか? ...これはStack Overflowがどのように機能するかということですか? = D –

1

私はあなたがここで使用するのに役立ちます解決策は、あなたがこのようなコードを変更し、これらの二つの変数

var newID = 'project'+newRowNum; 
var add = 'description'+newRowNum; 
を変更する場合にも、各テキストボックスに一意の名前を付けることができ、コード

<script type="text/javascript" src="js/jquery.js"></script> 
<script type = 'text/javascript'> 
var newRowNum = 1; 
var project_id ; 
$(function() { 
$('#addnew').click(function() 
{ 
    newRowNum++; // This is counter 
    //var i = 0; 
    /////////  <a> <td> <tr> 
    var addRow = $(this).parent().parent(); 
    ///////// In the line below <tr> is created 
    var newRow = addRow.clone(); 
    $('input', addRow).val(''); 
    $('td:first-child', newRow).html(); 
    $('td:last-child', newRow).html('<a href="" class="remove span">Remove<\/a>'); 

    var newID = 'project'+newRowNum; 
    var add = 'description'+newRowNum; 
    newRow.children().children().first('input').attr('id', newID).attr('name', newID); 
    newRow.children().children().eq(1).attr('id', add).attr('name', add); 

    $('#table').find('tr:last').after(newRow); 

    $('a.remove', newRow).click(function() 
    { 
    newRowNum--; 
    $('#table').find('tr:last').remove(); 
    return false; 
    }); 
    return false; 
    }); 
    }); 
    </script> 

    <table width="75%" border="0" align = "center" id = 'table'> 
    <tr> 
    <td align = "center">Project </td> 
    <td align = "center">Description</td> 
    <td align = "center">Add Row</td> 
    </tr> 
    <tr> 
    <td align = "center"><input type = 'text' size = '35'name = 'project[]' id="project" ></td> 
    <td align = "center"><input type = 'text'size = '55' name = "description[]" id = 'description'></td> 
    <td width = '10%'><a id="addnew" href= "" class = 'span'>Add</a></td> 
    </tr> 
</table> 

である必要があり

ここに示した最初の方法を使用すると、配列を使用してデータを簡単に投稿できます。

それだけです。

関連する問題