更改表格单元格之间的元素答案

【问题标题】：Change element between cells of a table更改表格单元格之间的元素
【发布时间】：2019-04-24 08:18:12
【问题描述】：

我正在创建一个包含两个字段的表格，我正在尝试这样做：

当我注册用户时，会显示用户名，当我单击按钮时，使用此用户名，单元格字段将填充用户名，并且按钮将被隐藏（直到现在还可以）。
当我单击第二个单元格的按钮时，此数据将传递到该单元格，而过去的单元格将重置为第一个名称。

我正在尝试第二部分，但似乎不可能，我能做些什么来解决这个问题？

<script>
var list = document.getElementById('users');

function addUser(){
    var username = document.getElementById('username').value;
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(username));
    list.appendChild(entry);
    
    return false;
}
var hidden = false;
function teste(){
hidden = !hidden;
        if(hidden) {
            document.getElementById('testebut').style.visibility = 'hidden';
			var coe = document.getElementById('username').value;
			document.getElementById('lbl1').innerHTML = "user: " + coe;
			
        } else {
            document.getElementById('testebut2').style.visibility = 'visible';
        }
		}
</script>

<style>
table, th, td {
    border: 1px solid black;
}
</style>

<html>
<head>

</head>

<body>

  <fieldset>
    <form id="myform" onsubmit="return addUser()">
    <h2>Add a User:</h2>
    <input id="username" type="text" name="username" placeholder="name"/>
        <input id="email" type="email" name="email" placeholder="email"/>
    <button type="submit">add user</button>
</form>
        
<h2>UsersList:</h2>
<ul id="users"></ul>
  </fieldset>
  
  <table>
  <tr>
    <th>User</th>
	<th>User</th>
	</tr>
	<tr>
	<td id="lbl1">---<button id="testebut" onClick="teste();">X</button></td>
	<td id="lbl2">---<button id="testebut2">X</button></td>

	</tr>
	</table>
  </body>
  </html>

【问题讨论】：

你能用你期望的输出/结果的例子来解释问题的第二部分吗？
I.ex：我有一个用户叫：“John”，如果我点击按钮 1，td lbl1 将被称为 John...如果我点击按钮 2，td lbl2 将被称为 John，而 lbl1 将被称为 ----.

标签： javascript function html-table cell

【解决方案1】：

我对您的代码进行了几处更改，以实现我认为您需要的功能。我使用 JavaScript 创建了一些事件侦听器，而不是 HTML 中的事件。希望对你有所帮助。

<html>
<head>
  <style>
      table, th, td {
        border: 1px solid black;
      }
  </style>
</head>

<body>

  <fieldset>
    <form id="myform" >
    <h2>Add a User:</h2>
    <input id="username" type="text" name="username" placeholder="name"/>
        <input id="email" type="email" name="email" placeholder="email"/>
    <button type="submit" id="addUserBtn">add user</button>
</form>
        
<h2>UsersList:</h2>
<ul id="users"></ul>
  </fieldset>
  
  <table>
  <tr>
    <th>User</th>
	<th>User</th>
	</tr>
	<tr>
	<td>
    <span id="lbl1">---</span>
    <button id="testebut">X</button>
  </td>
  
	<td>
    <span id="lbl2">---</span>
    <button id="testebut2">X</button>
  </td>

	</tr>
	</table>
  </body>
  </html>
  
  <script>
  
  var list = document.getElementById('users');

if ( document.getElementById( "addUserBtn" ) ) {
	document.getElementById( "addUserBtn" ).addEventListener( "click", function( e ) {
  	//prevent the page from reloading and add the user to the list
    e.preventDefault();
    addUser();
  });
}

function addUser(){
    var username = document.getElementById('username').value;
    var entry = document.createElement('li');
    entry.appendChild(document.createTextNode(username));
    list.appendChild(entry);
}

//get all the teste buttons
let testeButtons = document.querySelectorAll( "button[id^='testebut']" );
//add event listener to all the teste buttons
for ( let i = 0; i < testeButtons.length; i++ ) {
	testeButtons[ i ].addEventListener( "click", function( e ) {
  	teste( e.target.id );
  });
}

function teste( id ){
    let resetField = "---";
     
      //this will only get the last username in the list
      let userName = document.getElementById('username').value;
      
      //check if clicked button is testebut and that it's not hidden
      //then add the user name to the field and reset the other field
			if ( id === "testebut" ) {
      		document.getElementById( "lbl1" ).innerHTML = "user: " + userName;
          document.getElementById( "lbl2" ).innerHTML = resetField;
          
          
      } else if ( id === "testebut2" ) {
      		document.getElementById( "lbl2" ).innerHTML = "user: " + userName;
          document.getElementById( "lbl1" ).innerHTML = resetField;
      }
		}
    
    </script>

【讨论】：

这段代码完美运行，我将研究所有已实现的更改。谢谢。
我可以在 JQuery 中使用相同的逻辑吗？（用于在客户端即时更新）
是的，我认为这应该不是问题。用纯 JavaScript 编写只是我个人的偏好。如果我的代码中有不清楚的地方，请随时告诉我，我会尽力解释。另外，如果这对您有帮助，请考虑将其标记为正确答案。