Question

我在$ scheduletext中存储表的html。我希望能够在单击时编辑表格的任何单元格，因此我使用JQuery进行单击操作。当我点击一个单元格时它会变成空白但不允许我输入它，我需要更改哪些才能输入？

<html>
    <body>         
        <div id="main">
            <?php 
                print_r($scheduletext);
            ?> 
        </div>
        <script type="text/javascript">
            $('td').click(function(){
                $(this).html("<contenteditable>");
            });
        </script>
    </body>
</html>

为了编辑和测试的目的，既然要运行我的代码，你也需要表格，CSS也不会伤害......我把它丢给了JSfiddle，希望能让任何试图帮我的人更容易：{{3 }} 在此先感谢!!

编辑：由于某些原因，JSfiddle在点击时根本不做任何事情，但在我网站上的实时模型中，单击时单元格变为空白，但无法输入任何内容。

Answer 1

在调用id()时，您正在修改.html("<contenteditable>")元素的内部HTML以包含td元素（无效）。你真正想要做的是设置<contenteditable>属性：

contenteditable

Answer 2

@Email是一个属性。

试试这个：

contentEditable

Answer 3

内容可编辑是属性，而不是元素。您希望将属性contenteditable添加到要包含可修改内容的元素中。

$('td').click(function(){
    $(this).attr("contenteditable");
});

Answer 4

https://jsfiddle.net/4yczepsj/1/

TID: [-1234] [] [2016-10-24 13:08:17,471]  WARN {org.apache.synapse.FaultHandler} -  ERROR_CODE : 0 {org.apache.synapse.FaultHandler}
TID: [-1234] [] [2016-10-24 13:08:17,471]  WARN {org.apache.synapse.FaultHandler} -  ERROR_MESSAGE : Cache-Control:private,Content-Length:58,Content-Type:text/html,Date:Mon, 24 Oct 2016 18:09:37 GMT,WWW-Authenticate:BASIC Realm=hostname,X-Frame-Options:SAMEORIGIN,<?xml version='1.0' encoding='utf-8'?><soapenv:Envelope xmlns:soapenv="http://www.w3.org/2003/05/soap-envelope"><soapenv:Body/></soapenv:Envelope> Unexpected error sending message back {org.apache.synapse.FaultHandler}
TID: [-1234] [] [2016-10-24 13:08:17,471]  WARN {org.apache.synapse.FaultHandler} -  ERROR_DETAIL : org.apache.synapse.SynapseException: Cache-Control:private,Content-Length:58,Content-Type:text/html,Date:Mon, 24 Oct 2016 18:09:37 GMT,WWW-Authenticate:BASIC Realm=hostname,X-Frame-Options:SAMEORIGIN,<?xml version='1.0' encoding='utf-8'?><soapenv:Envelope xmlns:soapenv="http://www.w3.org/2003/05/soap-envelope"><soapenv:Body/></soapenv:Envelope> Unexpected error sending message back
at org.apache.synapse.core.axis2.Axis2Sender.handleException(Axis2Sender.java:257)
at org.apache.synapse.core.axis2.Axis2Sender.sendBack(Axis2Sender.java:225)
at org.apache.synapse.core.axis2.Axis2SynapseEnvironment.send(Axis2SynapseEnvironment.java:531)
at org.apache.synapse.mediators.builtin.SendMediator.mediate(SendMediator.java:118)
at org.apache.synapse.mediators.AbstractListMediator.mediate(AbstractListMediator.java:97)
at org.apache.synapse.mediators.AbstractListMediator.mediate(AbstractListMediator.java:59)
at org.apache.synapse.mediators.base.SequenceMediator.mediate(SequenceMediator.java:158)
at org.apache.synapse.core.axis2.Axis2SynapseEnvironment.injectMessage(Axis2SynapseEnvironment.java:337)
at org.apache.synapse.core.axis2.SynapseCallbackReceiver.handleMessage(SynapseCallbackReceiver.java:554)
at org.apache.synapse.core.axis2.SynapseCallbackReceiver.receive(SynapseCallbackReceiver.java:188)
at org.apache.axis2.engine.AxisEngine.receive(AxisEngine.java:180)
at org.apache.synapse.transport.passthru.ClientWorker.run(ClientWorker.java:261)
at org.apache.axis2.transport.base.threads.NativeWorkerPool$1.run(NativeWorkerPool.java:172)
at java.util.concurrent.ThreadPoolExecutor.runWorker(Unknown Source)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(Unknown Source)
at java.lang.Thread.run(Unknown Source)
Caused by: org.apache.axis2.AxisFault: Transport out has not been set
at org.apache.axis2.engine.AxisEngine.send(AxisEngine.java:432)
at org.apache.synapse.core.axis2.Axis2Sender.sendBack(Axis2Sender.java:222)
... 14 more
{org.apache.synapse.FaultHandler}

Answer 5

注意这包括其他答案所包含的信息，这些信息归功于他们，但我会添加更多信息并将其全部放在一个地方。

我做了以下更改：

添加了tabindex，因此表格单元格可以显示。
点击时将焦点放在表格单元格上。
在焦点上添加contenteditable属性。
选择焦点上的表格单元格的内容。
删除contenteditable上的blur（当td失去焦点时）。

function setSelection(element) {
  // code for selection from http://stackoverflow.com/questions/3805852/select-all-text-in-contenteditable-div-when-it-focus-click#answer-3806004
  setTimeout(function() {
    var sel, range;
        if (window.getSelection && document.createRange) {
            range = document.createRange();
            range.selectNodeContents(element);
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(range);
        } else if (document.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(element);
            range.select();
        }
  }, 0)
}

// add tabindex to all tds.
$('td').attr('tabindex', 0);

$('td').on('focus', function() {
  $(this).attr('contenteditable', true);
  setSelection(this);
}).on('blur', function() {
  $(this).attr('contenteditable', false);
})

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
  font-size: 90%;
}
th,
td {
  padding: 8px;
}
td {
  text-align: center;
}
table {
  margin: 0 auto;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div id="main">
  <table>
    <tr>
      <th></th>
      <th>22oz Dark</th>
      <th>12ct 4oz Dark</th>
    </tr>
    <tr>
      <th>2016-01-01</th>
      <td>9785</td>
      <td>2478</td>
    </tr>
    <tr>
      <th>2016-01-02</th>
      <td>8754</td>
      <td>2136</td>
    </tr>
    <tr>
      <th>2016-01-03</th>
      <td>13587</td>
      <td>2203</td>
    </tr>
    <tr>
      <th>2016-01-04</th>
      <td>14111</td>
      <td>3297</td>
    </tr>
    <tr>
      <th>2016-01-05</th>
      <td>13212</td>
      <td>3101</td>
    </tr>
    <tr>
      <th>2016-01-06</th>
      <td>16335</td>
      <td>3299</td>
    </tr>
    <tr>
      <th>2016-01-07</th>
      <td>15421</td>
      <td>3100</td>
    </tr>
  </table>
</div>
</body>

</html>

将ContentEditable插入HTML表格

5 个答案: