2017-07-05 18 views
0

私はこのシンプルなフォームjQueryの編集可能な入力テキストボックスフィールド

<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> 

この表の入力テキストボックスが

$(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; 
    }); 
}); 

私が直面していますどのような問題であり、編集するためにjqueryのコードを入力テキストボックスがされて作成されました「編集」ボタンをクリックすることなくフィールドidを編集することができます。 しかし、ユーザーが[編集]ボタンをクリックしたときにのみ編集可能にしたいと考えています。 どうすればいいですか教えてください

答えて

0

無効な属性を入力に追加してから、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; 
    }); 
}); 
0

使用この

$(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; 
}); 
}); 

そして

<input type="text" value="99" readonly /> 
以下のように読み取り専用属性を持つあなたの入力タイプ= "text" のタグを変更します
関連する問題