将表格转换为html5时，编辑按钮停止工作 [英] When converting table to html5, edit button stopped working

问题描述

我正在尝试将我的表格转换为html5。在我尝试转换它之前，我的按钮可以使行可编辑，工作正常。现在编辑按钮闪烁为保存，表格不会保持满足感。我正在改变格式，所以我可以准备用php做表格/表数据的帖子，比如底部的链接。



这是函数通过按下按钮做出了令人满意的变化：

I'm trying to convert my table to html5. Before I tried converting it, my button that would make the row editable, worked fine. Now the edit button flashes to "save", and the table doesn't stay contenteditable. I'm changing the format so I can prepare to do a post of the form/table data with php like the link at the bottom.

This is the function that does the contenteditable change with the button press:

<script type="text/javascript">
        //Used to make row editable or not
        $(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');
          if ($(this).html() === 'Save')
          {
 
          }
 
      });

  });
    </script>

在正文中，这是表格代码：

In the body, this is the table code:

 <h1> Visual Evaluation Entry Table </h1&>

     <form >
        <table id="bigTable" border="1">


    	<tr>
            
            <th id="edit" class="col3">Edit/Save</th><th id="bandY" class="col3">Bands @263mm Y</th><th id="bandM" class="col3">Bands @263mm M</th><th id="bandC" class="col3">Bands @263mm C</th><th id="bandK" class="col3">Bands @263mm K</th><th id="Comments" class="col3">Comments</th></tr>
    
  
        <tr>
            <td><button class="editbtn" type="button">Edit</button></td>  
            <td name="bandY" contenteditable="false"></td><!-- //Row 0 Column 1-->
            <td name="bandM" contenteditable="false"></td><!--//Row 0 Column 2-->
            <td name="bandC" contenteditable="false"></td><!--//Row 0 Column 3-->
            <td name="bandK" contenteditable="false"></td><!--//Row 0 Column 4-->
            <td name="comment" contenteditable="false"></td><!--//Row 0 Column 4-->
        </tr>
   
 
</table>
     <form>

之前，表格看起来像这样，编辑按钮工作正常：

Previously, the table looked like this and the edit button worked fine:

<div class="form">
        <p>
            <h1> Visual Evaluation Entry Table </h1>
        </p>
    </div>
<table id="bigTable" border="1">
    <thead>
    	<tr>
            <th id="edit" class="col3">Edit/Save</th><th id="bandY" class="col3">Bands @263mm Y</th><th id="bandM" class="col3">Bands @263mm M</th><th id="bandC" class="col3">Bands @263mm C</th><th id="bandK" class="col3">Bands @263mm K</th><th id="Comments" class="col3">Comments</th></tr>
    </thead>
    <tbody>
        <tr>
            <td><button class="editbtn" type=button">Edit</td>;  
            <td name="bandY" contenteditable="false"></td> <!-- //Row 0 Column 1-->
            <td name="bandM" contenteditable="false"></td>  <!--//Row 0 Column 2-->
            <td name="bandC" contenteditable="false"></td>  <!--//Row 0 Column 3-->
            <td name="bandK" contenteditable="false"></td>  <!--//Row 0 Column 4-->
            <td name="comment" contenteditable="false"></td>  <!--//Row 0 Column 4-->
        </tr>
    </tbody>
 
</table>

我想用html5和php下面的帖子示例：



http://tangledindesign.com/how-to-create-a-contact- form-using-html5-css3-and-php /＃comment-1428428110 [ ^ ]



所以我的问题是，为什么编辑按钮停止工作，我需要做些什么来修复它？

I want to use the post example below with html5 and php:

http://tangledindesign.com/how-to-create-a-contact-form-using-html5-css3-and-php/#comment-1428428110[^]

So my question is, why did the edit button stop working and what do I need to do to fix it?

推荐答案

（ document ）。ready（ function （）{

(document).ready(function () {

（' 。editbtn'）。点击（ function （）{
var currentTD =

('.editbtn').click(function () { var currentTD =

（ this ）。parents（' tr'）。find（ ' td'）;
if （

(this).parents('tr').find('td'); if (

这篇关于将表格转换为html5时，编辑按钮停止工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！