点击行编辑按钮时使行可编辑答案

【问题标题】：Making row editable when hit row edit button点击行编辑按钮时使行可编辑
【发布时间】：2014-06-27 15:43:11
【问题描述】：

我是 jQuery 和 JavaScript 的新手。我正在尝试单击表格中的“编辑”按钮并使整行可编辑。由于某种原因，它不起作用。我认为它只是查看编辑按钮所在的单元格，但我不确定如何将整行更改为可编辑（编辑按钮字段除外）。我尝试将 contenteditable 从 td 标记级别移动到 tr 标记级别，但它没有修复它。我以this link 为例，但我认为我缺少一些东西。这是我的代码的样子：

<head>
    <title></title>
    <script type="text/javascript" src="js/jquery-1.11.0.js"></script>
    <script type="text/javascript">
        $(document).ready(function() {
            $('#btnHide').click(function() {
                //$('td:nth-child(2)').hide();
                // if your table has header(th), use this
                $('td:nth-child(3),th:nth-child(3)').hide();
            });
        });
    </script>
    <script type="text/javascript">
        $(document).ready(function(){
            $('.editbtn').click(function(){
            $(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit');

            if('td[contenteditable=true]')) {
                    'td[contenteditable=false]');
            }
            else if('td[contenteditable=false]')){
                    'td[contenteditable=true]');
            }
            //else not editable row
           }); //moved this
        });
    </script>

</head>
<body>
  <table id="tableone" border="1">
    <thead>
        <tr><th class="col1">Header 1</th><th class="col2">Header 2</th><th class="col3">Header 3</th><th class="col3">Header 4</th></tr>
    </thead>
    <tr class="del">
        <td contenteditable="false">Row 0 Column 0</td> //changed to false after experiment
        <td><button class="editbtn">Edit</button></td>
        <td contenteditable="false">Row 0 Column 1</td>
        <td contenteditable="false">Row 0 Column 2</td>
    </tr>
    <tr class="del">
        <td contenteditable="false">Row 1 Column 0</td>
        <td><button class="editbtn">Edit</button></td>
        <td contenteditable="false">Row 1 Column 1</td>
        <td contenteditable="false">Row 1 Column 2</td>
    </tr>
  </table>
    <input id="btnHide" type="button" value="Hide Column 2"/>

</body>

【问题讨论】：

我不遵循你的 if/else if 块试图做什么。
如果单元格设置为可编辑，则将其更改为不可编辑。如果它不可编辑，请将单元格更改为可编辑。
但是语法没有意义。
好吧，我尝试在函数中移动 })，希望现在更好。我注意到我的保存/编辑按钮在单击时停止更改。对于那个很抱歉。就像我说的，我是 JS 和 JQ 的新手，所以我可能在某个地方弄错了语法。这是我第一次尝试 JavaScript。

标签： javascript jquery html

【解决方案1】：

你的按钮点击代码太复杂了。我通过使它更容易理解来减少它。

  $(document).ready(function () {
      $('.editbtn').click(function () {
          var currentTD = $(this).parents('tr').find('td');
          if ($(this).html() == 'Edit') {                  
              $.each(currentTD, function () {
                  $(this).prop('contenteditable', true)
              });
          } else {
             $.each(currentTD, function () {
                  $(this).prop('contenteditable', false)
              });
          }

          $(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')

      });

  });

代码解释：

1) 使用以下代码获取 tr 内的所有 tds

var currentTD = $(this).parents('tr').find('td');

2) 然后像往常一样遍历每个 tds 并更改其 contenteditable 属性，如下所示

$.each(currentTD, function () {
                      $(this).prop('contenteditable', true)
                  });

Updated JSFiddle

【讨论】：

@Michele 是的，它使整行可编辑，因为我们正在循环遍历行中的所有 td 。
非常感谢！！！很高兴您为代码添加了解释。这是一种有趣的语言。我有很多东西要学。
@Michele yup 肯定有很多东西要学，我相信 JS/jQuery 会让你更感兴趣 :)
感谢您的代码。我正在寻找这个。另外我想知道如何更新save按钮点击上的mysql数据库表字段？？
@Aishwaryas - 这是一大堆/不同的蠕虫。我建议发布一个不同的问题。我的代码是用于 SQL 数据库的，这会有所不同。我遇到了需要使用将信息发送到 php 程序的问题，然后该程序将使用 GET 或 POST 将数据发送到另一个 php 文件以使用 php 进行处理。我从来没有让表格编辑按钮和 GET/POST 同时工作。我们最终专注于 GET/POST 并删除了第一阶段的表格编辑按钮。stackoverflow.com/questions/24888330/…

【解决方案2】：

试试这个：

$('.editbtn').click(function() {
    var $this = $(this);
    var tds = $this.closest('tr').find('td').filter(function() {
        return $(this).find('.editbtn').length === 0;
    });
    if ($this.html() === 'Edit') {
        $this.html('Save');
        tds.prop('contenteditable', true);
    } else {
        $this.html('Edit');
        tds.prop('contenteditable', false);
    }
});

jsFiddle

【讨论】：

【解决方案3】：

试试这个。我现在创建。我希望这会有所帮助。

jQuery(document).ready(function() {

  $('#edit').click(function () {

      var currentTD = $(this).closest('tr');

      if ($(this).html() == 'Edit') {                  

         $(currentTD).find('.inputDisabled').prop("disabled",false);   

      } else {

         $(currentTD).find('.inputDisabled').prop("disabled",true);   

      }

      $(this).html($(this).html() == 'Edit' ? 'Save' : 'Edit')

  });

});

https://jsfiddle.net/mkqLdo34/1/

【讨论】：