テキストボックス/ラジオボタン/ドロップダウンリストからの情報をdataTableに追加

Question

"名前、番号など"のテキストから情報を取得しようとしています。その情報を自分のデータテーブルに追加します。しかし、私はその部分を働かせる方法を理解できません。私はまた、適切に動作するjsfiddle添付されている。 JSFiddle

$(document).ready(function() { 
 
    var t = $('#example').DataTable(); 
 
    var counter = 1; 
 
    
 
    $('#addRow').on('click', function() { 
 
    \t var inputText1 = $("input[name='FirstName']").val() 
 
    \t var inputText2 = $("input[name='LastName']").val() 
 
     var inputText3 = $("input[name='address']").val() 
 
     var inputText4 = $("input[name='number']").val() 
 
     var inputText5 = $("input[name='zip']").val() 
 
     t.row.add([ 
 
      inputText1, 
 
      inputText2, 
 
      inputText3, 
 
      inputText4, 
 
      inputText5 
 
     ]).draw(false); 
 

 
     counter++; 
 
    }); 
 
    
 
    // Automatically add a first row of data 
 
    $('#addRow').click(); 
 
});

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 
 
<script src="https://cdn.datatables.net/1.10.11/js/jquery.dataTables.min.js"></script> 
 
<link href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet"/> 
 
<select> 
 
    <option value="volvo">Volvo</option> 
 
    <option value="saab">Saab</option> 
 
    <option value="mercedes">Mercedes</option> 
 
    <option value="audi">Audi</option> 
 
</select> 
 
    </br></br> 
 
    <form action=""> 
 
    <input type="radio" name="gender" value="male"> Male<br> 
 
    <input type="radio" name="gender" value="female"> Female<br> 
 
</form> 
 

 
     </br>First name: <input type="text" name="FirstName"><br> 
 
Last name: <input type="text" name="LastName"><br> 
 
address: <input type="text" name="address"><br> 
 
number: <input type="text" name="number"><br> 
 
zip: <input type="text" name="zip"><br> 
 
</br> 
 
</br> 
 
</br> 
 
</br> 
 
<table id="example" class="display" cellspacing="0" width="100%"> 
 
     <thead> 
 
      <tr> 
 
       <th>Frist Name</th> 
 
       <th>Last Name</th> 
 
       <th>Adress</th> 
 
       <th>Number</th> 
 
       <th>Zip</th> 
 
       <th>Gender</th> 
 
       <th>Car</th> 
 
      </tr> 
 
     </thead> 
 
     
 
    </table> 
 
<button id="addRow"> 
 
    addrow 
 
    </button> 
 
    
 

Answer 1

これを試してみてください。See DEMO

HTML：

<select name="car"> 
<option value="volvo">Volvo</option> 
    <option value="saab">Saab</option> 
    <option value="mercedes">Mercedes</option> 
    <option value="audi">Audi</option> 
</select> 
    </br></br> 
    <form action=""> 
    <input type="radio" name="gender" value="male"> Male<br> 
    <input type="radio" name="gender" value="female"> Female<br> 
</form> 

     </br>First name: <input type="text" name="FirstName"><br> 
Last name: <input type="text" name="LastName"><br> 
address: <input type="text" name="address"><br> 
number: <input type="text" name="number"><br> 
zip: <input type="text" name="zip"><br> 
</br> 
</br> 
</br> 
</br> 
<table id="example" class="display" cellspacing="0" width="100%"> 
     <thead> 
      <tr> 
       <th>Frist Name</th> 
       <th>Last Name</th> 
       <th>Adress</th> 
       <th>Number</th> 
       <th>Zip</th> 
       <th>Gender</th> 
       <th>Car</th> 
      </tr> 
     </thead> 

    </table> 
<button id="addRow"> 
    addrow 
    </button> 

JS：

$(document).ready(function() { 
var t = $('#example').DataTable(); 
var counter = 1; 

$('#addRow').on('click', function() { 
    var inputText1 = $("input[name='FirstName']").val(); 
    var inputText2 = $("input[name='LastName']").val(); 
    var inputText3 = $("input[name='address']").val(); 
    var inputText4 = $("input[name='number']").val(); 
    var inputText5 = $("input[name='zip']").val(); 
      var inputText6 = $("input[name='gender']").val(); 
    var inputText7 = $("select[name='car']").val(); 
    t.row.add([ 
     inputText1, 
     inputText2, 
     inputText3, 
     inputText4, 
     inputText5, 
     inputText6, 
     inputText7 
    ]).draw(false); 

    counter++; 
}); 

// Automatically add a first row of data 
$('#addRow').click(); 
});