Question

我有一个输出HTML表的PHP文件。该表是根据文件夹中的音乐视频列表动态创建的。然后输出带有数据的我的表。

我需要为我在其中键入Javascript函数的td分配Javascript变量。我在window.alert中测试该变量，但它为空。我认为是因为它不能唯一标识我正在忙的记录

如何唯一标识文本？

我已经尝试过：

var y = document.getElementById("about");
var y = document.getElementById("about").value;
var y = document.getElementById("about").innerHTML;
var y = document.getElementById("about").innerText;

它似乎不起作用，这是我的桌子：

$output .= '<div id="videos-div" class="videos">'."\n";
$output .= '  <table class="stats" cellspacing="5">'."\n";
$output .= ' <tr>'."\n";
$output .= '   <th class="hed" colspan="1">VideoName</td>'."\n";
$output .= '   <th class="hed" colspan="1">Date</td>'."\n";
$output .= '   <th class="hed" colspan="1">Description</td>'."\n";
$output .= ' </tr>'."\n";

现在每个音乐视频我：

$output .= '<tr id="actiontable'.$record['video'].'">'."\n";
$output .= ' <td>'.$videoname.'</td>'."\n";
$output .= ' <td>'.$date.' min</td>'."\n";
$output .= ' <td id="about" ><input type="text" 
oninput="myFunction()" 
placeholder="'.$metadata2.'" /></td>'."\n";

我的功能：

$output .= '
<script type="text/javascript">
function myFunction ()
{
var y = document.getElementById("about");
window.alert(y);
}
</script>';

当我对window.alert进行硬编码时，它确实有效

我需要做的是从描述中获取文字，然后将其传递给另一个Javascript function

我没有任何错误，只是一个blank variable。我觉得是这样的因为它不知道我输入的是TD

Answer 1

在两个位置进行更改，将id应用于输入类型，并在获得ID后第二次放置'.value'

<input id="about" type="text" oninput="myFunction()" placeholder="'.$metadata2.'" /></td>
var y = document.getElementById("about").value;

Answer 2

首先，您必须确保已呈现HTML，因此请在控制台上查看<td id="about">在这里。

如果是，则包含以下代码的函数应显示类似[object HTMLTdElement]的内容。

var y = document.getElementById("about");
alert(y);

第二，当您尝试所有这些操作时：

var y = document.getElementById("about");
var y = document.getElementById("about").value;
var y = document.getElementById("about").innerHTML;
var y = document.getElementById("about").innerText;

这是在具有<td>的{{1}}标记上完成的，但是您想在id子代中进行。那样做： input

它应该可以工作！

Answer 3

编辑：我刚意识到一个不同的问题。 id必须是唯一的，但是您要为每个新的about添加另一个<tr>。考虑为每个条目使用类名about和带有ID的数据属性。在下面的示例中，我有三行带有按钮，用于演示目的

function getAboutForId(id) {
  let about = document.querySelector('.about[data-id="'+id+'"] input').value;
  alert(about);
}

<div id="videos-div" class="videos">
<table class="stats" cellspacing="5">
<tr>
<th class="hed" colspan="1">VideoName</td>
<th class="hed" colspan="1">Date</td>
<th class="hed" colspan="1">Description</td>
</tr>
<tr>
<td>$videoname</td>
<td>$date min</td>
<td class="about" data-id="1"><input type="text" placeholder="$metadata2" /></td><td><input type="button" value="alert" onclick="getAboutForId(1)"></td>
</tr><tr>
<td>$videoname</td>
<td>$date min</td>
<td class="about" data-id="2"><input type="text" placeholder="$metadata2" /></td><td><input type="button" value="alert" onclick="getAboutForId(2)"></td>
</tr><tr>
<td>$videoname</td>
<td>$date min</td>
<td class="about" data-id="3"><input type="text" placeholder="$metadata2" /></td><td><input type="button" value="alert" onclick="getAboutForId(3)"></td>
</tr>

然后您可以使用以下CSS查询从td的嵌套输入中获取输入值：.about[data-id="1"] input。最好在表单元素中使用value属性。

分配Javascript变量以更正HTML表的文本值（<td>标签）

3 个答案: