正文 

当前位置： 首页 > 问答 >

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

     2023-02-16     224

关键词：

【中文标题】如何在表格中上下移动行并使用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 中显示任何新的行内容，当我控制台记录它时，它会显示表中的所有行。

【问题讨论】：

显示行数据是什么意思？当你有一张桌子时，所有的信息都会显示出来，除非你有一个隐藏的对象来保存信息。我觉得一般来说，您需要通过一些显示可见性的类等来更多地清除这个概念。 您在行上具有与容器上相同的类...并且不能将&lt;tr&gt; 附加到&lt;div&gt; 这是无效的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 所需要的只是一些清理工作。您在每次点击时检查/克隆所有 &lt;td&gt;s。为什么？效率极低。

在 JavaScript 中创建表格行的克隆并附加到表格

】在JavaScript中创建表格行的克隆并附加到表格【英文标题】：CreatecloneoftablerowandappendtotableinJavaScript【发布时间】：2010-12-1605:50:56【问题描述】：在JavaScript中，如何将行动态添加到表中？在JavaScript事件中，我想创建一个类似的... 查看详情

如何在jQuery中移动表格行？

】如何在jQuery中移动表格行？【英文标题】：HowtomovetablerowinjQuery?【发布时间】：2010-12-0621:27:22【问题描述】：假设我有带有向上/向下箭头的链接，用于按顺序向上或向下移动表格行。将该行向上或向下移动一个位置的最直接方... 查看详情

如何使用 Javascript/JQuery 在移动浏览器中限制点运算符（'.'）

】如何使用Javascript/JQuery在移动浏览器中限制点运算符（\\\'.\\\'）【英文标题】：Howtorestrictdotoperator(\'.\')inmobilebrowserusingJavascript/JQuery如何使用Javascript/JQuery在移动浏览器中限制点运算符（\'.\'）【发布时间】：2017-02-2212:14:18【问... 查看详情

如何在移动 Safari 中使用 javascript 突出显示文本选择

】如何在移动Safari中使用javascript突出显示文本选择【英文标题】：Howtohighlightatextselectionusingjavascriptinmobilesafari【发布时间】：2013-10-2423:14:37【问题描述】：在iOS4下，我可以使用document.execCommand突出显示文本范围，如here所述。在i... 查看详情

c#如何使用上下键在textbox之间移动

如何在一堆的文本框中利用上下左右键来回移动。我想要的是在WindowsForm里的代码。左右键的功能已经利用SelectNextControl实现了上下键个功能还没实现参考技术A使用多维数组在初始化时使用循环记住每个textbox的id.在上下左右时，... 查看详情

当我使用Javascript单击按钮时，如何在表格中添加新行[重复]

】当我使用Javascript单击按钮时，如何在表格中添加新行[重复]【英文标题】：HowdoIaddanewrowinatablewhenIclickonabuttonusingJavascript[duplicate]【发布时间】：2017-05-0700:26:40【问题描述】：大家好，我的代码有问题。每当我单击添加产品时，... 查看详情

如何在javascript中使用spreadjs导入和导出excel文件(代码片段)

JavaScript在前端领域占据着绝对的统治地位，目前更是从浏览器到服务端，移动端，嵌入式，几乎所有的所有的应用领域都可以使用它。技术圈有一句很经典的话“凡是能用JavaScript实现的东西，最后都会用JavaSc... 查看详情

如何在 MySQL 中使用自动增量字段复制行并插入到同一个表中？

】如何在MySQL中使用自动增量字段复制行并插入到同一个表中？【英文标题】：HowtocopyarowandinsertinsametablewithaautoincrementfieldinMySQL?【发布时间】：2012-02-2716:55:42【问题描述】：在MySQL中，我尝试使用autoincrementcolumnID=1复制一行并将... 查看详情

如何使用 Javascript API 在 OnlyOffice 文档编辑器中格式化表格单元格

】如何使用JavascriptAPI在OnlyOffice文档编辑器中格式化表格单元格【英文标题】：HowtoformattablecellinOnlyOfficeDocumentEditorusingJavascriptAPI【发布时间】：2017-12-0811:43:56【问题描述】：我正在开发OnlyOffice服务器集成以使用自定义插件，该... 查看详情

前端必读：如何在javascript中使用spreadjs导入和导出excel文件(代码片段)

JavaScript在前端领域占据着绝对的统治地位，目前更是从浏览器到服务端，移动端，嵌入式，几乎所有的所有的应用领域都可以使用它。技术圈有一句很经典的话“凡是能用JavaScript实现的东西，最后都会用JavaSc... 查看详情

如何让我的表格在移动视图中按行折叠

】如何让我的表格在移动视图中按行折叠【英文标题】：Howtomakemytablecollapsebyrowinmobileview【发布时间】：2018-01-0410:15:14【问题描述】：我正在尝试将响应式表格添加到我网站中的iframe。该表在桌面上看起来不错，但在移动视图中... 查看详情

如何使用 JavaScript API 在移动设备的地图中禁用两指缩放选项？

】如何使用JavaScriptAPI在移动设备的地图中禁用两指缩放选项？【英文标题】：HowtodisabletwofingerszoomoptioninMapsinmobiledevicesusingJavaScriptAPI?【发布时间】：2017-01-2414:42:47【问题描述】：我的谷歌地图选项就像center:userLatLng,zoom:13,mapTypeId... 查看详情

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

】如何使背景图像跨越每个表格行并使用HTML和/或CSS动态调整大小？【英文标题】：HowdoImakeabackgroundimagespanacrosseachtablerowandbedynamicallyresizablewithHTMLand/orCSS?【发布时间】：2021-03-1906:26:38【问题描述】：我有以下代码，但它使表格在... 查看详情

如何使用 Javascript 在移动 Safari 和所有其他浏览器上录制音频？

】如何使用Javascript在移动Safari和所有其他浏览器上录制音频？【英文标题】：HowtorecordaudioatmobileSafariandallotherbrowserswithJavascript?【发布时间】：2019-05-1908:52:39【问题描述】：我只想在所有浏览器、桌面浏览器以及移动(iOS/Android)浏... 查看详情

你如何在 Javascript 中使用 onPageLoad？

】你如何在Javascript中使用onPageLoad？【英文标题】：HowdoyouuseonPageLoadinJavascript?【发布时间】：2010-10-2717:39:44【问题描述】：我尝试过使用onPageLoad:function()alert("hi");但它不会工作。我需要它作为Firefox扩展。有什么建议吗？【问题... 查看详情

在 Vim 中上下移动整行

...？我翻遍了无穷无尽的指南，但一无所获。如果没有，我如何将操作绑定到该组合键？编辑：Mykola的答案适用于所有行，除了缓冲区开头和结尾的行。将第一行向上或底线向下移 查看详情

如何在 Swift 中围绕其起始值上下移动 SKSpriteNode？

】如何在Swift中围绕其起始值上下移动SKSpriteNode？【英文标题】：HowdoImoveaSKSpriteNodeupanddownarounditsstartingvalueinSwift?【发布时间】：2015-05-1120:31:44【问题描述】：我目前正在开发一款游戏，其中有一个SKSpriteNode。我想要，这个节点... 查看详情

如何在 PHP 发出的表格行中使用 JavaScript 检查所有复选框

】如何在PHP发出的表格行中使用JavaScript检查所有复选框【英文标题】：HowtoCheckAllCheckboxesusingJavaScriptinatablerowemittedbyPHP【发布时间】：2016-02-0311:07:04【问题描述】：我是PHP新手。我想创建一个脚本来检查一行中的所有复选框，但... 查看详情