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

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'

1. <input id="about" type="text" oninput="myFunction()" placeholder="'.$metadata2.'" /></td>

2. 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>标记上完成的，该标记具有id ，但是您想要在input子代中进行。 这样做： var y = document.querySelector("#about input").value

而且应该有效！

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属性与form-elements一起使用。