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

时间:2016-10-23 21:57:09

标签: javascript php html

我正在尝试提取特定的列值,并在此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:enter image description here

3 个答案:

答案 0 :(得分:0)

在添加<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']}"

答案 1 :(得分:0)

好的,因为您只需要提取名为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那么简单和简短的值,那么有一些更好的方法可以提供一个更快的方法

答案 2 :(得分:0)

你可以为此向上爬回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>