Change attributes of a table

Question

Change attributes of a table

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

I have the following code and what I want it to do is that by giving the image the id of that tr in concrete and all textBox become enable ...

I've tried it with document.getElementById("name").disabled = false; ... but it just makes me the first row and when I pick up the id of the row I do not know how to write it.

function modify(id){
    
       var cell = id.parentNode;
       var row = cell.parentNode;
        row=row.rowIndex;
      document.getElementById("name").disabled = false;
       document.getElementById("apellidos").disabled = false;
       document.getElementById("telef").disabled = false;
       document.getElementById("email").disabled = false;
       document.getElementById("cargo").disabled = false;
     
    }

<table name="table1" id="table1">
              <tr>
                 <th>1</th>
                 <th>2</th>
                 <th>3</th>
                 <th>4</th>
                 <th>5</th>
                 <th>6</th>
                 <th>7</th>
              </tr>
              <tr>
                  
                  <th><input id='name' name='name' size='8' value='1' disabled></input></th>
                 <th><input id='apellidos' name='apellidos' size='10' value='1' disabled></input></th>
                 <th><input id='telef' name='telef' size='8' value='1' disabled></input></th>
                 <th><input id='email' name='email' size='12' value='1' disabled></input></th>
                 <th><input id='cargo' name='cargo' size='8' value='1' disabled></input></th>
                 <th><input type="checkbox" name="email" value="1"></th>
                 <th >
                    <img onclick=modify(this); src="--.jpg">
                    <img onclick=opc(this); src="--.jpg">
                    <img onclick=delete(this); src="--.jpg">

                 </th>
              </tr>
               <tr>
                  
                  <th><input id='name' name='name' size='8' value='1' disabled></input></th>
                 <th><input id='apellidos' name='apellidos' size='10' value='1' disabled></input></th>
                 <th><input id='telef' name='telef' size='8' value='1' disabled></input></th>
                 <th><input id='email' name='email' size='12' value='1' disabled></input></th>
                 <th><input id='cargo' name='cargo' size='8' value='1' disabled></input></th>
                 <th><input type="checkbox" name="email" value="1"></th>
                 <th >
                    <img onclick=modify(this); src="--.jpg">
                    <img onclick=opc(this); src="--.jpg">
                    <img onclick=delete(this); src="--.jpg">

                 </th>
              </tr>
               <tr>
                  
                  <th><input id='name' name='name' size='8' value='1' disabled></input></th>
                 <th><input id='apellidos' name='apellidos' size='10' value='1' disabled></input></th>
                 <th><input id='telef' name='telef' size='8' value='1' disabled></input></th>
                 <th><input id='email' name='email' size='12' value='1' disabled></input></th>
                 <th><input id='cargo' name='cargo' size='8' value='1' disabled></input></th>
                 <th><input type="checkbox" name="email" value="1"></th>
                 <th >
                    <img onclick=modify(this); src="--.jpg">
                    <img onclick=opc(this); src="--.jpg">
                    <img onclick=delete(this); src="--.jpg">

                 </th>
              </tr>
              </table>

javascript

asked by user80729 17.04.2018 в 11:55

source

2 answers

0

By using document.getElementById("name") you get only the first item with the id you are looking for, to get all, you must use document.getElementsByName("name")

answered by 17.04.2018 в 20:03

call a function in the laravel login Doubt with Operator Overload Exercise + and -

score 2 · Accepted Answer

The problem is that id is something unique.

Ergo will always return the first occurrence. Do not use it more than once.

For your problem I would put an id to tr and then to id of the inputs inside a combination of the style name + idDelTR - > name1 , email1 ...

In the function modify I would add the variable trID to concatenate it when searching by id as in:

var trID = row.id;
document.getElementById("email" + trID).disabled = false;

function modify(elem) {

  var cell = elem.parentNode;
  var row = cell.parentNode;
  var trID = row.id;


  document.getElementById("name" + trID).disabled = false;
  document.getElementById("apellidos" + trID).disabled = false;
  document.getElementById("telef" + trID).disabled = false;
  document.getElementById("email" + trID).disabled = false;
  document.getElementById("cargo" + trID).disabled = false;

}

<table name="table1" id="table1">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
    <th>6</th>
    <th>7</th>
  </tr>
  <tr id='1'>

    <th><input id='name1' name='name1' size='8' value='1' disabled>
    </th>
    <th><input id='apellidos1' name='apellidos1' size='10' value='1' disabled>
    </th>
    <th><input id='telef1' name='telef1' size='8' value='1' disabled>
    </th>
    <th><input id='email1' name='email1' size='12' value='1' disabled>
    </th>
    <th><input id='cargo1' name='cargo1' size='8' value='1' disabled>
    </th>
    <th><input type="checkbox" name="emailC1" value="1"></th>
    <th>
      <img onclick="modify(this);" src="--.jpg">
      <img onclick="opc(this);" src="--.jpg">
      <img onclick="delete(this);" src="--.jpg">

    </th>
  </tr>
  <tr id='2'>

    <th><input id='name2' name='name2' size='8' value='1' disabled>
    </th>
    <th><input id='apellidos2' name='apellidos2' size='10' value='1' disabled>
    </th>
    <th><input id='telef2' name='telef2' size='8' value='1' disabled>
    </th>
    <th><input id='email2' name='email2' size='12' value='1' disabled>
    </th>
    <th><input id='cargo2' name='cargo2' size='8' value='1' disabled>
    </th>
    <th><input type="checkbox" name="emailC2" value="1"></th>
    <th>
      <img onclick="modify(this);" src="--.jpg">
      <img onclick="opc(this);" src="--.jpg">
      <img onclick="delete(this);" src="--.jpg">

    </th>
  </tr>
  <tr id='3'>

    <th><input id='name3' name='name3' size='8' value='1' disabled>
    </th>
    <th><input id='apellidos3' name='apellidos3' size='10' value='1' disabled>
    </th>
    <th><input id='telef3' name='telef3' size='8' value='1' disabled>
    </th>
    <th><input id='email3' name='email3' size='12' value='1' disabled>
    </th>
    <th><input id='cargo3' name='cargo3' size='8' value='1' disabled>
    </th>
    <th><input type="checkbox" name="emailC3" value="1"></th>
    <th>
      <img onclick="modify(this);" src="--.jpg">
      <img onclick="opc(this);" src="--.jpg">
      <img onclick="delete(this);" src="--.jpg">

    </th>
  </tr>
</table>

You can also do a query to avoid "repetitive" lines.

With

document.querySelectorAll("input[id*='"+trID+"']").forEach(elem => elem.disabled = false);

You are collecting all input 's that have a id that ends (with the operator *= ) in the number of id of tr .

Then you make a forEach so that each one removes the disabled

function modify(elem) {

  var cell = elem.parentNode;
  var row = cell.parentNode;
  var trID = row.id;


    document.querySelectorAll("input[id*='" + trID + "']").forEach(elem => elem.disabled = false);

}

<table name="table1" id="table1">
  <tr>
    <th>1</th>
    <th>2</th>
    <th>3</th>
    <th>4</th>
    <th>5</th>
    <th>6</th>
    <th>7</th>
  </tr>
  <tr id='1'>

    <th><input id='name1' name='name1' size='8' value='1' disabled>
    </th>
    <th><input id='apellidos1' name='apellidos1' size='10' value='1' disabled>
    </th>
    <th><input id='telef1' name='telef1' size='8' value='1' disabled>
    </th>
    <th><input id='email1' name='email1' size='12' value='1' disabled>
    </th>
    <th><input id='cargo1' name='cargo1' size='8' value='1' disabled>
    </th>
    <th><input type="checkbox" name="emailC1" value="1"></th>
    <th>
      <img onclick="modify(this);" src="--.jpg">
      <img onclick="opc(this);" src="--.jpg">
      <img onclick="delete(this);" src="--.jpg">

    </th>
  </tr>
  <tr id='2'>

    <th><input id='name2' name='name2' size='8' value='1' disabled>
    </th>
    <th><input id='apellidos2' name='apellidos2' size='10' value='1' disabled>
    </th>
    <th><input id='telef2' name='telef2' size='8' value='1' disabled>
    </th>
    <th><input id='email2' name='email2' size='12' value='1' disabled>
    </th>
    <th><input id='cargo2' name='cargo2' size='8' value='1' disabled>
    </th>
    <th><input type="checkbox" name="emailC2" value="1"></th>
    <th>
      <img onclick="modify(this);" src="--.jpg">
      <img onclick="opc(this);" src="--.jpg">
      <img onclick="delete(this);" src="--.jpg">

    </th>
  </tr>
  <tr id='3'>

    <th><input id='name3' name='name3' size='8' value='1' disabled>
    </th>
    <th><input id='apellidos3' name='apellidos3' size='10' value='1' disabled>
    </th>
    <th><input id='telef3' name='telef3' size='8' value='1' disabled>
    </th>
    <th><input id='email3' name='email3' size='12' value='1' disabled>
    </th>
    <th><input id='cargo3' name='cargo3' size='8' value='1' disabled>
    </th>
    <th><input type="checkbox" name="emailC3" value="1"></th>
    <th>
      <img onclick="modify(this);" src="--.jpg">
      <img onclick="opc(this);" src="--.jpg">
      <img onclick="delete(this);" src="--.jpg">

    </th>
  </tr>
</table>