在jQuery

Question

我有这个代码，有效：

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

}

});

这会在按下的行下方的表格中创建一个新行并填充它。这完美无缺。

我希望能够对密钥执行相同的操作，所以我尝试了这个：

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

如果已经存在，则删除tr，如果按下则向上打开一行，如果按下则向下打开一行，如果按下则向下打开。

但是没有任何事情发生。

我已经使用console.log检查了document_id的值，它可以很好地获取ID。

任何帮助都将不胜感激。

HTML看起来像这样：

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

任何帮助？

Answer 1

你获得下一个或上一个 tr 的方式是错误的。此外，当你得到这样一行时，你需要决定是否添加新行 before 或 after document_id

为了动态创建新元素，jQuery为您提供structured way：

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

正如您所看到的，调用 .after（）之类的jQuery方法的另一种方法可以是：

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

摘录：

＆＃13;

＆＃13;

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

＆＃13;

table {
    border: 1px solid black;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;