将 textbox/radiobutton/and 下拉列表中的信息添加到数据表

Question

我正在尝试从文本 ex:"Name,Number,etc" 中获取信息；并将该信息添加到我的数据 Table。但我不知道如何让那部分工作。我还附上了可以正常工作的 jsfiddle。JSFiddle

$(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()
        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();
} );

将 textbox/radiobutton/and 下拉列表中的信息添加到数据表

Add info from textbox/radiobutton/and dropdown list to dataTable

javascript

datatable

jquery

bootstrapping

datatables-1.10