我正在使用Codeigniter。我创建了一个包含不同列的表。我想在点击“+”按钮时动态创建行。现在我可以使用jquery创建行。我想将数据保存到数据库。当我点击“+”按钮时，如何将每行的值保存到数据库？
答案 0 :(得分：0)
您可以对此使用ajax请求。
首先，当您点击<html>
<head>
<script type="text/javascript" src="http://fiddle.jshell.net/js/lib/mootools-core-1.4.5-nocompat.js"></script>
<script type="text/javascript">
window.addEventListener('load', function() {
var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);
var c = document.getElementById('myCanvas');
var ctx = c.getContext('2d');
function handleImage(e){
var reader = new FileReader();
reader.onload = function(event){
var img = new Image();
img.onload = function(){
c.width = img.width;
c.height = img.height;
ctx.drawImage(img,0,0);
}
img.src = event.target.result;
}
reader.readAsDataURL(e.target.files[0]);
}
var canvas = document.getElementById('myCanvas');
canvas.onclick = function(e){
var ctx = canvas.getContext('2d');
var x = e.x;
var y = e.y;
var ccolor = ctx.getImageData(x,y,1,1).data;
var r = ccolor[0];
var g = ccolor[1];
var b = ccolor[2];
var rgb = r + ',' + g + ',' + b;
console.log(rgb);
$.ajax({
type: "POST",
url: 'serverSideComponent',
data: rgb,
success:function(data){
console.log(data);
}
});
}
});
</script>
</head>
<body>
<div style="background:#ffffff; width:100%; padding:20px; ">
<label>Image File:</label><br/>
<input type="file" id="imageLoader" name="imageLoader"/>
<input type="submit"/>
</div>
<canvas id="myCanvas" ></canvas>
</body>
</html>
按钮，而不是每列中的文字时，您可以输入输入字段。
+之后，您可以为<tr>
<td><input id="field1" type="text" /></td>
<td><input id="field2" type="text" /></td>
<td><input id="field3" type="text" /></td>
<td><button id="save"></button></td>
<tr>
分配一个事件。单击时，它将从字段中获取所有输入，然后存储在变量中并调用ajax请求。你应该准备一个PHP代码来处理这个请求。
button#save在您的$('#save').on('click', function() {
var data = {
field1: $('input#field1').val(),
field2: $('input#field2').val(),
field3: $('input#field3').val()
};
// call ajax request
$.post(url + '/controller/save', data, function(data) {
console.log(data);
});
}
中，您应该拥有处理请求的controller方法。
save您可以使用按钮保存以保存所有数据。
public function save() {
if($_POST) {
// get input
// call model to save data to db
}
}
然后只需使用$('#save').click(function() {
var data = $('input').serialize();
$.post(url, data, function(data) {
console.log(data);
});
});
或print_r即可在控制器中查看方法中的已发布值。