jQuery可编辑输入文本框字段
[英]Jquery Editable input textbox field
问题描述
I have created this simple form 
我创建了这个简单的表格
<html>
<head>
<title>Datatable</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script type="text/javascript" src="../jquery-1.11.3.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../jquery/Jobseeker/EditDatatable.js"></script>
</head>
<body>
<form>
<table id="example">
<tr>
<td>
<label>Ab Va</label>
</td>
<td>
<input type="text" value="99"/>
</td>
</tr>
<tr>
<td>
<label>Sa Va</label>
</td>
<td>
<input type="text" value="9986"/>
</td>
</tr>
</table>
<button id="btn">Edit</button>
</form>
</body>
</html>
The jquery code to edit the input textbox of this table is 用于编辑此表的输入文本框的jQuery代码是
$(document).ready(function() {
var table = $('#example').DataTable();
$('button').click( function() {
var data = table.$('input, select').serialize();
alert(
"The following data would have been submitted to the server: \n\n"+
);
return false;
} );
} );
The problem what I am facing is the input textbox field id editable without click of the button "Edit". 我面临的问题是无需单击按钮“编辑”即可编辑输入文本框字段ID。 But I want it to be editable only when the user clicks on the Edit button. 但是我希望仅当用户单击“编辑”按钮时才可以对其进行编辑。 Please let me know how can i do this 请让我知道我该怎么做
2 个解决方案
解决方案1
0 2017-07-05 12:19:36
you can add disabled attribute to input and then remove it on btn click. 您可以将禁用的属性添加到输入，然后在btn单击上将其删除。
<input type="text" value="99" disabled/>
<input type="text" value="9986" disabled/>
$(document).ready(function() {
var table = $('#example').DataTable();
$('button').click( function() {
$('input').removeAttr('disabled');
var data = table.$('input, select').serialize();
alert("The following data would have been submitted to the server: \n\n");
return false;
} );
} );
解决方案2
0 2017-07-05 12:25:08
Use this 用这个
$(document).ready(function() {
var table = $('#example').DataTable();
$('button').click( function() {
$("input[type=text]").attr("readonly", false);
var data = table.$('input, select').serialize();
alert("The following data would have been submitted to the server: \n\n"+);
return false;
});
});
And change your input type="text" tags with readonly attribute as below 并使用readonly属性更改输入type =“ text”标签，如下所示
<input type="text" value="99" readonly />
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.