web-dev-qa-db-fra.com

Obtenir une valeur de cellule particulière d'un tableau HTML à l'aide de JavaScript

Je souhaite obtenir chaque valeur de cellule d'un tableau HTML à l'aide de JavaScript lorsque j'appuie sur le bouton d'envoi.

Comment obtenir les valeurs de cellules de tableau HTML?

javascripthtml
14
Saravanan

Pour obtenir le texte de cette cellule 

<table>
    <tr id="somerow">
        <td>some text</td>            
    </tr>
</table>

Vous pouvez utiliser ceci - 

var Row = document.getElementById("somerow");
var Cells = Row.getElementsByTagName("td");
alert(Cells[0].innerText);
36
pavanred
function Vcount() {
var modify = document.getElementById("C_name1").value;
var oTable = document.getElementById('dataTable');
var i;
var rowLength = oTable.rows.length;
for (i = 1; i < rowLength; i++) {
    var oCells = oTable.rows.item(i).cells;
    if (modify == oCells[0].firstChild.data) {
        document.getElementById("Error").innerHTML = "  * duplicate value";
        return false;
        break;
    }

}
5
Subodh

Vous pouvez également utiliser la méthode DOM pour obtenir la valeur de cellule: Cells [0] .firstChild.data

Plus d’informations à ce sujet dans mon post à http://js-code.blogspot.com/2009/03/how-to-change-html-table-cell-value.html

2
Erik K.

Vous pouvez obtenir une valeur de cellule avec JS même lorsque vous cliquez sur la cellule:

.......................

      <head>

        <title>Search students by courses/professors</title>

        <script type="text/javascript">

        function ChangeColor(tableRow, highLight)
        {
           if (highLight){
               tableRow.style.backgroundColor = '00CCCC';
           }

        else{
             tableRow.style.backgroundColor = 'white';
            }   
      }

      function DoNav(theUrl)
      {
      document.location.href = theUrl;
      }
      </script>

    </head>
    <body>

         <table id = "c" width="180" border="1" cellpadding="0" cellspacing="0">

                <% for (Course cs : courses){ %>

                <tr onmouseover="ChangeColor(this, true);" 
                    onmouseout="ChangeColor(this, false);" 
                    onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp?courseId=<%=cs.getCourseId()%>');">

                     <td name = "title" align = "center"><%= cs.getTitle() %></td>

                </tr>
               <%}%>

    ........................
    </body>

J'ai écrit le tableau HTML dans JSP . Course is is a type. Par exemple Course cs, cs = objet de type Course qui avait 2 attributs: id, title . courses est une ArrayList d’objets Course.

Le tableau HTML affiche tous les titres de cours dans chaque cellule. Ainsi, le tableau ne comporte qu'une colonne:

onclick="DoNav('http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp?courseId=<%=cs.getCourseId()%>');"

Cela signifie qu'après que l'utilisateur sélectionne une cellule de tableau, par exemple "Cours2", le titre du cours "Cours2" sera dirigé vers la page où l'URL dirige l'utilisateur: http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp. "Course2" arrivera sur la page FoundS.jsp. L'identifiant de "Course2" est courseId. Pour déclarer la variable courseId, dans laquelle CourseX sera conservé, vous devez mettre un "?" après l'URL et à côté l'identifiant.

Je vous ai dit juste au cas où vous voudriez l'utiliser parce que j'ai beaucoup cherché et trouvé des questions comme la mienne. Mais maintenant, j'ai appris de l'enseignant alors je poste où les gens ont demandé. 

L'exemple fonctionne.J'ai vu.

2
Dia
var table = document.getElementById("someTableID"); 
var totalRows = document.getElementById("someTableID").rows.length;
var totalCol = 3; // enter the number of columns in the table minus 1 (first column is 0 not 1)
//To display all values
for (var x = 0; x <= totalRows; x++)
  {
  for (var y = 0; y <= totalCol; y++)
    {
    alert(table.rows[x].cells[y].innerHTML;
    }
  }
//To display a single cell value enter in the row number and column number under rows and cells below:
var firstCell = table.rows[0].cells[0].innerHTML;
alert(firstCell);
//Note:  if you use <th> this will be row 0, so your data will start at row 1 col 0
1
Gnomagik

Simplement simplement .. #sometime quand une plus grande table nous ne pouvons pas ajouter l'id à chaque tr

     <table>
        <tr>
            <td>some text</td>
            <td>something</td>
        </tr>
        <tr>
            <td>Hello</td>
            <td>Hel</td>
        </tr>
    </table>

    <script>
        var cell = document.getElementsByTagName("td"); 
        var i = 0;
        while(cell[i] != undefined){
            alert(cell[i].innerHTML); //do some alert for test
            i++;
            }//end while
    </script>
1
Tapasit Suesasiton

J'ai trouvé cela comme un moyen plus simple d'ajouter une ligne. Ce qui est génial à propos de cela, c'est que cela ne modifie pas le contenu de la table, même s'il contient des éléments d'entrée. 

row = `<tr><td><input type="text"></td></tr>`
$("#table_body tr:last").after(row) ;

Ici #table_body est l'id de la balise body body.

0
Natesh bhat