时间戳

首页 > 解决方案 > 使表计数行

javascript - 使表计数行

问题描述

我有一个自动添加行或删除它们的表。我想让表格计算这些行并给它们编号。例如;

| # | 姓名 | 姓氏|

| 1 | 杰克 | 默里 |

| 2 | 玛丽亚| 棕色 |

这是我的代码；

不用担心 php 代码。我只需要修复javascript。它可能不起作用，因为我没有将 php 代码放在表中。

var number = document.getElementById ( "nmr" ).innerText;
if (number = 1){
  number = number + 1;
}
<table class="table">
  <tr>
    <th>#</th>
    <th><b>Name</b></th>
    <th><b>Email</b></th>
    <th><b>The Lowest Money</b></th>
    <th><b>The Most Money</b></th>
    <th><b>Currency</b></th>
    <th><b>Age</b></th>
    <th><b>Gender</b></th>
    <th><b>Hobby 1</b></th>
    <th><b>Hobby 2</b></th>
    <th><b>Reason</b></th>
    <th><b>Favorite Color</b></th>
    <th></th>
    <th></th>
  </tr>
  
  <?php
  require 'inc/session.ic.php';

  $sql = "SELECT * FROM people WHERE username='" . $_SESSION[ "uid" ] . "'";
  $res = mysqli_query( $conn, $sql );


  ?>
  <?php
  while ( $row = mysqli_fetch_assoc( $res ) ) {

    $sql = "SELECT * FROM supportus WHERE emailUsers=\"" . $row["emailPerson"] ."\"";
	$res2 =  mysqli_query($conn, $sql);
	  $giftExists = mysqli_num_rows($res2) > 0;
    // eger varsa, asagidaki butonu degistir.
    ?>
  
  <tr>
    <th id="nmr">1</th>
    <td id="name"><?=$row["name"]?></td>
    <td id="email"><?=$row["emailPerson"]?></td>
    <td id="moneyLow"><?=$row["least"]?></td>
    <td id="moneyMuch"><?=$row["much"]?></td>
    <td id="currency"><?=$row["currency"]?></td>
    <td id="age"><?=$row["age"]?></td>
    <td id="gender"><?=$row["gender"]?></td>
    <td id="hobby 1"><?=$row["likes_main"]?></td>
    <td id="hobby 2"><?=$row["likes_sub"]?></td>
    <td id="reason"><?=$row["reason"]?></td>
    <td id="fovColor"><?=$row["color"]?></td>
    <?php if ($giftExists) {?>
    <td><a style="margin-top: 40px;" href="giftIdeas.php" class="btn btn-primary btn-sm active" role="button" aria-pressed="true">See Gifts??</a></td>
    <?php } else {?>
    <td><a style="margin-top: 40px;" href="giftIdeas.php" class="btn btn-primary btn-sm active" role="button" aria-pressed="true">See Gift Ideas</a></td>
    <?php } ?>
    <td><a style="margin-top: 40px;" href="2-kisi.php?deleteid=<?=$row["id"]?>" class="btn btn-primary btn-sm active" role="button" aria-pressed="true">Delete Person</a></td>
  </tr>
  <?php } ?>
</table>

标签： javascripthtml

解决方案

有点不清楚实际上问题出在哪里 - 如果只是为每一行添加一个可以在 PHP 循环中轻松完成的数字（设置一个变量并在每次循环迭代时递增。）

进一步的混乱，因为根据问题，可以自动添加或删除行，但尚不清楚这是如何发生的或为什么会发生。javascript 不正确，HTML 也不正确，因为每个都设置了重复的 ID 属性TD~ 如果确实需要，一个更好的选择可能是使用dataset属性，但是可以使用querySelector&/or来完成定位 DOM 中的特定元素querySelectorAll

下面的代码使用一段简单的 Javascript ( & querySelectorAll ) 来查找表格中所有相关的表格单元格，并为每个单元格分配一个整数。由于"table which automatically adds rows or removes them"如果添加或删除了一行，整数将不再准确 - 因此使用MutationObserver监视 DOM 以了解对表的更改。

我希望这能提供一些帮助。

document.addEventListener('DOMContentLoaded',(e)=>{

	// specifically target ALL first cells within the table and assign some content - an integer.
	const callback = function() {
		Array.from( document.querySelectorAll( 'tr > td:first-of-type' ) ).forEach( ( td, i )=>{
			td.textContent=i + 1;
		})		
	};
	
	// determine what the observer will react to
	const config = { 
		attributes:false,
		childList:true,
		characterData:false,
		subtree:true
	};
	
	// monitor the table for changes
	( new MutationObserver( callback ) ).observe( document.querySelector('table'), config );
	
	
	// number the table rows at page load
	callback();

	// utility function to find table row
	const getrow=function(e){
		let n=e.target;
		while(n.tagName!='TR')n=n.parentNode;
		return n;
	};
	
	// a simple event listener bound to the `delete` links which will remove entire table row
	// the `MutationObserver` will be triggered by a row deletion and the rows will be re-indexed
	Array.from( document.querySelectorAll('td > a') ).forEach( a=>{
		a.onclick=function(e){
			e.preventDefault()
			let tr=getrow(e);
			tr.parentNode.removeChild( tr );
		}
	})
})
<table>
	<thead>
		<tr>
			<th>#</th>
			<th>Name</th>
			<th>Surname</th>
			<th>Delete</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td></td>
			<td>fred</td>
			<td>bloggs</td>
			<td><a href="#">Delete</a></td>
		</tr>
		<tr>
			<td></td>
			<td>jim</td>
			<td>smith</td>
			<td><a href="#">Delete</a></td>
		</tr>
		<tr>
			<td></td>
			<td>john</td>
			<td>doe</td>
			<td><a href="#">Delete</a></td>
		</tr>
		<tr>
			<td></td>
			<td>mike</td>
			<td>hunt</td>
			<td><a href="#">Delete</a></td>
		</tr>
	</tbody>
</table>

如果这有过于复杂的事情，并且您只需要在每一行上显示一个数字并且表格在页面加载后不会改变，那么要么使用前面提到的 PHP 添加，或者您甚至可以只使用 CSS

推荐阅读