Подтвердить что ты не робот

Получить конкретное значение ячейки из таблицы HTML, используя JavaScript

Я хочу получить значение каждой ячейки из таблицы HTML, используя JavaScript при нажатии кнопки отправки.

Как получить значения ячеек таблицы HTML?

4b9b3361

ОТВЕТЫ

Ответ 1

Чтобы получить текст из этой ячейки

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

Вы можете использовать это -

var Row = document.getElementById("somerow");
var Cells = Row.getElementsByTagName("td");
alert(Cells[0].innerText);

Ответ 2

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

}

Ответ 4

Вы можете получить значение ячейки с помощью JS даже при нажатии на ячейку:

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

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

Я написал таблицу HTML в JSP. Курс - это тип. Например, курс cs, cs = объект типа Course, который имеет 2 атрибута: id, title. Курсы - объект ArrayList курса.

В таблице HTML отображаются все названия курсов в каждой ячейке. Таким образом, таблица имеет только 1 столбец: 1 курс Course2 Course3 ...... Отвлекаясь:

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

Это означает, что после того, как пользователь выберет ячейку таблицы, например "Course2" , заголовок курса "Курс2" переместится на страницу, где URL-адрес направляет пользователя: http://localhost:8080/Mydata/ComplexSearch/FoundS.jsp. "Course2" поступит на страницу FoundS.jsp. Идентификатор "Course2" - это курс. Чтобы объявить переменную courseId, в которой будет сохраняться CourseX, вы помещаете "?" после URL и рядом с ним идентификатор.

Я сказал вам на всякий случай, что вы захотите использовать его, потому что я много искал его, и я нашел такие вопросы, как мои. Но теперь я узнал от учителя, поэтому я отправляю туда, где люди спрашивали.

Пример работает. Я видел.

Ответ 5

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

Ответ 6

Просто.. # иногда, когда большая таблица не может добавить идентификатор к каждому 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>

Ответ 7

Я нашел это как самый простой способ добавить строку. Самое удивительное в этом то, что он не меняет уже существующее содержимое таблицы, даже если он содержит элементы ввода.

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

Здесь #table_body - идентификатор тега тела таблицы.

Ответ 8

<td class="virtualTd" onclick="putThis(this)">my td value </td>

function putThis(control) { 
    alert(control.innerText);
}

Ответ 9

Сделайте функцию JavaScript

function addSampleTextInInputBox(message) {
    //set value in input box
    document.getElementById('textInput').value = message + "";
    //or show an alert
    //window.alert(message);
}

Затем просто позвоните в вашу таблицу, нажмите кнопку строки

<td class="center">
    <a class="btn btn-success" onclick="addSampleTextInInputBox('<?php echo $row->message; ?>')" title="Add" data-toggle="tooltip" title="Add">
        <span class="fa fa-plus"></span>
    </a>
</td>