Question

我在网页上有一个表格，其中n个表格行采用以下格式：

    <table>
     <tr>
      <td align="left"></td>
      <td align="left"></td>
      <td align="left"></td>
      <td align="left"></td>
      <td align="left"></td>
      <td align="left">Example</td>
      <td align="left"></td>
      <td align="left"></td>
      <td align="center" id="dropdownTableData">
        <select id = "select" onchange="setColor(this)">
          <option value="green">pass</option>
          <option value="red">fail</option>
          <option value="blue" selected="selected">none</option>
        </select></td>
     </tr>
    </table>

我试图使表的行为如下：

单击单元格时，它允许用户编辑其内容
仅当（！id.equals“ dropDownTableData”））
表格在编辑时将保留其相对格式
如果更改了单元格的内容，则该单元格将突出显示为黄色
如果单元格的内容未更改，则颜色不会更改
如果单元格被编辑，则它将在html中具有一些标识符，这是一个已编辑的单元格（用于稍后处理网页的目的）。
在编辑时，如果用户按下返回键，则该单元格的编辑将结束（如果从原始位置更改，它将以黄色突出显示）。
在编辑过程中，如果用户单击“ Shift + Return”，则单元格将转到新行（
/“ \ n”）。

到目前为止，我已经提出了以下大多数建议：

    $(function () {

      $("td").click(function (event){
        var tdObj = $(this);
        if(tdObj.attr("id") != "dropdownTableData"){

            var originalText = tdObj.text();
            var inputObj =$("<input type='text'/>");
            tdObj.html("");

            inputObj.width(tdObj.width())
            inputObj.height(tdObj.height())
            inputObj.val(originalText)
            inputObj.appendTo(tdObj)
            inputObj.trigger("focus")
            inputObj.trigger("select")
            inputObj.keyup(function(event){

                var typedText = $(this).val();

                switch(event.which){ 
                    case 13:

                        if(typedText === originalText){
                            tdObj.html(originalText);
                            tdObj.css({background: tdObj.style.background- 
                            color});

                        } else { 
                            tdObj.html(typedText);
                            tdObj.css({background: "#FEFA09"}); 
                        }
                        break; 

                    default: 
                        break;  
                }

            });

            inputObj.click(function(){
                return false;
            });
        }
      });
    });

这大致实现了我正在寻找的行为，但是我的代码存在以下问题：

单击文本进行编辑时，将其格式化为单行，如下图所示，这使用户难以读取他们在单元格其余内容的上下文中所做的更改。 / p>

“ Shift + return”应该延续到新的一行，但是当前我不确定如何实现。

请有人指出我在概念上也对m方法（在JavaScript中是新手）出错的地方。

JavaScript-表格点击侦听器，使点击时可编辑单元格

0 个答案: