将文本框/单选按钮/和下拉列表中的信息添加到 dataTable答案

【问题标题】：Add info from textbox/radiobutton/and dropdown list to dataTable将文本框/单选按钮/和下拉列表中的信息添加到 dataTable
【发布时间】：2016-08-28 20:49:42
【问题描述】：

我正在尝试从文本中获取信息，例如：“姓名、号码等”；并将该信息添加到我的数据表中。但我不知道如何让那部分工作。我还附上了运行正常的 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>

【问题讨论】：

标签： javascript jquery datatable bootstrapping datatables-1.10

【解决方案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();
} );

【讨论】：