добавить новую строку другого цвета в конце таблицы

Question

добавить новую строку другого цвета в конце таблицы

1

Javascript

function appendRow() {
    rn = window.prompt("Input number of rows", 1);

 for(var r=0;r<parseInt(rn,10);r++)
  {
   var x=document.getElementById('tbl').insertRow(r);
   }

}

Вопросы

У меня есть проблема с добавлением строки в нижней части таблицы.
Цвет не меняется

HTML

<style type="text/css">
.high-light{background:blue;}
</style>

    <form>
    <input type="button"  value=" append a new row " onclick="appendRow()" /><br />
    </form>

WonderGal 01 июнь 2017, в 07:26

Источник

Теги:

javascript

dom

2 ответа

0

Если вы хотите, чтобы последняя строка имела другой цвет, то просто установите условие, которое проверяет, достиг ли цикл номер, полученный из приглашения минус 1. Это будет означать, что вы достигли последней строки, которая будет вставлена, а затем просто установите атрибут, следовательно:

var button = document.getElementById("button").onclick=appendRow;
var table = document.getElementById("tbl");
var body = document.body;

function appendRow() {
    rn = window.prompt("Input number of rows", 1);

 for(var r=0;r<parseInt(rn,10);r++)
  {
     var tr = table.insertRow(-1);
     var td = tr.insertCell();
     if (r == parseInt(rn,10)-1){
     	tr.setAttribute("style", "background:green");
     }
     td.appendChild(document.createTextNode('New Cell'));
     
   }
		body.appendChild(table);
}

.high-light{background:blue;}

    <form>
    <input id = "button" type="button"  value=" append a new row "  /><br />
    </form>
    
    <table id="tbl" border="1">
    </table>

Кроме того, если вы хотите добавить строку в конец, вы должны вставить -1 качестве параметра для insertRow, т.е. insertRow(-1)

almost a beginner 01 июнь 2017, в 02:18

Ещё вопросы

prasanth · Accepted Answer · 2017-06-01T03-20-00.000Z

Я добавил тег таблицы в html. Фактически его добавление.It не видно без какой-либо ячейки в row.Add с некоторым значением ячейки.add имя класса при добавлении строки времени

function appendRow() {
  var rn = window.prompt("Input number of rows", 1);

  for (var r = 0; r < parseInt(rn, 10); r++) {

    var row = document.getElementById('tbl').insertRow(r)
    row.classList.add("high-light")
    var cell1 = row.insertCell(0);
    var cell2 = row.insertCell(1);

    // Add some text to the new cells:
    cell1.innerHTML = "NEW CELL1";
    cell2.innerHTML = "NEW CELL2";
  }

}

.high-light {
  background: blue;
}

<form>
  <input type="button" value=" append a new row " onclick="appendRow()" /><br />
</form>
<table id="tbl" border="1">


</table>

Спасибо @prasad. Кажется, сейчас работает