insertcell() с уникальным ID

Question

У меня возникли проблемы с insertRow & insertcell(), которые я искал последние несколько часов, но, к сожалению, я не нашел ответа.

У меня есть код, который добавляет новую строку в мою таблицу с 5 ячейками.

function myCreateFunction() { 

var table = document.getElementById("myTable"); 
var row = table.insertRow(-1); 
var cell1 = row.insertCell(0); 
var cell2 = row.insertCell(1); 
var cell3 = row.insertCell(2); 
var cell4 = row.insertCell(3); 
var cell5 = row.insertCell(4); 
cell1.innerHTML = "<input type=\"text\" id=\"des\" name=\"des\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>"; 
cell2.innerHTML = "<input type=\"text\" id=\"qu\" name=\"qu\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>"; 
cell3.innerHTML = "<input type=\"text\" id=\"pu\" name=\"pu\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>"; 
cell4.innerHTML = "<input type=\"text\" id=\"rl\" name=\"rl\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>"; 
cell5.innerHTML = "<input type=\"text\" id=\"tlht\" name=\"tlht\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>"; 

return false; 
} 

function myDeleteFunction() { 
document.getElementById("myTable").deleteRow(-1); 

return false 
} 

Каждый раз, когда я нажал на кнопку,

onclick="return myCreateFunction()" 

новая строка добавляется, но вопрос, если добавить 2 строки каждые 5 ячеек будет иметь тот же ID & NAME. Каждая ячейка1 будет иметь одинаковый идентификатор, каждая ячейка2 будет иметь тот же ID .....

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

Что мне нужно? Мне нужно добавить число рядом с NAME и ID каждый раз, когда я создаю новую строку.

Пример того, что мне нужно:

если я нажал на кнопку будет создавать все 5 новых клеток, но изменения NAME ID &. Здесь и сейчас имя и идентификатор первой ячейки «des» при нажатии кнопки мне нужно des1, когда я нажимаю снова, я создаю новую строку, но имя ячейки и id - des2 .. des3 ... des4 ... номер должен применяться ко всем идентификаторам и именам всех ячеек, созданных в OnClick.

Не знаю, достаточно ли это достаточно.

Большое спасибо, помощь будет принята с благодарностью.

Answer 1

Несколько вариантов здесь: сохранить список отслеживания каждого времени функция называется

var index = 0; 

function myCreateFunction() { 
    ....your function..... 
    cell.id = "des" + index; 
    index++; 
} 

generate a unique id every time 
function newGuid() 
{ 
    //Generates a guid. 
    var returnGuid = ""; 
    var hexChar = "abcdef1234567890"; 

    for (var i = 0 ; i < 32 ; i++) 
    { 
     returnGuid += hexChar.charAt(Math.random()*16); 
     if(i == 7 || i == 11 || i == 15 || i == 19) 
     { 
      returnGuid += "-"; 
     } 

    } 
    return returnGuid.toString(); 
} 

"... id=\"des\" " + newGuid() 

Answer 2

Сделайте глобальную переменную, например count, и используйте ее для создания идентификатора.

ПРИМЕЧАНИЕ: Проверьте, чем вы можете использовать ' вместо \" внутри строки, чтобы уточнить:

cell1.innerHTML = "<input type='text' id='des" + count + "' name='des' placeholder='' class='form-control input-sm' value=''/>"; 

PS: в конце добавления строки помните, чтобы увеличить количество и восстановить его в случае необходимости

count = count + 1 

Answer 3

Это исходный код работает при добавлении новой строки, это где ID входной линии должен быть увеличен с числом каждый раз, когда я нажал на кнопку Add Line (или на французском AJOUTER)

  <div class="row"> 
       <div class="col-xs-12"> 
        <div class="portlet box red "> 
          <div class="portlet-title"> 
           <div class="caption"> 
            <i class="fa fa-gift"></i>Devis 
           </div> 
          </div> 
          <div class="portlet-body form"> 
            <table id="myTable"> 
            <tr> 
             <td width="40%"><center><b>Description</b></center></td> 
             <td width="10%"><center><b>Quantité</b></center></td> 
             <td width="20%"><center><b>Prix U HT</b></center></td> 
             <td width="10%"><center><b>Remise %</b></center></td> 
             <td width="20%"><center><b>Total</b></center></td> 
            </tr> 
            <tr> 
             <td colspan="5"></td> 
            </tr> 
            <tr> 
             <td width="40%"><input type="text" id="des" name="des" placeholder="" class="form-control input-sm" value="<? echo $_POST['des']; ?>"/></td> 
             <td width="10%"><input type="text" id="qu" name="qu" placeholder="" class="form-control input-sm" value="<? echo $_POST['qu']; ?>"/></td> 
             <td width="20%"><input type="text" id="pu" name="pu" placeholder="" class="form-control input-sm" value="<? echo $_POST['pu']; ?>"/></td> 
             <td width="10%"><input type="text" id="rl" name="rl" placeholder="" class="form-control input-sm" value="<? echo $_POST['rl']; ?>"/></td> 
             <td width="20%"><input type="text" id="tlht" name="tlht" placeholder="" class="form-control input-sm" value="<? echo $_POST['tlht']; ?>"/></td> 
            </tr>          
            </table> 
          </div> 
        </div> 
       </div> 
      </div> 

код JS ADING линию

<script> 
function myCreateFunction() { 
var table = document.getElementById("myTable"); 
var row = table.insertRow(-1); 
var cell1 = row.insertCell(0); 
var cell2 = row.insertCell(1); 
var cell3 = row.insertCell(2); 
var cell4 = row.insertCell(3); 
var cell5 = row.insertCell(4); 
cell1.innerHTML = "<input type=\"text\" id=\"des\" name=\"des\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>"; 
cell2.innerHTML = "<input type=\"text\" id=\"qu\" name=\"qu\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>"; 
cell3.innerHTML = "<input type=\"text\" id=\"pu\" name=\"pu\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>"; 
cell4.innerHTML = "<input type=\"text\" id=\"rl\" name=\"rl\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>"; 
cell5.innerHTML = "<input type=\"text\" id=\"tlht\" name=\"tlht\" placeholder=\"\" class=\"form-control input-sm\" value=\"\"/>"; 

return false; 
} 

function myDeleteFunction() { 
document.getElementById("myTable").deleteRow(-1); 

return false 
}