如何获取< td>的后期值< / td>标签 [英] How to get post values of <td></td> tags
问题描述
我需要将这些td标签的值作为使用jQuery的可编辑表格。我不确定这里的问题与脚本或td标签有关吗？目前我的var_dump（$ _ POST）没有返回任何值。
看下面的代码，td标签大概有10行：
< H2>< U>编辑< / U>< / H2>
< form action =ajax / name.phpname =edit_template_formid =edit_template_formmethod =post>
<？php print< table border = \1 \class = \\editableTable \>
< tr>
< th>模板名称< / th>
< th>模板描述< / th>
< / tr>;
foreach（$ res为$ row）{
$ temp_description = $ row ['template_description'];
回显< tr>;
echo< td id = \edit_name \name = \edit_name \>。 $行[ TEMPLATE_NAME。 < / TD> 中;
echo< td id = \edit_template\name = \edit_template\>。 nl2br（$ temp_description）。 < / TD> 中;
echo< tr />;
}
打印< / table>; ？>
< / form>
< div id =template_edit>< / div>
name.php
的var_dump（$ _ POST）;
if（isset（$ _ POST ['edit_template']））{
$ template_edit = $ db-> escape（$ _ POST ['edit_template']）;
$ user = $ db->转义（$ user）;
$ db-> update（'templates'，array（'template_description'=> $ template_edit），'AND userID =''。$ user。''）;
echo $ _POST ['edit_template'];
$ b if（isset（$ _ POST ['edit_name']））{
$ template_name = $ db-> escape（$ _ POST ['edit_name ]）;
$ user = $ db->转义（$ user）;
$ db-> update（'templates'，array（'template_name'=> $ template_name），'AND userID =''。$ user。''）;
echo $ _POST ['edit_name'];
}
script.js
< pre $
$（function（）{
$（td）。dblclick（function（）{
var OriginalContent = $（this）。 text（）;
$（this）.addClass（cellEditing）;
$（this）.html（< input type ='text'value ='+ OriginalContent （）。）; $ b $（this）.children（）。first（）。focus（）;
$ b $（this）.children（）。first（） .keypress（函数（e）{
if（e.which == 13）{
// POST值
var edit_template = $（'＃edit_template'）.val （）;
var edit_name = $（'＃edit_name'）。val（）;
$ .post（'ajax / name.php'，{edit_name：edit_name，edit_template：edit_template （数据）{
$（'div＃template_edit'）。text（data）;
}）;
var newContent = $（this）.val（ ）;
$（this）.parent（）。text（newContent）;
$（本）.parent（）removeClass（ cellEditing）。
}
}）;
$ b $（this）.children（）。first（）。blur（function（）{
$（this）.parent（）。text（OriginalContent）;
$ （this）.parent（）。removeClass（cellEditing）;
}）;
}）;
}）;
第一个问题：唯一标识符
您的HTML中不能有多个相同的ID - 这是无效的代码，并且会提供不一致和/或
为了解决这个问题，< td> 元素上的id变成了一个类：
echo< td class = \edit_name\name = \edit_name\> 。 $行[ TEMPLATE_NAME。 < / TD> 中;
echo< td class = \edit_template \name = \edit_template \>。 nl2br（$ temp_description）。 < / TD> 中;
第二个问题：未发布任何值
您正在< td> 中创建< input> ，然后抓取< td> 的值，然后将< td> 的内容替换为 < input> 。
这里有三个问题：
-
a
< td>元素没有值 - 您应该使用.text（） code>获取其内容而不是.val（）。 -
乱糟糟的 - 当你抓住
< td>的内容时，它包含一个< input>，但没有文字。 在您的keydown事件处理程序中（
< input> ）不再与DOM有任何关系， this 所以你必须存储一个引用nother元素（例如。 所以在script.js中进行以下更改：
（b）$ b $ $ $ $ $ $ $ $ $ $（$）$（$）$（$） = 13）{
var newContent = $（this）.val（）;
var $ parent = $（this）.parent（）;
$ parent.text（newContent）;
$ parent.removeClass（cellEditing）;
// POST值
var edit_template = $ parent.closest（tr）。 find（。edit_template）。text（）;
var edit_name = $ parent.closest（tr）。find（。edit_name）。text（）;
$ .post（'ajax / name.php'，{edit_name：edit_name，edit_template：edit_template}，function（data）{
$（'＃template_edit'）。text（data）;
}）;
}
}）;
注意我也从选择器中删除了 div 在 $。post 回调 - #id 中，选择器在jQuery中比元素更快#id ，而且id在DOM中应该是唯一的。
I need to post these values of my td tags as this an editable table using jquery. I'm not sure if the issue here is with the script or the td tags? Currently my var_dump($_POST) is returning no values.
See below code, the td tags are about 10 lines down:
<h2><u>Edit</u></h2>
<form action="ajax/name.php" name="edit_template_form" id="edit_template_form" method="post">
<?php print "<table border=\"1\" class=\"editableTable\">
<tr>
<th>Template Name</th>
<th>Template Description</th>
</tr>";
foreach($res as $row){
$temp_description = $row['template_description'];
echo "<tr>";
echo "<td id=\"edit_name\" name=\"edit_name\">". $row['template_name']. "</td>";
echo "<td id=\"edit_template\" name=\"edit_template\">". nl2br($temp_description). "</td>";
echo "<tr/>";
}
print "</table>"; ?>
</form>
<div id="template_edit"></div>
name.php
var_dump($_POST);
if (isset($_POST['edit_template'])) {
$template_edit = $db->escape($_POST['edit_template']);
$user = $db->escape($user);
$db->update('templates', array('template_description' => $template_edit), 'AND userID="'.$user.'"');
echo $_POST['edit_template'];
}
if (isset($_POST['edit_name'])) {
$template_name = $db->escape($_POST['edit_name']);
$user = $db->escape($user);
$db->update('templates', array('template_name' => $template_name), 'AND userID="'.$user.'"');
echo $_POST['edit_name'];
}
script.js
$(function () {
$("td").dblclick(function () {
var OriginalContent = $(this).text();
$(this).addClass("cellEditing");
$(this).html("<input type='text' value='" + OriginalContent + "' />");
$(this).children().first().focus();
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
//POST values
var edit_template = $('#edit_template').val();
var edit_name = $('#edit_name').val();
$.post('ajax/name.php', {edit_name: edit_name, edit_template: edit_template}, function(data) {
$('div#template_edit').text(data);
});
var newContent = $(this).val();
$(this).parent().text(newContent);
$(this).parent().removeClass("cellEditing");
}
});
$(this).children().first().blur(function(){
$(this).parent().text(OriginalContent);
$(this).parent().removeClass("cellEditing");
});
});
});
First issue: unique ids
You cannot have multiples of the same id in your HTML - this is invalid code and will provide inconsistent and/or incorrect results in your code.
To fix this change the id on the <td> elements into a class:
echo "<td class=\"edit_name\" name=\"edit_name\">". $row['template_name']. "</td>";
echo "<td class=\"edit_template\" name=\"edit_template\">". nl2br($temp_description). "</td>";
Second issue: no value being posted
You are creating an <input> in the <td>, then grabbing the <td>'s value, then replacing the content of the <td> with the value of the <input>.
There are three issues here:
a
<td>element doesn't have a value - you should be using.text()to grab its content instead of.val().You are doing this out of order - at the time you grab the content of the
<td>it contains an<input>, but no text.Once you replace the content of the
<td>the element thatthisrefers to in your keydown event handler (the<input>) no longer has any relation to the DOM so you have to store a reference to another element (eg. the parent element) to perform DOM manipulation.
So in script.js make the following changes:
$(this).children().first().keypress(function (e) {
if (e.which == 13) {
var newContent = $(this).val();
var $parent = $(this).parent();
$parent.text(newContent);
$parent.removeClass("cellEditing");
//POST values
var edit_template = $parent.closest("tr").find(".edit_template").text();
var edit_name = $parent.closest("tr").find(".edit_name").text();
$.post('ajax/name.php', {edit_name: edit_name, edit_template: edit_template}, function(data) {
$('#template_edit').text(data);
});
}
});
Note I also removed div from the selector in the $.post callback - #id as a selector is quicker in jQuery than element#id, and ids should be unique within the DOM.
这篇关于如何获取< td>的后期值< / td>标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
