Question

我在第3列的每一行的td单元格中都有一个textarea，以保存特定于每一行的描述。当用户单击td时，应将td内文本区域中的当前描述复制到#div_toggle

内的文本区域中

这就是我要完成的事情。

用户将对#div_toggle中的说明进行更改，完成后，将单击“ X”关闭div。这应该导致内容从#div_toggle中的textarea传输到td单元格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>

Answer 1

您不需要那么多的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文本区域中键入的内容将被转移到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>

Answer 2

一些小的更改。使用$(this).val()而不是为find做closest：）

您会发现代码也更加简洁。

$(document).ready(function() {

  $("textarea").click(function(){
    var contents = $(this).val();
    $('#notescopy').val(contents);
  });

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

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

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

<!DOCTYPE html>
<html>

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


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

表TD的可编辑弹出文本区域

2 个答案: