我在移动视图中遇到了删除问题 [英] i hav stuck in delete in mobile view
问题描述
在表格中我使用了Pc视图和移动视图，如果我在内部行添加删除按钮。 In the table i have using both Pc view and mobile View if i hav add delete button in inside row. 这篇关于我在移动视图中遇到了删除问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
IS删除按钮在桌面视图中正常工作当我压缩移动视图时删除它的问题
< pre lang =HTML> < ！DOCTYPE html >
< ！DOCTYPE html < span class =code-keyword>>
< html >
< head >
< ; meta name < span class =code-keyword> = viewport 内容 = width = device-width，initial-scale = 1 >
//默认链接
< link rel = 样式表 href = http://maxcdn.bootstrapcdn.com/bootstrap /3.3.6/css/bootstrap.min.css\">
< link rel = stylesheet href = < span class =code-keyword> http://getbootstrap.com/dist/css/bootstrap.css >
< span class =code-keyword>< link rel = stylesheet href = jquery.dataTables。 css >
< link rel = stylesheet href = dataTables.responsive.css > ;
//日期弹出窗口
< link rel = 样式表 href = https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css >
//日期弹出式
& lt; script src = https://code.jquery.com/jquery-1.10.2.js > < / script >
< script src = https://code.jquery.com/ui/1.11.4/jquery-ui.js > < / script >
< script type = text / javascript language = javascript src = jquery.dataTables.js > < / script >
< script type = text / javascript language = javascript < span class =code-attribute> src = dataTables.responsive.js > < / script >
< script src = https://cdn.datatables.net/tabletools/2.2.4/js/ dataTables.tableTools.min.js > < / script >
// def link
< script < span class =code-attribute> src = http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js > < / script >
< style < span class =code-attribute> type = text / css >
table ＃ t01 th {
background-color ： ＃0066CC;
颜色 ： white;
padding ： 5px;
}
< / 风格 >
< script 类型 = text / javascript >
< ; / script >
< script type = text / javascript >
$（ document ）。ready（ function （）{
$（' #example'）。DataTable（{
ajax ： demo.json，
columns：[
{ data： name}，
{
data： null ，
< span class =code-string> bSortable： false ，
mRender： function （数据，type，full）{
return ' < button class =btnDelete>删除< / button>';
}
}，
{ data： position}，
{ data： office} ，
{ data： extn}，
{ data： start_date}，
{ data： 薪水}
]
}）;
$（ document ）。ready（ function （）{
var table = $（' #example'）。DataTable（）;
$（' ＃example tbody'）。on（' 点击'，' tr'， function （）{
if （$（ this ）。hasClass（' selected'））{
$（ this ）。removeClass（' 选中'）;
}
其他 {
table 。$（' tr.selected'）。removeClass（' 选中'）;
$（ this ）。addClass（' 选择了）;
}
}）;
$（' ＃button'）。click（ function （）{
table.row（' 。selected' ）。remove（）。draw（ false ）;
}）;
}）;
$（ #example）。on（' click'，' 。btnDelete'， function （）{
$ （ this ）。nearest（' tr'）。remove（）;
alert（ SucessFull从DataBase中删除数据U不能再次重复此数据 ）;
}）;
// 申请表格按钮点击显示/隐藏
$（ function （）{
$（' .toggle'）。click（ function （event）{
event.preventDefault（）;
var target = $（ this ）。attr（' href'）;
$（target）.toggleClass（' 隐藏节目'）;
}）;
}）;
}）;
< / script >
< script type = text / javascript >
$（ function （）{
$（ ＃TextBox1 ）.datepicker（{
minDate： 0 ，
maxDate：' + 1Y + 6M'，
onSelect： function （dateStr）{
var min = $（ this ）。datepicker（' GETDATE'）; // 获取所选日期
$（ ＃TextBox2）。datepicker（' 选项'，' minDate'，min || ' 0'）; // 设置其他分钟，默认为今天
}
}）;
}）;
$（ function （）{
$（ ＃TextBox2）。datepicker（{
minDate：' 0' ，
maxDate：' + 1Y + 6M'，
onSelect： function （dateStr）{
var max = $（ this ）。datepicker（' getDate'）; // 获取所选日期
$（' ＃datepicker'）。datepicker（' option'，' maxDate'，max || ' + 1Y + 6M'）; // 设置其他最大值，默认为+18个月
var start = $（ ＃TextBox1）。datepicker（ getDate）;
var end = $（ ＃TextBox2 ）。datepicker（ getDate）;
var 天=（结束 - 开始）/（ 1000 * 60 * 60 * 24 ）;
$（ ＃TextBox3）。val（days）;
}
}）;
}）;
< / script >
< / head >
< body >
< div 类 = 容器 > ;
< h2 > 表< / h2 > ;
< table id = t01 width = 100％ >
< tr >
< th > 申请保留< / th >
< / tr >
< / table >
< br >
< 表格 >
< a href = ＃credits class = toggle btn btn-primary > 申请表格< / a >
< div id = credits class = 隐藏得很好 >
< h1 > 申请表格< / h1 >
< div class = form-group > ;
< label for = sn > 班次姓名：< / label >
< 输入 type = text class = form-control id = sn >
< label for = st > 保留类型：< / label >
< 选择 class = form-control < span class =code-attribute> id = st >
< 选项 > 1 <
< 选项 > 2 < < span class =code-leadattribute> / option >
< 选项 > 3 < < span class =code-leadattribute> / option >
< 选项 > 4 < < span class =code-leadattribute> / option >
< / select >
< div class = row >
< div class = input-daterange id = datepicker >
< div class = col-xs-6 >
< label class = control-label = TextBox1 > 从日期开始：< span class =code-keyword>< / label >
< 输入 class = form-control 类型 = < span class =code-keyword> text id = TextBox1 / >
< / div >
< div class = col-xs-6 >
< label class = control-label = TextBox2 > To Date：< /标签 >
< 输入 class = 表单控制 type = text id = TextBox2 / >
< / div >
< div class = col-xs-12 >
< label < span class =code-attribute> class = control-label for = TextBox3 > 总休假天数：< / label >
< input class = 表格控制 type = text id = TextBox3 />
</div>
</div>
</div>
\t\t<label for=\"ld\">Leave Days:</label>
<input type=\"text\" class=\"form-control\" id=\"ld\">
<label for=\"lr\">Leave Reason:</label>
<textarea class=\"form-control\" rows=\" 5\" id=\"lr\"></textarea>
</div>
<div class=\"row\">
<div class=\"col-xs-12\"> <button type=\"submit\" class=\"btn btn-primary center-block \" >submit</button></div>
</div>
<
</table>
<button id=\"button\">delete</button>
<table id=\"example\" class=\"table table-striped table-hover dt-responsive\" width=\"100%\" cellspacing=\"0\">
<thead>
<tr>
<th>Name</th>
<th data-priority=\"2\">Action</th>
<th data-priority=\"1\">Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
< ;/thead>
</table>
</br></div>
</body>
</html>(document).ready(function() {
('#example').Data Table( {
\"ajax\": \"demo.json\",
\"columns\": [
{ \"data\": \"name\" },
{
\t\t\t\t\"data\": null,
\t\t\t\t\"bSortable\": false,
\t\t\t\t\"mRender\": function(data, type, full) {
\t\t\t\t return '<button class=\"btnDelete\">Delete</b utton>';
\t\t\t\t}
\t\t\t } ,
{ \"data\": \"position\" },
{ \"data\": \"office\" },
{ \"data\": \"extn\" },
{ \"data\": \"start_date\" },
{ \"data\": \"salary\" }
]
} );(document).ready(function() {
var table =
IS delete button is work properly in desktop view when i compresses mobile view its delete its problem
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
// default link
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel ="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<link rel="stylesheet" href="jquery.dataTables.css">
<link rel="stylesheet" href="dataTables.responsive.css">
// date popup
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
// date popup
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" language="javascript" src="jquery.dataTables.js"></script>
<script type="text/javascript" language="javascript" src="dataTables.responsive.js"></script>
<script src="https://cdn.datatables.net/tabletools/2.2.4/js/dataTables.tableTools.min.js"></script>
// def link
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style type="text/css">
table#t01 th {
background-color:#0066CC;
color: white;
padding:5px;
}
</style>
<script type="text/javascript" >
</script>
<script type="text/javascript" >
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "demo.json",
"columns": [
{ "data": "name" },
{
"data": null,
"bSortable": false,
"mRender": function(data, type, full) {
return '<button class="btnDelete">Delete</button>';
}
} ,
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
$(document).ready(function() {
var table = $('#example').DataTable();
$('#example tbody').on( 'click', 'tr', function () {
if ( $(this).hasClass('selected') ) {
$(this).removeClass('selected');
}
else {
table.$('tr.selected').removeClass('selected');
$(this).addClass('selected');
}
} );
$('#button').click( function () {
table.row('.selected').remove().draw( false );
} );
} );
$("#example").on('click','.btnDelete',function(){
$(this).closest('tr').remove();
alert("SucessFull Delete data from DataBase U Cant Retrive This Data Again ");
});
// Apply Form Button click show/hide
$(function () {
$('.toggle').click(function (event) {
event.preventDefault();
var target = $(this).attr('href');
$(target).toggleClass('hidden show');
});
});
} );
</script>
<script type="text/javascript">
$(function() {
$("#TextBox1").datepicker({
minDate: 0,
maxDate: '+1Y+6M',
onSelect: function (dateStr) {
var min = $(this).datepicker('getDate'); // Get selected date
$("#TextBox2").datepicker('option', 'minDate', min || '0'); // Set other min, default to today
}
});
});
$(function() {
$("#TextBox2").datepicker({
minDate: '0',
maxDate: '+1Y+6M',
onSelect: function (dateStr) {
var max = $(this).datepicker('getDate'); // Get selected date
$('#datepicker').datepicker('option', 'maxDate', max || '+1Y+6M'); // Set other max, default to +18 months
var start = $("#TextBox1").datepicker("getDate");
var end = $("#TextBox2").datepicker("getDate");
var days = (end - start) / (1000 * 60 * 60 * 24);
$("#TextBox3").val(days);
}
});
});
</script>
</head>
<body>
<div class="container">
<h2>Table</h2>
<table id="t01" width="100%">
<tr>
<th>Apply Leave</th>
</tr>
</table>
<br>
<table>
<a href="#credits" class="toggle btn btn-primary">Apply Form</a>
<div id="credits" class="well hidden">
<h1>Apply Leave Form</h1>
<div class="form-group">
<label for="sn">Shift Name:</label>
<input type="text" class="form-control" id="sn">
<label for="st">Leave Type:</label>
<select class="form-control" id="st">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<div class="row">
<div class="input-daterange" id="datepicker">
<div class="col-xs-6">
<label class="control-label" for="TextBox1">From Date: </label>
<input class="form-control" type="text" id="TextBox1" />
</div>
<div class="col-xs-6">
<label class="control-label" for="TextBox2">To Date: </label>
<input class="form-control" type="text" id="TextBox2" />
</div>
<div class="col-xs-12">
<label class="control-label" for="TextBox3">Total Leave Days: </label>
<input class="form-control" type="text" id="TextBox3" />
</div>
</div>
</div>
<label for="ld">Leave Days:</label>
<input type="text" class="form-control" id="ld">
<label for="lr">Leave Reason:</label>
<textarea class="form-control" rows="5" id="lr"></textarea>
</div>
<div class="row">
<div class="col-xs-12"> <button type="submit" class="btn btn-primary center-block " >submit</button></div>
</div>
</div>
</table>
<button id="button">delete</button>
<table id="example" class="table table-striped table-hover dt-responsive" width="100%" cellspacing="0">
<thead>
<tr>
<th>Name</th>
<th data-priority="2">Action</th>
<th data-priority="1">Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
</table>
</br></div>
</body>
</html>
(document).ready(function() {
('#example').DataTable( {
"ajax": "demo.json",
"columns": [
{ "data": "name" },
{
"data": null,
"bSortable": false,
"mRender": function(data, type, full) {
return '<button class="btnDelete">Delete</button>';
}
} ,
{ "data": "position" },
{ "data": "office" },
{ "data": "extn" },
{ "data": "start_date" },
{ "data": "salary" }
]
} );
(document).ready(function() {
var table =
