Question

我希望从输入到表单中的数据中填充数据表，但是没有任何乐趣...

当我按下Submit时，它将清除表单并返回到屏幕顶部，但不会填充表格

代码的缩小版本：



$(document).ready(function() {
  

  		var t = $('#job-table').DataTable();
  		var counter = 1;

  		$('#submit').on('click', function() {
		var text1 = $(".add-company").val();
	    var text2 = $(".add-contact").val();
	    var text3 = $(".add-from").val();
	    var text4 = $(".add-to").val();
	    var text5 = $(".add-driver").val();
	    var text6 = $(".add-income").val();
	    var text7 = $(".add-payment").val();
	    t.row.add([
		    text1,
		    text2,
		    text3,
		    text4,
		    text5,
		    text6,
		    text7
		]).draw(false);

		counter++;
  		});

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

就我所知，jQuery是正确的，因此不确定是什么阻止了该表的填充。

任何帮助都会很棒

Answer 1

您有两种可能性：

将“提交类型”更改为“提交”按钮
防止默认操作（表单提交）：e.preventDefault()：

此外，我建议更改jQuery中触发事件的方式：

来自：$('#submit').click();

收件人：$('#submit').trigger('click');

摘要：

var t = $('#job-table').DataTable();
var counter = 1;

$('#submit').on('click', function(e) {
    e.preventDefault();
    var text1 = $(".add-company").val();
    var text2 = $(".add-contact").val();
    var text3 = $(".add-from").val();
    var text4 = $(".add-to").val();
    var text5 = $(".add-driver").val();
    var text6 = $(".add-income").val();
    var text7 = $(".add-payment").val();
    t.row.add([
        text1,
        text2,
        text3,
        text4,
        text5,
        text6,
        text7,
            0,
            0
    ]).draw(false);

    counter++;
});

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" rel="stylesheet">
<link href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>

<div class="tile" id="tile-1">
    <div class="addjob tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
        <h2>Add info</h2>
        <form name="dataform" method="post">
                <span>
            <p>Date:</p>
            <input class="add-date" type="date" placeholder="Placeholder Text">
        </span>
        <span>
            <p>Customer/Company Name:</p>
            <input class="add-company" type="select" placeholder="Company-name Ltd" value="1">
        </span>
            <span>
                <p>Contact Name:</p>
                <input class="add-contact" type="text" placeholder="John Doe"  value="2">
            </span>
            <span>
                <p>From:</p>
                <input class="add-from" type="text" placeholder="Address 1"  value="3">
            </span>
            <span>
                <p>To:</p>
                <input class="add-to" type="text" placeholder="Address 2" value="4">
            </span>
            <span>
                <p>subbie Name:</p>
                <input class="add-driver" type="select" placeholder="Driver Name (Company)" value="5">
            </span>
            <span>
                <p>Income (£):</p>
                <input class="add-income" type="text" placeholder="£120" value="6">
            </span>
            <span>
                <p>subbie Payment (£):</p>
                <input class="add-payment" type="text" placeholder="£100" value="7">
            </span>
            <span>
                <p>Driver Vat registered?</p>
                <input class="add-payment" type="text" placeholder="Yes/No" value="8">
            </span>
            <span>
                <button id="submit" type="submit" value="submit">Submit</button>
            </span>
        </form>
    </div>
    <div class="viewalljob">
        <h2>Job</h2>
        <table id="job-table" class="display" cellspacing="0" width="100%">
            <thead>
            <tr>
                <th>Company Name</th>
                <th>Contact</th>
                <th>From</th>
                <th>To</th>
                <th>subbie</th>
                <th>Income (£)</th>
                <th>subbiePayment (£)</th>
                <th>Profit (£)</th>
                <th>Markup (%)</th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
    </div>
</div>

从表单数据填充数据表

1 个答案: