简体   繁体   中英

how to validate input in a dynamic html table?

I have the following code for generation of dynamic html which can accept input from the users, I want to validate the inputs of this table, I tried to add input ids in Javascript function, but it is not working, can you suggest any way to achieve this?

HTML:

    <th>Number of BPIs: <title="Number of BPIs"></th>

  <td><select id="numberbpis" name="numberbpis" onchange="buildTable(this.value)">

  <option value="1">1</option >
  <option value="2">2</option >
  <option value="3">3</option >
  <option value="4">4</option >
  <option value="5">5</option >
  <option value="6">6</option >
  <option value="7">7</option >
  <option value="8">8</option >
  <option value="9">9</option >
  </select></td>
  </tr>



     <table id="contentTable" border="1">
      <!-- Fill table programmatically -->
     </table>

Javascript:

function buildTable(val) {
    var myTable =document.getElementById("contentTable");
    var j=val;
    var rows = [];
    var cells = [];

    while (myTable.hasChildNodes()) {
        myTable.removeChild(myTable.lastChild);
    }

    for (var i = 0; i < 1; i++) {
        rows[i] = myTable.insertRow(i);
        if (i%3 == 2) rows[i].addClass("every3rdrow");
        cells[i] = [];

        for (var x = 0; x < j ; x++) {
            cells[i][x] =document.createElement((x==0)?"th":"td");
            cells[i][x].innerHTML = (x==0)?"<input>":"<input>";
            rows[rows.length - 1].appendChild(cells[i][x]);
        }
    }
}

buildTable();

I tried to add <input id="..." name="..."> , but this is not working, can you suggest any other solution ?

this is the jsfiddle, i forgot to add some of the html code above,

http://jsfiddle.net/FyAnR/2/

i want give an input id to the input in javascript function, so that i can use that id to call another javascript function, but when i give < input id="t1">,

the dynamic table is not being generated, help ?

i would validate a normal input in this way,

          function AdaptiveValidate(){
       $adaptive = document.getElementById("adaptive").value;
       if(!/^-?\d*$/.test($adaptive)) {
           alert("Adaptive BPI vector(% capacity) value must be numeric!");
       } 
           } 

i want to use this to validate the elements of a table which are not yet created ?

and also how to read the input values from this table ?

Can't comment but...

So you just want an id? So each one generated would show from t0 to tx? The way that I've done it dynamically adds an id per each cell. Is this what you are looking for? http://jsfiddle.net/J4KFQ/

for (var x = 0; x < j ; x++) {
        cells[i][x] =document.createElement((x==0)?"th":"td");
        cells[i][x].innerHTML = (x==0)?"<input id=t"+x+">":"<input id=t"+x+">";
        rows[rows.length - 1].appendChild(cells[i][x]);
}

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM