主页 / 问题 / 711830
Accepted
Александр
Asked:2020-08-29 16:18:47 +0000 UTC2020-08-29 16:18:47 +0000 UTC

jQuery 和 CSS 样式在添加到表格时会崩溃。

  • 772

下午好。有一个用于处理表格的 DataTables 插件。

这是帕拉金网站https://www.datatables.net/。

我将它安装在我的网站上，并且桌子开始工作。

表是通过table_of_goods()函数在JS文件中创建的；

表格数据显示在以下列中： Product 1, Price 使用从 test[] 数组中获取信息的循环；

最初，我在数组test[1, 2, 3]中写了以下值；并且这些值显示在 Product 字段中。一切正常。

当我从表单向数组添加值时，一切都停止工作。样式和 jQuery 立即被禁用。同时，所有内容都添加了，但没有样式和小工具，例如 palagin 添加的表格搜索。告诉我，有什么问题？以下是该文件的 HTML 和 JS 代码。

<!DOCTYPE html>
<html lang="en">
<title>Goods</title>
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">

     <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>


    <style>
    .bloc {background-color: #ffffff; padding: 20px;}
    .head_add {text-align: right;}
    .tab {margin-top: 50px;}
    </style>
  </head>
  <body>

   <div class="container bloc">
  <div class="row">
    <!-- 1 -->
    <div class="col-sm-6 col-md-6 col-lg-6">
    <form class="form-inline">
  <label class="sr-only" for="inlineFormInput">Name</label>

  <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0"  id="inlineFormInput" placeholder="What are you looking for ?">


  <button type="submit" class="btn btn-primary">Search</button>
</form></div>
    <div class="col-sm-6 col-md-6 col-lg-6 head_add"><button type="button" class="btn btn-primary">Add New</button></div>
    <div class="col-sm-12 col-md-12 col-lg-12 tab">
  <div id="table"></div>
 </div>

  <div class="col-sm-12 col-md-12 col-lg-12 tab">

  <form id="add_form" class="form-inline" onsubmit="return table_of_goods()">

  <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0"  id="good" placeholder="Good">
  <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0"  id="inlineFormInput" placeholder="Count">
    <input type="text" class="form-control mb-2 mr-sm-2 mb-sm-0"  id="price" placeholder="Price">

  <input id="add_update" class="btn btn-primary" type="submit" value="Add">
</form>
  </div>
  </div>
</div>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>

main.js

var test = [1,2,3];


function table_of_goods () {
    var good = '';
    var price;
    good = document.getElementById("good").value;
    var check = good.length;
    price = document.getElementById("price").value;

if (check > 0) {
    test.push([[good],[price]]);
    };


var elem = document.getElementById('table');

var table = '<table id=main_table class=display cellspacing=0 width=100%><thead><tr><th>Name</th><th>Price, $</th><th>Actions</th></tr><tfoot><tr><th>Name</th><th>Price</th><th>Actions</th></tfoot><tbody>';


for (var i = 0; i < test.length; i++){
table += '<tr><td>' + test[i] + '</td><td>495</td><td>Действия</td></tr>';
}


table += '</tbody></table>';

el.value = '';

el2.value = '';

el3.value = 'Add';

$(document).ready(function() {
    $('#main_table').DataTable();
} );

elem.innerHTML = table;

return false;
}

table_of_goods();
javascript

1 个回答

  1. Best Answer

    你在错误的地方初始化了表格上的插件，创建它后，它应该是这样的：

        elem.innerHTML = table;

    $('#main_table').DataTable();


    var test = [1, 2, 3], good, price, elem, table, i, testLength;

function renderTable() {

    good = $("#good").val();
    price = $("#price").val();

    if (good.length > 0) {
        test.push([[good], [price]]);
    }

    table = '<table id="main_table" class="display" cellspacing="0" width="100%"><thead><tr><th>Name</th><th>Price, $</th><th>Actions</th></tr><tfoot><tr><th>Name</th><th>Price</th><th>Actions</th></tfoot><tbody>';

    testLength = test.length;

    for (i = 0; i < testLength; i++) {
        table += '<tr><td>' + test[i] + '</td><td>495</td><td>Действия</td></tr>';
    }

    table += '</tbody></table>';

    elem = $('#table');
    elem.html(table);

    $('#main_table').DataTable({"searching": true});

    return false;
}

renderTable();
    <!DOCTYPE html>
<html lang="en">
<title>Goods</title>
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">
    <style>
        .block {
            background-color: #ffffff;
            padding: 20px;
        }
    </style>
</head>
<body>
<div class="container block">
    <div class="row">
        <div class="col-sm-12">
            <div id="table"></div>
        </div>
        <div class="col-sm-12">
            <form id="add-form" class="form-inline" onsubmit="return renderTable()">
                <input type="text" class="form-control" id="good" placeholder="Good">
                <input type="text" class="form-control" id="another-input" placeholder="Count">
                <input type="text" class="form-control" id="price" placeholder="Price">
                <input id="add-update" class="btn btn-primary" type="submit" value="Add">
            </form>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="javascripts/main.js"></script>
</body>
</html>

    我没有匆忙检查你的代码，但我建议你精简它，以便一切都是正确的，因为它很难阅读并且包含错​​误。

    • 3

相关问题