javascript - 如何使用javascript在表格中上下移动行并在新div中显示行内容

Question

我有一个表供用户编辑和查看。我想显示 div 中的行内容，从表中的第一行开始。然后我希望用户能够单击向上或向下箭头并在 div 中显示新行内容。

这是我的 html div，行内容将存放在其中:

            <div id="rowEditDiv">
                <div id="arrowIconsDiv">
                    <img src="images/up-arrow.png" class="arrowIcons" id="arrowUp">
                    <img src="images/down-arrow.png" class="arrowIcons" id="arrowDown">
                </div>
                <div id='editableRowToEdit'></div>
            </div>

这是我的 html 表格:

<table id='fileTextTableId'>
    <tbody>
        <tr class='rowToEdit'>
            <td>1</td>
            <td><pre>Some content will go on row 1</pre></td>
        </tr>
        <tr class='rowToEdit'>
            <td>2</td>
            <td><pre>Some content will go on row 2</pre></td>
        </tr>
        <tr class='rowToEdit'>
            <td>3</td>
            <td><pre>Some content will go on row 3</pre></td>
        </tr>
        <tr class='rowToEdit'>
            <td>4</td>
            <td><pre>Some content will go on row 4</pre></td>
        </tr>
        <tr class='rowToEdit'>
            <td>5</td>
            <td><pre>Some content will go on row 5</pre></td>
        </tr>
        <tr class='rowToEdit'>
            <td>6</td>
            <td><pre>Some content will go on row 6</pre></td>
        </tr>
    </tbody>
</table>

这是我的 JS:

        var table = document.getElementById("fileTextTableId");
        var row = $(".rowToEdit");
        var rowContent = table.rows[0].innerHTML;
        //empty row
        $("#editableRowToEdit").empty();
        //draw arrows, form for specific row, and save btn
        $("#editableRowToEdit").append(row);

        $("#arrowUp").on("click", function() {
            $("#editableRowToEdit").empty();

            var rowUp = row.closest('tr').prev('tr');
            console.log(rowUp);
            $("#editableRowToEdit").append(rowUp);

        });
        $("#arrowDown").on("click", function() {
            $("#editableRowToEdit").empty();

            var rowDown = row.closest('tr').next('tr');
            console.log(rowDown);
            $("#editableRowToEdit").append(rowDown);
        });

我现在的 JS 代码不会在 div 中显示任何新行内容，当我控制台记录它时，它会显示表中的所有行。

Answer 1

 var table = document.getElementById("fileTextTableId");
var row = $(".rowToEdit");
var rowContent = table.rows[0].innerHTML;
//empty row
$("#rowToEdit").empty();
//draw arrows, form for specific row, and save btn
$("#rowToEdit").append(rowContent);

$("#arrowUp").on("click", function() {
	var currentTdNo =  $("#rowToEdit td").html();
	var prevTdNo = parseInt(currentTdNo) - 1;
	$(".rowToEdit").each(function(){
		var interatioNo = $(this).children('td:first').html();
		if ($.trim(interatioNo) == $.trim(prevTdNo)) {
			var tdData = $(this).html();
			$("#rowToEdit").empty();
			$("#rowToEdit").append(tdData);
		}
	});
});
$("#arrowDown").on("click", function() {
	var currentTdNo =  $("#rowToEdit td").html();
	var nextTdNo = parseInt(currentTdNo) + 1;
	$(".rowToEdit").each(function(){
		var interatioNo = $(this).children('td:first').html();
		if ($.trim(interatioNo) == $.trim(nextTdNo)) {
			var tdData = $(this).html();
			$("#rowToEdit").empty();
			$("#rowToEdit").append(tdData);
		}
	});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="rowEditDiv">
	<div id="arrowIconsDiv">
		<img src="images/up-arrow.png" class="arrowIcons" id="arrowUp">
		<img src="images/down-arrow.png" class="arrowIcons" id="arrowDown">
	</div>
	<div id='rowToEdit'></div>
</div>
			
<table id='fileTextTableId'>
    <tbody>
        <tr class='rowToEdit'>
            <td>1</td>
            <td><pre>Some content will go on row 1</pre></td>
        </tr>
        <tr class='rowToEdit'>
            <td>2</td>
            <td><pre>Some content will go on row 2</pre></td>
        </tr>
        <tr class='rowToEdit'>
            <td>3</td>
            <td><pre>Some content will go on row 3</pre></td>
        </tr>
        <tr class='rowToEdit'>
            <td>4</td>
            <td><pre>Some content will go on row 4</pre></td>
        </tr>
        <tr class='rowToEdit'>
            <td>5</td>
            <td><pre>Some content will go on row 5</pre></td>
        </tr>
        <tr class='rowToEdit'>
            <td>6</td>
            <td><pre>Some content will go on row 6</pre></td>
        </tr>
    </tbody>
</table>