Question

我正在创建一个包含两个字段的表，并且正在尝试做：

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

我正在尝试的第二部分，但是似乎是不可能的，我该怎么做才能解决这个问题？

<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>

Answer 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>

在表格的单元格之间更改元素

1 个答案: