个人中心
gpt4 book ai didi

html - 表 td 的可编辑弹出文本区域

转载 作者：行者123 更新时间：2023-12-04 08:59:44 26 4
gpt4 key购买 nike

我在第 3 列的每一行的 td 单元格中有一个 textarea，用于保存特定于每一行的描述。
当用户点击 td 时，td 内 textarea 中的当前描述应复制到 #div_toggle 内的 textarea
这就是我想要完成的。
用户将对#div_toggle 中的描述进行更改，完成后，将单击“X”关闭 div。这应该会导致内容从 #div_toggle 中的 textarea 传输到 td cell textarea。
你能帮我实现这个目标吗？还是我把这复杂化了？有没有更好的方法？
下面是我到目前为止的代码，但它不能按预期或如上所述的那样工作。请帮忙。
此致。

<!DOCTYPE html>
<html>
<head>

    <style>
        th,
        td {
            border: solid 1px lightgrey;
        }

        #div_toggle {
            display: none;
            border: 1px solid black;
            margin: 10px;
        }

        #div_toggle textarea {
            width: 200px;
            height: 150px;
            border: 3px solid #cccccc;
            padding: 5px;
            font-family: Tahoma, sans-serif;
        }

        #close_text {
            position: absolute;
            right: 27px;
            cursor: pointer;
            padding: 5px;
            background: #cfd0d1;
            border-radius: 4px;
        }

    </style>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">

    <script>

        $(document).ready(function() {

            //Show textarea
            $('.cell_id').click(function() {
                $('#div_toggle').slideToggle('slow');
            });

            //Close textarea
            $('#close_text').click(function() {
                var tbl = $('#itemtable');
                var rows = $('tr', tbl);
                //get toggle div text area contents into td cell textarea
                rows.eq(clickedrowindex).find('td:nth-child(3)').text() = $('#div_toggle textarea#notescopy').val();                
                $('#div_toggle').slideToggle('slow');
            });

            var clickedrowindex;
            $('#itemtable').find('tr').click( function(){
                clickedrowindex = $(this).closest('tr').index();
                //get td cell textarea contents into the toggle div text area
                var notestext = $(this).find('td:nth-child(3)').text();
                $('#div_toggle textarea#notescopy').val(notestext);
            });

        });

    </script>
</head>

    <body>
        <div class="left" style="margin-top:5px; border: solid #666 1px;">
            <table id="itemtable" class="" style="width: 300px; margin: 10px;">
                <thead style="color:black;">
                <tr>
                    <th>Year</th>
                    <th>Model</th>
                    <th>Description</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td> 2013</td>
                    <td> Toyota</td>
                    <td class='cell_id'><textarea name='reqnotes'></textarea></td>
                </tr>
                <tr>   
                    <td> 2001</td>
                    <td> Honda</td>
                    <td class='cell_id'><textarea name='reqnotes'></textarea></td>                
                </tr>
                </tbody>
            </table>
    
            <div id="div_toggle"><textarea id='notescopy'></textarea>
                <span id="close_text" title="Click to close">X</span>
            </div>
        </div>
    </body>
  
</html>

最佳答案

你不需要那么多 code它可以简化为two功能以达到您想要的效果。
首先，我们只需要确保我们保存我们当前的 target (td > textarea) 在 variable并使用该 variable分配 val到 textarea因此。
此外，我们需要使用 class .div_toggle选择器不是 ID #div_toggle - 由于 id 只会选择首先找到的元素，但在我们的例子中，我们需要动态更改每个 slideDown 上的值和 SlideUp事件。
最后，为此您需要使用 slideDown和 slideUp在 X按钮单击。其工作方式与 slideToggle 相同.使用 slideToggle将创建一个 奇怪 行为。
当您单击 X 时您在切换 div textarea 中输入的内容将传输到 td你clicked作为您的 target 现场工作演示:

$(document).ready(function() {

  let currentTar; //save current target
  let divToggle = $('.div_toggle') //get element

  //Show textarea
  $('.cell_id').click(function(event) {
    currentTar = event.currentTarget
    divToggle.slideDown('slow');
    let getText = $(this).find('textarea').val()
    divToggle.find('textarea').val(getText)

  });

  //Close textarea
  $('#close_text').click(function() {
    divToggle.slideUp('slow');
    let assignVal = divToggle.find('textarea').val();
    $(currentTar).find('textarea').val(assignVal)
  });
});
th,
td {
  border: solid 1px lightgrey;
}

.div_toggle {
  display: none;
  border: 1px solid black;
  margin: 10px;
}

.div_toggle textarea {
  width: 200px;
  height: 150px;
  border: 3px solid #cccccc;
  padding: 5px;
  font-family: Tahoma, sans-serif;
}

#close_text {
  position: absolute;
  right: 27px;
  cursor: pointer;
  padding: 5px;
  background: #cfd0d1;
  border-radius: 4px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="left" style="margin-top:5px; border: solid #666 1px;">
    <table id="itemtable" class="" style="width: 300px; margin: 10px;">
      <thead style="color:black;">
        <tr>
          <th>Year</th>
          <th>Model</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td> 2013</td>
          <td> Toyota</td>
          <td class='cell_id'><textarea name='reqnotes'>Test</textarea></td>
        </tr>
        <tr>
          <td> 2001</td>
          <td> Honda</td>
          <td class='cell_id'><textarea name='reqnotes'>Foo</textarea></td>
        </tr>
     <tr>
      <td> 2040</td>
      <td> Elon Musk</td>
      <td class='cell_id'><textarea name='reqnotes'>Tesla</textarea> 
 </td>
    </tr>
      </tbody>
    </table>

    <div class="div_toggle"><textarea id='notescopy'></textarea>
      <span id="close_text" title="Click to close">X</span>
    </div>
  </div>
</body>

关于html - 表 td 的可编辑弹出文本区域，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/63623767/

26 4 0
文章推荐： 多个组的可 react 聚合函数
文章推荐： android - 等待设备 : Could not start AVD, 虚拟化打开时出错
文章推荐： java - 使用 Map 数据类型在 Java 中反序列化复杂的 Json
文章推荐： javascript - Nodemailer OAuth2 2LO 在 Heroku 部署中失败
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com