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

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

本文关键字：信息 添加 dataTable 下拉列表 文本 单选按钮      更新时间：2023-09-26

我正试图从文本中获取信息，例如："Name，Number，etc"；并将该信息添加到我的数据表中。但我不知道如何让这部分发挥作用。我还附上了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>

试试这个：查看演示

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();
} );
相关文章：