我有一个 javascript 函数，可以使用 jquery 在表中插入新行。这是代码：
$.each(data,function(i,item){
$('#tb-articoli').dataTable().fnAddData( [
item.codiceArt,
item.codiceBarre,
item.nomeArticolo,
item.quantita,
item.prezzoVendita,
item.totale
]);
});
现在我需要实现一个 JavaScript 函数来删除我的“'#tb-articoli'”的所有行。 我怎样才能做到这一点？
编辑
这是我的html代码：
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--><html lang="it"><!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Viewport Metatag -->
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- Plugin Stylesheets first to ease overrides -->
<link rel="stylesheet" type="text/css" href="../plugins/colorpicker/colorpicker.css" media="screen">
<link rel="stylesheet" type="text/css" href="../plugins/colorpicker/colorpicker.css" media="screen">
<link rel="stylesheet" type="text/css" href="../plugins/imgareaselect/css/imgareaselect-default.css" media="screen">
<link rel="stylesheet" type="text/css" href="../plugins/jgrowl/jquery.jgrowl.css" media="screen">
<!-- Required Stylesheets -->
<link rel="stylesheet" type="text/css" href="../bootstrap/css/bootstrap.min.css" media="screen">
<link rel="stylesheet" type="text/css" href="../css/fonts/ptsans/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="../css/fonts/icomoon/style.css" media="screen">
<link rel="stylesheet" type="text/css" href="../css/mws-style.css" media="screen">
<link rel="stylesheet" type="text/css" href="../css/icons/icol16.css" media="screen">
<link rel="stylesheet" type="text/css" href="../css/icons/icol32.css" media="screen">
<!-- Demo Stylesheet -->
<link rel="stylesheet" type="text/css" href="../css/demo.css" media="screen">
<!-- jQuery-UI Stylesheet -->
<link rel="stylesheet" type="text/css" href="../jui/css/jquery.ui.all.css" media="screen">
<link rel="stylesheet" type="text/css" href="../jui/jquery-ui.custom.css" media="screen">
<!-- Theme Stylesheet -->
<link rel="stylesheet" type="text/css" href="../css/mws-theme.css" media="screen">
<link rel="stylesheet" type="text/css" href="../css/themer.css" media="screen">
<title>EasyEuc</title>
</head>
<body>
<?php include('./menu_utente.php'); ?>
<!-- Themer End -->
<!-- Start Main Wrapper -->
<div id="mws-wrapper">
<!-- Necessary markup, do not remove -->
<div id="mws-sidebar-stitch"></div>
<div id="mws-sidebar-bg"></div>
<!-- Sidebar Wrapper -->
<div id="mws-sidebar">
<!-- Searchbox -->
<div id="mws-searchbox" class="mws-inset">
<form action="typography.html">
<input type="text" class="mws-search-input" placeholder="Search...">
<button type="submit" class="mws-search-submit"><i class="icon-search"></i></button>
</form>
</div>
<!-- Main Navigation -->
<div id="mws-navigation">
<?php include('./menu_navigazione.php');?>
</div>
</div>
<!-- Main Container Start -->
<div id="mws-container" class="clearfix">
<!-- Inner Container Start -->
<div class="container">
<div class="mws-panel grid_4 mws-collapsible">
<div class="mws-panel-header">
<span>Riepilogo Dati periodo selezionato</span>
</div>
<div class="mws-panel-body">
<form id="mws-validate-lezione" class="mws-form" >
<div id="mws-validate-error" class="mws-form-message error" style="display:none;"></div>
<fieldset class="mws-form-inline">
<legend>Compila i campi e clicca sul pulsante cerca</legend>
<div class="mws-form-row bordered">
<label class="mws-form-label">Data Inizio <span class="required">*</span></label>
<div class="mws-form-item">
<input id="l_dataStart" type="text" class="mws-datepicker large" name="l_dataStart" readonly="readonly">
</div>
</div>
<div class="mws-form-row bordered">
<label class="mws-form-label">Data Fine</label>
<div class="mws-form-item">
<input id="l_dataEnd" type="text" class="mws-datepicker large" name="l_dataEnd" readonly="readonly">
</div>
</div>
<div class="mws-button-row ">
<input type="Button" id="Cerca" value="Cerca" class="btn btn-warning return-page ">
<input id="suffissoTable" name="suffissoTable" value='<?php echo $_GET["suffisso"]?>' type="hidden" />
</div>
</fieldset>
</div>
</form>
</div>
<div class="mws-panel grid_8 mws-collapsible">
<div class="mws-panel-header">
<span><i class="icon-table"></i> Ordini registrati durante il periodo selezionato</span>
</div>
<div class="mws-panel-body no-padding">
<dialog class="mdl-dialog grid_4" style="top: 10%;left: 25%;">
<h4 class="mdl-dialog__title">Riepilogo Ordine</h4>
<div class="mdl-dialog__content">
<table id="tb-articoli" class="mws-datatable-fn mws-table">
<thead>
<tr>
<th>Codice</th>
<th>Articolo</th>
<th>Quantità</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="mdl-dialog__actions">
<button type="button" class="mdl-button close">Close</button>
</div>
</dialog>
<table id="tb-lezioni" class="mws-datatable-fn mws-table">
<thead>
<tr>
<th>ID</th>
<th>Data</th>
<th>Fatt.nro</th>
<th>Totale(€)</th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
</div>
<!-- Inner Container End -->
<!-- Footer -->
<div id="mws-footer">
Copyright Your Website 2012. All Rights Reserved.
</div>
</div>
<!-- Main Container End -->
</div>
<script src="../js/libs/jquery-1.8.3.min.js"></script>
<script src="../js/libs/jquery.mousewheel.min.js"></script>
<script src="../js/libs/jquery.placeholder.min.js"></script>
<script src="../custom-plugins/fileinput.js"></script>
<!-- jQuery-UI Dependent Scripts -->
<script src="../jui/js/jquery-ui-1.9.2.min.js"></script>
<script src="../jui/jquery-ui.custom.min.js"></script>
<script src="../jui/js/jquery.ui.touch-punch.js"></script>
<!-- Plugin Scripts -->
<script src="../plugins/datatables/jquery.dataTables.min.js"></script>
<!--[if lt IE 9]>
<script src="js/libs/excanvas.min.js"></script>
<![endif]-->
<script src="../plugins/flot/jquery.flot.min.js"></script>
<script src="../plugins/flot/plugins/jquery.flot.tooltip.min.js"></script>
<script src="../plugins/flot/plugins/jquery.flot.pie.min.js"></script>
<script src="../plugins/flot/plugins/jquery.flot.stack.min.js"></script>
<script src="../plugins/flot/plugins/jquery.flot.resize.min.js"></script>
<script src="../plugins/colorpicker/colorpicker-min.js"></script>
<script src="../plugins/validate/jquery.validate-min.js"></script>
<script src="../custom-plugins/wizard/wizard.min.js"></script>
<!-- Core Script -->
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../js/core/mws.js"></script>
<!-- Themer Script (Remove if not needed) -->
<script src="../js/core/themer.js"></script>
这是我用来在表中插入新行的函数。
<script>
function dettagli(idOrdine,data){
var date = data;
var newdate = date.split("/").reverse().join("/");
var suffissoTable = $("#suffissoTable").val();
$.post("select_ArticoliOrdini.php",{dataOrdine:newdate,idOrdine:idOrdine,suffissoTable:suffissoTable}, function(data){},"json").done(function(data) {
if(data!=null){
$.each(data,function(i,item){
$('#tb-articoli').dataTable().fnAddData( [
item.codiceArt,
item.nomeArticolo,
item.quantita
]);
});
var dialog = document.querySelector('dialog');
dialog.showModal();
notification("Notifica","Caricamento terminato");
}else{
notification("Notifica","Nessun Risultato trovato");
}
}).fail(function(){
notification("Notifica","Caricamento non terminato");
}).always(function() { });
}
</script>
这是一个 JavaScript 函数，可用于删除数据表中的所有行：
function clearTable() {
// Get the DataTable instance
var table = $('#tb-articoli').DataTable();
// Clear all data from the table
table.clear().draw();
}
function dettagli(idOrdine, data) {
var date = data;
var newdate = date.split("/").reverse().join("/");
var suffissoTable = $("#suffissoTable").val();
// Clear the table before adding new rows
clearTable();
$.post("select_ArticoliOrdini.php", { dataOrdine: newdate, idOrdine: idOrdine, suffissoTable: suffissoTable }, function (data) { }, "json").done(function (data) {
if (data != null) {
$.each(data, function (i, item) {
$('#tb-articoli').dataTable().fnAddData([
item.codiceArt,
item.nomeArticolo,
item.quantita
]);
});
var dialog = document.querySelector('dialog');
dialog.showModal();
notification("Notifica", "Caricamento terminato");
} else {
notification("Notifica", "Nessun Risultato trovato");
}
}).fail(function () {
notification("Notifica", "Caricamento non terminato");
}).always(function () { });
}
// Function to clear the DataTable
function clearTable() {
var table = $('#tb-articoli').DataTable();
table.clear().draw();
}
这保证了每次调用“dettagli”函数插入新行都会导致预先从表中清除预先存在的行。