Search code examples
javascriptfunctionhtml-tablecell

Change element between cells of a table

I'm creating a table with two fields, and I'm trying to do:

  • When I register an user, the username will be displayed, with this username when I click a button, the cell field will be filled with the username and the button will be hidden (ok until now).
  • When I click on the button of the second cell, this data will be passed to that cell and the past cell will be reset to the first name.

This second part I'm trying but seems impossible, what I can do for solve this?

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

Solution

  • I have made several changes to your code to achieve what in my opinion is you needed. Instead of events in HTML I created some event listeners using JavaScript. I hope this is of help to you.

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