Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
200 views
in Technique[技术] by (71.8m points)

javascript - How to control buttons wih jquery

I'm new with jquery but I will try to explain my problem the best I can, this is my problem: I have one input, i will write one random question inside it for example- How old are you? I have 2 buttons the first one says: Put above and the second one is put below ... now I already have 2 questions and one checkbox with each question, if I write on the input and click the first button that question will be the first question "it will be above the other ones (it will include the checkbox)" and if I click the second button it will be below the other ones "it will include the checkbox"

The question is, how can I do that, I need to save all the row? or how Here is my source code, it's all that I have at this moment:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="style.css">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/file2.js"></script> 
</head>
<body>
<div id="id" class="mi_clase">
<input type="text" id="pregunta">
<button id="arriba" type="button">Poner arriba</button>
<button id="abajo" type="button">Poner abajo</button>
    <table><tbody>
    <tr>
    <td>Te gusta el cine?</td>
    <td><input type="checkbox" value="1"/></td>
    <td id="eliminar">Eliminar</td>
    </tr>
    <tr>
    <td>Te gusta los tacos?</td>
    <td><input type="checkbox" value="2"/></td> 
    <td id="eliminar">Eliminar</td>
    </tr>
    </tbody></table>
    <button id="guardar" type="button">Guardar</button>     
</div>
<div class="mi_clase">


</div>
</body>
</html>

And here is the js

$(document).ready(function() {
$("#guardar").click(function() {
var seleccionados = $.makeArray($(':checkbox').map(function(i, item) {
    if($(item).is(':checked'))
    return parseInt($(item).val());
}));

console.log(seleccionados);
});

$("#eliminar").click(function(){

});

$("#arriba").click(function(){
    var p = $("#pregunta").val();
    console.log(p);
    var td1 = $("<td></td>").text(p);
    var td2 = $("<td><input type='checkbox' value='2' /></td>");
    var td3 = $("<td></td>");
if(p != ""){

}
});

$("#abajo").click(function(){

if($("#pregunta").val() !=""){
$("tbody").append();
}
});

});
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

I would suggest 2 things? 1.Put a visual to understand what do you want 2.Never Name selectors or variables on gibberish based :)

From what I'v understood that you need to delete rows based on checkbox marked, Right? If so.. its quit simple I made this codepen for you:

EDIT1: http://codepen.io/Mohamedamin/pen/vLJQEE

$('#down').on('click', function(){
  var question = $('#pregunta').val()
  $('.stuff').append(makeRow(question));
});
$('#up').on('click', function(){
  var question = $('#pregunta').val()
  $('.stuff').prepend(makeRow(question));
});

$('#save').on('click',function(){
   var checked = $('input:checked').closest('tr')
   console.log(checked)
});
function makeRow(question){
  var row = '<tr>' +
         '<td>' + question +'</td>' +
         '<td><input type="checkbox"/></td> ' +
         '</tr>'
  return row;
};

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

1.4m articles

1.4m replys

5 comments

57.0k users

...