Javascript 点击行编辑按钮时使行可编辑_Javascript_Jquery_Html

Javascript 点击行编辑按钮时使行可编辑

javascript jquery html

Javascript 点击行编辑按钮时使行可编辑,javascript,jquery,html,Javascript,Jquery,Html,我不熟悉jQuery和JavaScript。我试图在我的表格中点击我的编辑按钮，并使整行可编辑。由于某种原因，它不起作用。我认为它只是查看编辑按钮所在的单元格，但我不确定如何使它将整行更改为可编辑（编辑按钮字段除外）。我尝试将contenteditable从td标记级别移动到tr标记级别，但没有解决这个问题。我只是举个例子，但我觉得我缺少了一些东西。下面是我的代码的样子： <head> <title></title> <script ty

我不熟悉jQuery和JavaScript。我试图在我的表格中点击我的编辑按钮，并使整行可编辑。由于某种原因，它不起作用。我认为它只是查看编辑按钮所在的单元格，但我不确定如何使它将整行更改为可编辑（编辑按钮字段除外）。我尝试将contenteditable从td标记级别移动到tr标记级别，但没有解决这个问题。我只是举个例子，但我觉得我缺少了一些东西。下面是我的代码的样子：

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


$（文档）.ready（函数（）{
$（'#btnHide'）。单击（函数（）{
//$（'td:nth child（2）'）.hide（）；
//如果您的表有标题（th），请使用此
$（'td:nth child（3），th:nth child（3）'）.hide（）；
});
});
$（文档）.ready（函数（）{
$（'.editbtn'）。单击（函数（）{
$（this.html（$（this.html（）=='Edit'？'Save'：'Edit'）；
if（'td[contentediate=true]'））{
“td[contenteditable=false]”）；
}
else if（'td[contentediate=false]'））{
“td[contentediate=true]”）；
}
//否则不可编辑行
})；//移动了这个
});
收割台1收割台2收割台3收割台4
第0行第0列//在实验后更改为false
编辑
第0行第1列
第0行第2列
第1行第0列
编辑
第1行第1列
第1行第2列

单击按钮时的代码太复杂。我通过使它更容易理解而减少了它

  $(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）然后像往常一样迭代每个

td

s并更改其contenteditable
属性，如下所示

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

试试这个：

$('.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);
    }
});

试试这个。我现在就创作。我希望这能有所帮助

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')

  });

}))

我不了解if/else if块试图执行的操作。如果单元格设置为可编辑，请将其更改为不可编辑。如果它不可编辑，请将单元格更改为可编辑。但是语法没有任何意义。我尝试在函数中移动}），希望现在效果更好。我注意到我的“保存/编辑”按钮在单击时停止更改。很抱歉。正如我所说，我是JS和JQ新手，所以我可能在某些地方弄错了语法。这是我第一次尝试使用JavaScript。@Michele是的，它使整行可编辑，因为我们正在循环遍历该行中的所有

td

s。非常感谢！！！我很高兴你为代码添加了解释。这是一种有趣的语言。我有很多东西要学。@Michele yup肯定有很多东西要学，我相信JS/jQuery会让你更感兴趣：）谢谢你的代码。。我在找这个。另外，我还想知道如何更新

save

按钮点击？？？@Aishwaryas上的mysql数据库表字段-这是一个很大的/不同的蠕虫。我建议发布一个不同的问题。我的代码是针对SQL数据库的，这将是不同的。我遇到了一个问题，需要使用send将信息发送到一个php程序，然后该程序将使用GET或POST将数据发送到另一个php文件，以便使用php进行处理。我从来没有让表格编辑按钮和GET/POST同时工作过。最后，我们专注于GET/POST，并放弃了第一阶段的table edit按钮。