Editable bootstrap table 使用 jquery 单击按钮的行
Editable bootstrap table row on button click using jquery
我正在尝试使用 Jquery 在按钮单击时编辑 bootstrap table 的值。我参考了这个 post making row editable
它完全有效 fine.The 我遇到的唯一问题是双击按钮进入编辑 mode.Here 是我的代码片段
$('.editbtn').click(function () {
var currentTD = $(this).parents('tr').find('td');
if ($(this).html() == 'Edit') {
currentTD = $(this).parents('tr').find($("td").not(":nth-child(1)"));
$.each(currentTD, function () {
$(this).prop('contenteditable', true).css({
'background':'#fff',
'color':'#000'
})
});
} else {
$.each(currentTD, function () {
$(this).prop('contenteditable', false).removeAttr("style");
});
}
$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
if ($(this).html() == 'Save'){
$(this).prop('contenteditable',false)
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<table id="tableone" class="table table-striped table-dark table-bordered" border="1">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Name</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>21st August</td>
<td>abc</td>
<td contenteditable="false"><button type="button"class="btn btn-primary editbtn">Edit</button>
<button type="button" class="btn btn-danger">
Delete
</button></td>
</tr>
<tr>
<td>21st August</td>
<td>abc</td>
<td contenteditable="false"><button type="button" class="btn btn-primary editbtn" >
Edit
</button>
<button type="button" class="btn btn-danger">
Delete
</button></td>
</tr>
<tr>
<td>21st August</td>
<td>abc</td>
<td contenteditable="false"><button type="button" class="btn btn-primary editbtn" >
Edit
</button>
<button type="button" class="btn btn-danger">
Delete
</button></td>
</tr> <tr>
<td>21st August</td>
<td>abc</td>
<td contenteditable="false"><button type="button" class="btn btn-primary editbtn">
Edit
</button>
<button type="button" class="btn btn-danger">
Delete
</button></td>
</tr>
</tbody>
</table>
这里我禁用了编辑数据column.As你可以看到,当我们点击第一行的编辑按钮时,只需要单击一次,但对于其余行,多次点击是necessary.And 多次点击后,单击会进入编辑模式,直到刷新 page.I 不知道在哪里 missed.I 将不胜感激。
问题出在这一行:它考虑了 line
而你 $(this).html()
.
<button type="button" class="btn btn-primary editbtn" >
Edit
</button>
为什么它在下次点击时起作用,因为在您的代码中您更改为 Edit
$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
您可以尝试以下操作:
使用$(this).text().trim()
或更正行:
<button type="button" class="btn btn-primary editbtn" >Edit</button>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.editbtn').click(function () {
var currentTD = $(this).parents('tr').find('td');
//alert('this '+$(this).html() );
if ($(this).text().trim() == 'Edit') {
currentTD = $(this).parents('tr').find($("td").not(":nth-child(1)"));
//alert("first if "+currentTD.html());
$.each(currentTD, function () {
$(this).prop('contenteditable', true).css({
'background':'#fff',
'color':'#000'
})
});
} else {
// alert("second if "+currentTD.html());
$.each(currentTD, function () {
//alert("second if "+currentTD.html());
$(this).prop('contenteditable', false).removeAttr("style");
});
}
$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
if ($(this).html() == 'Save'){
// alert("third if "+currentTD.html());
$(this).prop('contenteditable',false)
}
});
});
</script>
</head>
<body>
<table id="tableone" class="table table-striped table-dark table-bordered" border="1">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Name</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>21st August</td>
<td>abc</td>
<td contenteditable="false"><button type="button"class="btn btn-primary editbtn">Edit</button>
<button type="button" class="btn btn-danger">
Delete
</button></td>
</tr>
<tr>
<td>21st August</td>
<td>abc</td>
<td contenteditable="false"><button type="button" class="btn btn-primary editbtn" >Edit</button>
<button type="button" class="btn btn-danger">
Delete
</button></td>
</tr>
<tr>
<td>21st August</td>
<td>abc</td>
<td contenteditable="false"><button type="button" class="btn btn-primary editbtn" >Edit</button>
<button type="button" class="btn btn-danger">
Delete
</button></td>
</tr> <tr>
<td>21st August</td>
<td>abc</td>
<td contenteditable="false"><button type="button" class="btn btn-primary editbtn">Edit</button>
<button type="button" class="btn btn-danger">
Delete
</button></td>
</tr>
</tbody>
</table>
</body>
</html>
我正在尝试使用 Jquery 在按钮单击时编辑 bootstrap table 的值。我参考了这个 post making row editable 它完全有效 fine.The 我遇到的唯一问题是双击按钮进入编辑 mode.Here 是我的代码片段
$('.editbtn').click(function () {
var currentTD = $(this).parents('tr').find('td');
if ($(this).html() == 'Edit') {
currentTD = $(this).parents('tr').find($("td").not(":nth-child(1)"));
$.each(currentTD, function () {
$(this).prop('contenteditable', true).css({
'background':'#fff',
'color':'#000'
})
});
} else {
$.each(currentTD, function () {
$(this).prop('contenteditable', false).removeAttr("style");
});
}
$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
if ($(this).html() == 'Save'){
$(this).prop('contenteditable',false)
}
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<table id="tableone" class="table table-striped table-dark table-bordered" border="1">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Name</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>21st August</td>
<td>abc</td>
<td contenteditable="false"><button type="button"class="btn btn-primary editbtn">Edit</button>
<button type="button" class="btn btn-danger">
Delete
</button></td>
</tr>
<tr>
<td>21st August</td>
<td>abc</td>
<td contenteditable="false"><button type="button" class="btn btn-primary editbtn" >
Edit
</button>
<button type="button" class="btn btn-danger">
Delete
</button></td>
</tr>
<tr>
<td>21st August</td>
<td>abc</td>
<td contenteditable="false"><button type="button" class="btn btn-primary editbtn" >
Edit
</button>
<button type="button" class="btn btn-danger">
Delete
</button></td>
</tr> <tr>
<td>21st August</td>
<td>abc</td>
<td contenteditable="false"><button type="button" class="btn btn-primary editbtn">
Edit
</button>
<button type="button" class="btn btn-danger">
Delete
</button></td>
</tr>
</tbody>
</table>
这里我禁用了编辑数据column.As你可以看到,当我们点击第一行的编辑按钮时,只需要单击一次,但对于其余行,多次点击是necessary.And 多次点击后,单击会进入编辑模式,直到刷新 page.I 不知道在哪里 missed.I 将不胜感激。
问题出在这一行:它考虑了 line
而你 $(this).html()
.
<button type="button" class="btn btn-primary editbtn" >
Edit
</button>
为什么它在下次点击时起作用,因为在您的代码中您更改为 Edit
$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
您可以尝试以下操作:
使用$(this).text().trim()
或更正行:
<button type="button" class="btn btn-primary editbtn" >Edit</button>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$('.editbtn').click(function () {
var currentTD = $(this).parents('tr').find('td');
//alert('this '+$(this).html() );
if ($(this).text().trim() == 'Edit') {
currentTD = $(this).parents('tr').find($("td").not(":nth-child(1)"));
//alert("first if "+currentTD.html());
$.each(currentTD, function () {
$(this).prop('contenteditable', true).css({
'background':'#fff',
'color':'#000'
})
});
} else {
// alert("second if "+currentTD.html());
$.each(currentTD, function () {
//alert("second if "+currentTD.html());
$(this).prop('contenteditable', false).removeAttr("style");
});
}
$(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')
if ($(this).html() == 'Save'){
// alert("third if "+currentTD.html());
$(this).prop('contenteditable',false)
}
});
});
</script>
</head>
<body>
<table id="tableone" class="table table-striped table-dark table-bordered" border="1">
<thead>
<tr>
<th scope="col">Date</th>
<th scope="col">Name</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>21st August</td>
<td>abc</td>
<td contenteditable="false"><button type="button"class="btn btn-primary editbtn">Edit</button>
<button type="button" class="btn btn-danger">
Delete
</button></td>
</tr>
<tr>
<td>21st August</td>
<td>abc</td>
<td contenteditable="false"><button type="button" class="btn btn-primary editbtn" >Edit</button>
<button type="button" class="btn btn-danger">
Delete
</button></td>
</tr>
<tr>
<td>21st August</td>
<td>abc</td>
<td contenteditable="false"><button type="button" class="btn btn-primary editbtn" >Edit</button>
<button type="button" class="btn btn-danger">
Delete
</button></td>
</tr> <tr>
<td>21st August</td>
<td>abc</td>
<td contenteditable="false"><button type="button" class="btn btn-primary editbtn">Edit</button>
<button type="button" class="btn btn-danger">
Delete
</button></td>
</tr>
</tbody>
</table>
</body>
</html>