Блог

Главная - Вопросы по программированию - Как я могу связать выделение с моим заголовком таблицы?

Как я могу связать выделение с моим заголовком таблицы?

#javascript #html #html-table

#javascript #HTML #html-таблица

Вопрос:

Я хочу знать, как я могу связать мои заголовки таблиц с выбором?

Вот экран, показывающий, как это выглядит

введите описание изображения здесь

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

Вот мой код :

 function addRow() {
    var table = document.getElementById("table");

    var row= table.insertRow(-1);

    var column1 = row.insertCell(0);
    column1.innerHTML  = document.getElementById("ville").value;
}  
 <h2>Test</h2>
<form method="post" action="">

    <select id="select">
        <option selected disabled>Choose one</option> 
        <option>Option A</option>
        <option>Option B</option>
        <option>Option C</option>
        <option>Option D</option>
        <option>Option E</option>
    </select>

    <input type="text" name="ville" id="ville" />
    <input type="button" onclick="addRow();" value="Save"/>
  
</form>


<table id="table" style="margin: 30px; border-spacing: 20px;">
    <thead>
        <tr>
            <th>Option A</th> 
            <th>Option B</th>
            <th>Option C</th>
            <th>Option D</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>TEST</td>
        </tr>
    </tbody>
</table>

Ответ №1:

Вам нужно, чтобы список выбора предоставлял вам номер столбца, в который должен быть добавлен новый текст. Что-то вроде:

 function addRow() {
    var table = document.getElementById("table");
    var row = table.insertRow(-1);
    var columnpicked = document.getElementById("select").value;
    for (let i = 0; i <= columnpicked; i  ) {
      row.insertCell(0);
    }
    row.cells[columnpicked].innerHTML  = document.getElementById("ville").value;
}  
 <h2>Test</h2>


    <select id="select">
        <option selected disabled>Choose one</option> 
        <option value=0>Option A</option>
        <option value=1>Option B</option>
        <option value=2>Option C</option>
        <option value=3>Option D</option>
        <option value=4>Option E</option>
    </select>

    <input type="text" name="ville" id="ville" />

    <input type="button" onclick="addRow();" value="Save"/>


<table id="table" style="margin: 30px; border-spacing: 20px;">
    <thead>
        <tr>
            <th>Option A</th> 
            <th>Option B</th>
            <th>Option C</th>
            <th>Option D</th>
            <th>Option E</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>TEST</td>
        </tr>
    </tbody>
</table>

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

Комментарии:

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

2. Мне действительно было интересно это. Я подумал, что было бы разумнее заполнить только одну строку максимум пятью входными текстами. Проблема может заключаться addRow() в самой функции, поскольку она выполняет вставку новой строки и создает достаточное td количество элементов, необходимых для вывода текста в правом столбце. Если строка уже существует, значение списка выбора сообщит вам, какой td текст должен быть включен — он будет row[0].cells[select.value].innerHTML включен. Итак, обновите код, чтобы указать на table.rows[0] , а затем просто обновите нужное td . Если строка не существует, вы можете добавить ее первой.

Ответ №2:

Я оставлю другой ответ там на случай, если нам нужно будет вернуться к нему. Из ваших комментариев, я думаю, вам нужно сделать что-то вроде:

 function addRow() {
  // Get the tbody element - NOTE: an id has been added to that to make it easier to find
  var table = document.getElementById("tablerows");
  // Get the rows in the tbody element
  var rows = table.getElementsByTagName("tr");
  // If there are no rows, create one
  if (rows.length == 0) {
    tbody.insertRow();
  }
  // Get the first row
  var row = rows[0];
  // Get the column selected by the user
  var selected = document.getElementById("select").value;
  // Check if the row has enough td items to put the text into the selected column
  if (row.cells.length - 1 < selected) {
    // If it hasn't, create them
    for (let i = 0; i < selected; i  ) {
      let td = document.createElement("td");
      row.appendChild(td);
    }
  }
  // Get the text to be inserted
  var ville = document.getElementById("ville");
  // Insert the text in the selected column
  row.cells[selected].innerHTML = ville.value;
}  
 <h2>Test</h2>


    <select id="select">
        <option selected disabled>Choose one</option> 
        <option value=0>Option A</option>
        <option value=1>Option B</option>
        <option value=2>Option C</option>
        <option value=3>Option D</option>
        <option value=4>Option E</option>
    </select>

    <input type="text" name="ville" id="ville" />

    <input type="button" onclick="addRow();" value="Save"/>


<table id="table" style="margin: 30px; border-spacing: 20px;">
    <thead>
        <tr>
            <th>Option A</th> 
            <th>Option B</th>
            <th>Option C</th>
            <th>Option D</th>
            <th>Option E</th>
        </tr>
    </thead>
    <tbody id="tablerows">
        <tr>
            <td>TEST</td>
        </tr>
    </tbody>
</table>

Я добавил идентификатор в тег tbody, поскольку строка заголовка рассматривается как часть коллекции строк таблицы. Это означает, что мы можем настроить таргетинг только на строки в tbody.

ХОРОШО — предполагая, что пользователи могут вводить текст непосредственно в ячейку, попробуйте:

 function addRow() {
  var t = document.getElementById("datarows");
  var rtemplate = document.getElementById("newrow");
  var r = rtemplate.content.cloneNode(true);
  t.appendChild(r);
}  
 table {border-collapse:collapse;}
td {height:23px; background-color:white; border:1px solid black; padding:5px; width:100px; vertical-align:top;}
th {border:1px solid black; padding:5px; width:100px;}
td:focus {background-color:lightgreen;}  
 <b>Click on a table cell to add/edit text</b><br>or click to add a new row <button id="newrowbutton" onclick="addRow();">Add new row</button>
<hr>
<table>
  <thead id="headerrow">
    <tr>
      <th>Option A</th>
      <th>Option B</th>
      <th>Option C</th>
      <th>Option D</th>
      <th>Option E</th>
    </tr>
  </thead>
  <tbody id="datarows">
    <tr>
      <td contenteditable></td>
      <td contenteditable></td>
      <td contenteditable></td>
      <td contenteditable></td>
      <td contenteditable></td>
    </tr>
  </tbody>
</table>

<template id="newrow">
    <tr>
      <td contenteditable></td>
      <td contenteditable></td>
      <td contenteditable></td>
      <td contenteditable></td>
      <td contenteditable></td>
    </tr>
</template>

Комментарии:

1. Спасибо за вашу помощь, это так любезно с вашей стороны! У меня только один вопрос. Как я могу добавить новую строку, когда 1-я заполнена?

2. заполнено , поскольку во ВСЕХ ячейках есть текст, или заполнено , потому что ячейка, в которую пользователь хочет вставить текст, уже содержит текст?

3. Я бы сказал, и то, и другое, но я не знаю, будет ли во втором случае, когда пользователь хочет вставить текст в пустую ячейку в 1-й строке, он попадет в 1-ю или в последнюю созданную строку?

4. Я тоже понятия не имею — они ваши пользователи!! Вы могли бы дать им возможность вставить новую строку, если в столбце уже есть текст. Вы могли бы перезаписать текст. Или вы могли бы дать им кнопку для вставки новой строки, когда они захотят. Каждый из них может быть выполнен, но это зависит от их требований.

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