发表新帖
发表新帖

Get a particular cell value from HTML table using JavaScript

前端 未结
关注
10 837
暖寄归人
暖寄归人 2020-12-15 06:09

I want to get each cell value from an HTML table using JavaScript when pressing submit button.

How to get HTML table cell values?

相关标签:
10条回答
  • 时光说笑
    2020-12-15 06:14

    You can get cell value with JS even when click on the cell:

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

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

    I wrote the HTML table in JSP. Course is is a type. For example Course cs, cs= object of type Course which had 2 attributes: id, title. courses is an ArrayList of Course objects.

    The HTML table displays all the courses titles in each cell. So the table has 1 column only: Course1 Course2 Course3 ...... Taking aside:

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

    This means that after user selects a table cell, for example "Course2", the title of the course- "Course2" will travel to the page where the URL is directing the user: http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp . "Course2" will arrive in FoundS.jsp page. The identifier of "Course2" is courseId. To declare the variable courseId, in which CourseX will be kept, you put a "?" after the URL and next to it the identifier.

    I told you just in case you'll want to use it because I searched a lot for it and I found questions like mine. But now I found out from teacher so I post where people asked.

    The example is working.I've seen.

    0 讨论(0)
  • 迷失自我
    2020-12-15 06:21 
    <td class="virtualTd" onclick="putThis(this)">my td value </td>

function putThis(control) { 
    alert(control.innerText);
}
    0 讨论(0)
  • 庸人自扰
    2020-12-15 06:25

    You can also use the DOM way to obtain the cell value: Cells[0].firstChild.data

    Read more on that in my post at http://js-code.blogspot.com/2009/03/how-to-change-html-table-cell-value.html

    0 讨论(0)
  • 慢半拍i
    2020-12-15 06:26 
    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;
    }

}
    0 讨论(0)
  • 孤街浪徒
    2020-12-15 06:26

    Here is perhaps the simplest way to obtain the value of a single cell.

    document.querySelector("#table").children[0].children[r].children[c].innerText

    where r is the row index and c is the column index

    Therefore, to obtain all cell data and put it in a multi-dimensional array:

    var tableData = [];  
Array.from(document.querySelector("#table").children[0].children).forEach(function(tr){tableData.push(Array.from(tr.children).map(cell => cell.innerText))}); 
var cell = tableData[1][2];//2nd row, 3rd column

    To access a specific cell's data in this multi-dimensional array, use the standard syntax: array[rowIndex][columnIndex].

    0 讨论(0)
  • 予麋鹿
    2020-12-15 06:28

    I found this as an easiest way to add row . The awesome thing about this is that it doesn't change the already present table contents even if it contains input elements . 

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

    Here #table_body is the id of the table body tag .

    0 讨论(0)
 看不清?
提交回复
热议问题