it-swarm.com.ru

Динамически изменить ячейку таблицы с пользовательским вводом в Javascript

Вот что я пытаюсь сделать: у меня есть таблица, созданная из Javascript с пользовательским вводом в каждой ячейке. Эта таблица просто для подтверждения правильности введенных пользователем данных. Если пользователь видит ошибку, он щелкает по ячейке, которая требует редактирования, и он помещает текстовое поле в ячейку таблицы с текущими данными ячейки. После этого пользователь сможет отправить изменения или отменить изменения, если они нажали не на ту ячейку. В настоящее время это то, что у меня есть:

    <table id = "confirm">
      <tr><th>Firstname</th><td id = "txtFirstname" onclick = "update(this.id)">Adan</td></tr>
      <tr><th>Lastname</th><td>Smith</td></tr>
      <tr><th>Username</th><td>ASmith</td></tr>
      <tr><th>Email</th><td>[email protected]</td></tr>
      <tr><th>Phone</th><td>123-456-7890</td></tr>
    </table>

<script type = "text/javascript">
  function update(id){
    //Get contents off cell clicked
    var content = document.getElementById(id).firstChild.nodeValue;
    //Switch to text input field
    document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>";
  }
</script>

Вот что делает мой текущий код: когда пользователь щелкает ячейку, он заменяет ее текущим текстом внутри текстового поля, что замечательно, но когда вы пытаетесь редактировать текст, он снова вызывает функцию, заменяя текст на " ноль". Пожалуйста, помогите мне понять это!

4
Vince

Это вызвано всплеск событий . Вы не хотели, чтобы onclick применялся к input, но, к сожалению, это не так. Чтобы решить эту проблему, просто сделайте это (взято из http://jsfiddle.net/DerekL/McJ4s/ )

table td, th{
    border: 1px solid black;
}
<table id="confirm">
    <tr>
        <th>Firstname</th>
        <td contentEditable>Adan</td>
    </tr>
    <tr>
        <th>Lastname</th>
        <td>Smith</td>
    </tr>
    <tr>
        <th>Username</th>
        <td>ASmith</td>
    </tr>
    <tr>
        <th>Email</th>
        <td>[email protected]</td>
    </tr>
    <tr>
        <th>Phone</th>
        <td>123-456-7890</td>
    </tr>
</table>

Зачем делать это с помощью JavaScript, когда простой HTML может делать то же самое? ;)


Internet Explorer:

В IE есть странная "ошибка", которая не позволяет редактировать ячейку таблицы. (почему, Microsoft?) Таким образом, вы должны обернуть свой контент с <div> (взят из http://jsfiddle.net/DerekL/McJ4s/3/ ):

table td,
th {
  border: 1px solid black;
}
<table id="confirm">
  <tr>
    <th>Firstname</th>
    <td>
      <div contenteditable>Adan</div>
    </td>
  </tr>
  <tr>
    <th>Lastname</th>
    <td>Smith</td>
  </tr>
  <tr>
    <th>Username</th>
    <td>ASmith</td>
  </tr>
  <tr>
    <th>Email</th>
    <td>[email protected]</td>
  </tr>
  <tr>
    <th>Phone</th>
    <td>123-456-7890</td>
  </tr>
</table>
8
Derek 朕會功夫

Динамически изменить значение строки таблицы:

var table = document.getElementById ('');

var rowCount = table.rows.length;

var noRowSelected = 1;

for(var i=1; i<rowCount; i++) {
        var row = table.rows[i];
        var chkbox = row.cells[0].childNodes[0];
        if(null != chkbox && true == chkbox.checked) {
            if(rowCount <= 1) {
               break;
            }
            document.getElementById("").value = row.cells[1].innerHTML;
            document.getElementById("").value = row.cells[2].innerHTML;
            document.getElementById("").value = row.cells[3].innerHTML;
            document.getElementById("").value = row.cells[4].innerHTML;
       }
   }

В приведенном выше примере флажок должен быть необходим для каждой строки. Затем мы использовали этот флажок, чтобы получить текущие значения строки редактирования в динамической таблице.

0
ShinnedHawks
<table id = "confirm">
      <tr><th>Firstname</th><td id = "txtFirstname" onclick = "update(this.id)">Adan</td></tr>
      <tr><th>Lastname</th><td>Smith</td></tr>
      <tr><th>Username</th><td>ASmith</td></tr>
      <tr><th>Email</th><td>[email protected]</td></tr>
      <tr><th>Phone</th><td>123-456-7890</td></tr>
    </table>

<script type = "text/javascript">
  function update(id){
    //Get contents off cell clicked
    var content = document.getElementById(id).firstChild.nodeValue;
    //Switch to text input field
    document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>";
  }
</script>

Добавлен оператор if в функцию update (). Изменил это на:

<script type = "text/javascript">
  function update(id){
    if(document.getElementById(id).firstChild != "[object HTMLInputElement]"){
      //Get contents off cell clicked
      var content = document.getElementById(id).firstChild.nodeValue;
      //Switch to text input field
      document.getElementById(id).innerHTML = "<input type = 'text' name = 'txtNewInput' id = 'txtNewInput' value = '" + content + "'/>";
    }
  }
</script>

Это работает как шарм!

0
Vince
    var table = document.getElementById('');
    var rowCount = table.rows.length;
    var noRowSelected = 1;
    for(var i=1; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 1) {
                   break;
                }
                document.getElementById("").value = row.cells[1].innerHTML;
                document.getElementById("").value = row.cells[2].innerHTML;
                document.getElementById("").value = row.cells[3].innerHTML;
                document.getElementById("").value = row.cells[4].innerHTML;
           }
       }

  The Above Example the checkbox must be need for the each row.then we used this check box to get the current edit row values in the dynamic table. then to use the id for edit field to set valued got from the table.
0
ShinnedHawks