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

Question

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 1

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>