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

Posted 2023-02-16

技术标签:

【中文标题】如何在表格中上下移动行并使用javascript在新div中显示行内容【英文标题】：How to move up and down rows in a table and show the row content in a new div with javascript 【发布时间】：2017-09-15 22:19:04 【问题描述】：

我有一个表格供用户编辑和查看。我想在 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 中显示任何新的行内容，当我控制台记录它时，它会显示表中的所有行。

【问题讨论】：

显示行数据是什么意思？当你有一张桌子时，所有的信息都会显示出来，除非你有一个隐藏的对象来保存信息。我觉得一般来说，您需要通过一些显示可见性的类等来更多地清除这个概念。您在行上具有与容器上相同的类...并且不能将<tr> 附加到<div> 这是无效的html 用户一次只能编辑一行。这就是我在新 div 中显示行内容的原因。这样他们就可以更改内容，然后保存新数据。 @charlietfl 我明白你的意思。我更改了 div 的 id，所以没有问题整个逻辑使用closest 是错误的。建议您只需添加一个课程selected 并从那里开始工作 【参考方案1】：

var row = $(".rowToEdit");

这意味着你的所有行（因为它们都有这个类）。

...及以后：

var rowUp = row.closest('tr').prev('tr'); // and
var rowDown = row.closest('tr').next('tr');

如果您查看.prev() 和.next()，它们会返回集合中每个元素的下一个或上一个兄弟。这意味着rowUp 将保存除最后一行之外的所有行，rowDown 将保存除第一行之外的所有行。

您可能想从选择开始

var row = $(".rowToEdit").eq(0)

或$(".rowToEdit").first()。在此之后，您的脚本将开始按预期工作。

我猜这就是你要找的东西？

var ftt = 
  rTE : $(".rowToEdit").eq(0),
  eRTE : $("#editableRowToEdit"),
  aU : $('#arrowUp'), 
  aD : $("#arrowDown"),
  place : function(row) 
    ftt.eRTE.empty();
    ftt.eRTE.append(row.clone())
  


ftt.place(ftt.rTE);

ftt.aU.on("click", function() 
  var prev = ftt.rTE.prev();
  ftt.rTE = prev.is('tr') ? prev : ftt.rTE;
  ftt.place(ftt.rTE);
);

ftt.aD.on("click", function() 
  var next = ftt.rTE.next();
  ftt.rTE = next.is('tr') ? next : ftt.rTE;
  ftt.place(ftt.rTE);
);

#editableRowToEdit 
  border: 1px solid red;
  display: inline-table;
  margin-right: 100px;

.arrowIcons 
  height: 50px;
  width: 50px;
  border: 1px solid red;
  display: inline-block;

#arrowIconsDiv 
  display: inline-block;

#rowEditDiv 
  max-width: 800px;
  display: flex;
  align-items: center;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="rowEditDiv">
  <div id="arrowIconsDiv">
    <span class="arrowIcons" id="arrowUp"></span>
    <span class="arrowIcons" id="arrowDown"></span>
  </div>
  <div id='editableRowToEdit'></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>

【讨论】：

当我单击移动行时，div 中没有显示任何内容。当我控制台记录单击时的响应时，它是这样的：[prevObject: n.fn.init(1), context: document] 不确定它实际上是在拾取下一行或上一行内容。根据您的描述，您的页面中似乎没有带有id="editableRowToEdit" 的元素。控制台有错误吗？为什么现在要声明一个变量，而所有其他变量都在一个变量中？我有点完美主义，我不喜欢它用太多变量污染全局空间的事实，所以我冒昧地将它们放在一个对象中。 ftt（来自 FileTextTable）。【参考方案2】：

 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>

【讨论】：

检查上面的代码，它现在工作正常。如有任何问题，请回复我为什么不直接记住/更改行，就像在原始脚本中一样？我的意思是，至少那里的架构是好的。 OP 所需要的只是一些清理工作。您在每次点击时检查/克隆所有 <td>s。为什么？效率极低。

以上是关于如何在表格中上下移动行并使用javascript在新div中显示行内容的主要内容，如果未能解决你的问题，请参考以下文章

InputAccessoryView 使用键盘交互显示/隐藏上下移动表格视图

如何使背景图像跨越每个表格行并使用 HTML 和/或 CSS 动态调整大小？

js表格行上下移动

前端页面添加表格，实现每一行能上下移动，还可修改数据库排序字段值

选择表格行并通过ajax添加行时如何更改表格行的颜色

html表格中按啥键移动到上一个单元格