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

Question

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

我需要为我正在键入的 td 分配一个 Javascript 变量到 Javascript 函数。我窗口警报以测试变量，但它是空白的。我认为这是因为它没有唯一标识我忙于的记录

如何唯一标识文本？

我试过：

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

编辑：我刚刚意识到一个不同的问题。id必须是唯一的，但您正在为每个新<tr>添加另一个about。请考虑使用类名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属性与表单元素一起使用。

Answer 3

首先，您必须确保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

它应该有效！