prgrm prgrm - 2 days ago 4
HTML Question

Adding a row in a table after pressing a key in jQuery

I have this code, which works:

var document_id;

$(document).delegate('td', 'click', function (event) {

var stop = this.id == "dontcompress" ? 1 : 0;

var stopcheckbox = event.target.nodeName == "INPUT" ? 1 : 0;

if (stop == 0 && stopcheckbox == 0) {

$('[colspan="9"]').parent('tr').remove();
$(this).parents('tr').after('<tr/>').next().append('<td id="dontcompress" colspan="9"/>').children('td').append('<div/>').css('background', '#fff').children().html($('#content').html());

document_id = this.id;

ajax_get(document_id); //fills the content

}

});


This creates a new row in the table right under the pressed row and fills it. This works flawlessly.

I want to be able to do the same with keys so I tried this:

$(document).keydown(function(e) {
switch(e.which) {

case 38: // up
if(!document_id) {
row_id = $('#box_id').find('tr:first').attr('id');
document_id = row_id.split("_").pop();

}else {
row_id = $('#row_'+document_id ).prev("tr").attr("id");
if(row_id){
document_id = row_id.split("_").pop();
}
}


$("#dontcompress").remove();
$("#row_" + document_id).parents('tr').after('<tr/>').next().append('<td id="dontcompress" colspan="9"/>').children('td').append('<div/>').css('background', '#fff').children().html($('#content').html());


ajax_get(document_id);

break;

case 40: //down

if(!document_id) {
row_id = $('#box_id').find('tr:first').attr('id');
document_id = row_id.split("_").pop();

}else {

row_id = $('#row_' + document_id).next("tr").attr("id");
if(row_id) {
document_id = row_id.split("_").pop();
}
}

$("#dontcompress").remove();
$("#row_" + document_id).parents('tr').after('<tr/>').next().append('<td id="dontcompress" colspan="9"/>').children('td').append('<div/>').css('background', '#fff').children().html($('#content').html());


ajax_get(document_id);

break;

default: return; // exit this handler for other keys
}
e.preventDefault(); // prevent the default action (scroll / move caret)
});


The point would be to remove the tr if it already exists, and open it a row up if up is pressed, or a row down if down is pressed.

Nothing happens, though.

I have checked the value of document_id with
console.log
and it gets the ids well.

Any help would be appreciated.

The HTML looks something like this:

<tbody id="box_id">
@foreach($documents as $document)
<tr id="row_{{$document->id}}">
<td id="{{$document->id}}">{{$document->something}}</td>
<td id="{{$document->id}}">{{$document->samthinels}}</td>
</tr>
@endforeach
</tbody>


Any help?

Answer

The way you get the next or prev tr is wrong. Moreover, when you get such a row you need to decide if you add the new row before or after document_id

In order to create a new element on the fly jQuery offer you a structured way:

$("#row_" + document_id)[op]($('<tr/>')
   .append($('<td/>', {colspan: "9"}))
   .append($('<td/>')
       .append($('<div/>', {'background': '#fff', text: $('#content').html()}))));

As you can see, a different way to call a jQuery method like .after() can be:

ele['after'](parameter....)

The snippet:

var document_id;

function ajax_get(docId) {

}

$(document).on('keydown', function (e) {
    switch (e.which) {
        case 38: // up
            var op = "after";
            if (!document_id) {
                row_id = $('#box_id').find('tr:first').attr('id');
                document_id = row_id.split("_").pop();
                op = "before";
            } else {
                row_id = $('#row_' + document_id).prev("tr").attr("id");
                if (row_id === undefined) {
                    row_id = $('#row_' + document_id).attr("id");
                    op = "before";
                } else {
                    document_id = row_id.split("_").pop();
                }
            }
            $("#dontcompress").remove();
            $("#row_" + document_id)[op]($('<tr/>').append($('<td/>', {colspan: "9"}))
                    .append($('<td/>').append($('<div/>', {'background': '#fff', text: $('#content').html()}))));
            ajax_get(document_id);
            break;
        case 40: //down
            var op = "before";
            if (!document_id) {
                row_id = $('#box_id').find('tr:first').attr('id');
                document_id = row_id.split("_").pop();
                op = "after";
            } else {
                row_id = $('#row_' + document_id).next("tr").attr("id");
                if (row_id === undefined) {
                    row_id = $('#row_' + document_id).attr("id");
                    op = "after";
                } else {
                    document_id = row_id.split("_").pop();
                }
            }
            $("#dontcompress").remove();
            $("#row_" + document_id)[op]($('<tr/>')
                    .append($('<td/>', {colspan: "9"}))
                    .append($('<td/>')
                            .append($('<div/>', {'background': '#fff', text: $('#content').html()}))));
            ajax_get(document_id);
            break;
        default:
            return; // exit this handler for other keys
    }
    e.preventDefault(); // prevent the default action (scroll / move caret)
});
table {
    border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="content" contenteditable="true">SAMPLE CONTENT</div><br/>
<table>
    <tbody id="box_id">
    <tr id="row_1">
        <td>something1</td>
        <td>samthinels1</td>
    </tr>
    <tr id="row_2">
        <td>something2</td>
        <td>samthinels2</td>
    </tr>
    </tbody>
</table>