php – 表格中的contenteditable：选择单元格

2019年8月6日 173次阅读

我在php中生成一个表.每个单元格都有一个由列名称和行号组成的不同ID.

<tr>
    <td contenteditable="true" id="i-date-1">26/03/2014</td><td id="i-amount-1">200</td>
    <td contenteditable="true" id="i-date-2">26/04/2014</td><td id="i-amount-2">300</td>
</tr>

我想通过jQuery记录sql数据库中的更改.为此,我需要向每个单元格添加一个eventListener,然后调用一个将数据发布到服务器端php脚本的函数,但我对如何做到这一点感到困惑,这是我的尝试不起作用：

$(['id*="i-"']).each(function() {
            $(this).addEventListener("blur", updateFunction, false);
            $(this).spellcheck = 'true';
});

然后是我的更新功能：

function updateFunction()
{
    var lineID = $(this).attr(id);
    var needle = lineID.indexOf("-");
    needle = lineID.indexOf("-", needle);
    needle = needle + 1 ;
    lineID = lineID.substr(needle);
    $.ajax({
        type: "get",
        url: "queries.php?q=update&iID="+lineID,
    });
}

1)我是否正确向所有单元格添加eventListener或更容易？
2)我的updateFunction很糟糕,我知道:)但我没有足够的经验弄清楚如何解决它…如果有人可以帮助？

在此先感谢您的时间.

最佳答案 通过一些更改,它可以很好地工作,就像这样.

$("[id*='i-']").on("blur", updateFunction).prop('spellcheck', true);
function updateFunction()
{
  var lineID = $(this).attr('id');
  var needle = lineID.indexOf("-");
  needle = lineID.indexOf("-", needle);
  needle = needle + 1 ;
  lineID = lineID.substr(needle);
  $.ajax({
    type: "get",
    url: "queries.php?q=update&iID="+lineID,
  });
}

这是一个演示http://jsbin.com/nitewe/edit?js,output

使用data- *属性来存储data-1和date-2等附加信息将更容易,而不是拆分ID

<td contenteditable="true" class="i-date" data-date="date-1">26/03/2014</td><td class="i-amount">200</td>
<td contenteditable="true" class="i-date" data-date="date-2">26/04/2014</td><td class="i-amount">300</td>

有了这样的结构,只需要脚本就可以了

$(".i-date").on("blur", updateFunction).prop('spellcheck', true);
function updateFunction()
{
  var lineID = $(this).data('date');
  var amt = $(this).next('.i-amount');
  $.ajax({
    type: "get",
    url: "queries.php?q=update&iID="+lineID,
  });
}

.next([selector])将通过类.i-amount获得对下一个兄弟的引用.

演示http://jsbin.com/sucozu/edit?html,js,output

点赞