Изменить элемент между ячейками таблицы - PullRequest
0 голосов
/ 21 ноября 2018

Я создаю таблицу с двумя полями, и я пытаюсь сделать:

  • Когда я регистрирую пользователя, имя пользователя будет отображаться с этим именем пользователя, когда я нажимаю кнопкуполе ячейки будет заполнено именем пользователя, а кнопка будет скрыта (хорошо до сих пор).
  • Когда я нажимаю на кнопку второй ячейки, эти данные передаются в эту ячейку и в прошломячейка будет сброшена на имя.

Эта вторая часть, которую я пытаюсь, но кажется невозможной, что я могу сделать для решения этой проблемы?

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

1 Ответ

0 голосов
/ 22 ноября 2018

Я сделал несколько изменений в вашем коде, чтобы добиться того, что, на мой взгляд, вам нужно.Вместо событий в HTML я создал несколько слушателей событий, использующих JavaScript.Я надеюсь, что это поможет вам.

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