Question

我正在尝试提取特定的列值，并在此link的帮助下编写了此代码。但是搞砸了某个地方/或者错过了一些概念。

任何指导都会有所帮助。代码如下

HTML

<tr class="findVal">
<?php
    include("myIncludeFile");

    $result = mysql_query("myQuery");
    while($test = mysql_fetch_array($result))
    {
        echo "<td class=".'hidden-phone hidden-tablet hidden-desktop id'.">".$test['col_nm1']."</td>";
       /*Other table data from database
       ..............................*/ 
       echo"<td>".'<div class="checkbox">
            <label><input type="checkbox" name="total" id ="total" value="'.$test['col_nm2'].'"">'.$test['col_nm2'].'</label>
         </div>'."</td>";
       echo"<td>".'<button type="submit" id="approve" class="btn btn-success" onclick="checkTotal()">Approve</button>'."</td>";
       echo "</tr>";
    }
    mysql_close($conn);
?>
</tr>

JS

<script type="text/javascript">
    function checkTotal() {

        var tr = $(this).closest('.findVal');
        var findID = tr.find('.id').text();
        alert(findID);

  }
</script>

N.B：

Answer 1

在添加<tr class="findVal">之前，您似乎错过了重要的<td>。

jQuery正在搜索类findVal的元素，并将其分配给vriable tr。然后，它会搜索该元素的后代以查找类id。

在while循环的第一行，添加jQuery正在寻找的<tr>。

while($test = mysql_fetch_array($result))
{
    echo "<tr class='findVal'>\n";

还有其他方法可以执行此操作，不需要jQuery或查找父元素并再次搜索其子元素。由于您已经从数据库中检索ID，我只需将其添加为按钮功能中的变量，并告诉您的javascript使用该ID。像这样;

echo"<td><button type='submit' id='approve' class='btn btn-success' onclick='checkTotal({$test['col_nm1']})'>Approve</button>"</td>";

请注意，通过使用双引号，您可以直接在echo中传递变量，它们将由PHP进行评估。 echo "this is the $id"。当你的东西不是一个简单的变量字符串时，用花括号括起变量是最安全的，告诉PHP一起评估它echo "this is the {$row[1]['id']}"

Answer 2

好的，因为您只需要提取名为ID的列，只需设置<td>的ID并使用您的函数调用它，假设您的ID是唯一的

<td id="<?= $db_result['id_column']; ?>"><?= $db_result['id_column']; ?></td>

和button：

<td><button onclick="checkTotal(<?= $db_result['id_column']; ?>)">Approve</button></td>

最后：

function checkTotal(id) {
    alert(id);
}

如果你想提取一个不像ID那么简单和简短的值，那么有一些更好的方法可以提供一个更快的方法

Answer 3

你可以为此向上爬回DOM树，这似乎没有任何障碍。

考虑到你有一行的以下结构：

TR
 |- td
 |- td
 |- td
 |- td
 |- td
 |- td
 |- td
     |- div
          |- label
               |- checkbox

附在复选框上的vanilla-js处理程序可能如下所示：

function onCbClicked(evt)
{
  var clickedElem = this;
  var label = clickedElem.parentNode;
  var containingDiv = label.parentNode;
  var clickedCell = containingDiv.parentNode;
  var containingRow = clickedCell.parentNode;

  var firstCell = containingRow.cells(0);
  var idString = firstCell.textContent;
  alert("Id of clicked row: " + idString);
}

这是一个有效的演示：

function newEl(tag){return document.createElement(tag)}
function newTxt(txt){return document.createTextNode(txt)}
function byId(id){return document.getElementById(id)}

// useful for HtmlCollection, NodeList, String types
function forEach(array, callback, scope){for (var i=0,n=array.length; i<n; i++)callback.call(scope, array[i], i, array);} // passes back stuff we need



window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
	constructTable();
	
	var checkBoxes = document.querySelectorAll('input[type = checkbox]');
	forEach(checkBoxes, function(elem){elem.addEventListener('click', onCbClicked, false);} );
}

function makeTableRow( arrayOf8 )
{
	var tr = newEl('tr');
	for (var i=0; i<6; i++)
	{
		var td = newEl('td');
		td.textContent = arrayOf8[i];
		tr.appendChild(td);
	}
	var div = newEl('div');
	var lbl = newEl('label');
	var input = newEl('input');
	input.type = 'checkbox';
	
	lbl.appendChild(input);
	lbl.appendChild( newTxt(arrayOf8[6]) );
	div.appendChild(lbl);
	var td = newEl('td');
	td.appendChild(div);
	tr.appendChild(td);
	
	td = newEl('td');
	td.textContent = arrayOf8[7];
	tr.appendChild(td);
	
	tr.appendChild( newEl('td') );
	
	var btn = newEl('button');
	btn.textContent = 'Approve';
	td = newEl('td');
	td.appendChild(btn);
	tr.appendChild(td);
	return tr;
}

function onCbClicked(evt)
{
	var clickedElem = this;
	var label = clickedElem.parentNode;
	var containingDiv = label.parentNode;
	var clickedCell = containingDiv.parentNode;
	var containingRow = clickedCell.parentNode;

	var firstCell = containingRow.cells[0];
	var idString = firstCell.textContent;
	alert("Id of clicked row: " + idString);
}

function constructTable()
{
	var tblData =	[
						[37,'test','test','test',11,12,132,'CPLAB'],
						[38,'wewq','weqw','qweqwe',22,22,484,222],
						[39,'qwe','qweqw','qweqwe',11,11,121,'saee'],
					]
	var tgt = byId('tblBody');
	tblData.forEach( function(dat) { tgt.appendChild(makeTableRow(dat)); } );
}

	<table>
		<thead>
			<tr>
				<th>ID</th><th>Name</th><th>Designation</th><th>Description</th><th>Quantity</th><th>Rate</th><th>Total</th><th>For</th><th>Date/Time</th><th>Action</th>
			</tr>
		</thead>
		<tbody id='tblBody'>
		</tbody>
	</table>

在按钮单击事件上复制行值

3 个答案: