Question

我目前有一个表格，其中包含供用户填写的文本框。我还有一个按钮，可以将文本框值转换为标签或仅显示一个字符串。

可以说，表格代码如下所示

                     Configuring phpmyadmin 
                                                                            │ 
  An error occurred while installing the database:                            

  mysql: [Warning] mysql: Empty value for 'port' specified. Will throw an     
  error in future versions ERROR 2002 (HY000): Can't connect to local         
  MySQL server through socket '/var/run/mysqld/mysqld.sock' (2) . Your        
  options are:                                                                
   * abort - Causes the operation to fail; you will need to downgrade,        
     reinstall, reconfigure this package, or otherwise manually intervene     
     to continue using it. This will usually also impact your ability to      
     install other packages until the installation failure is resolved.       
   * retry - Prompts once more with all the configuration questions           
     (including ones you may have missed due to the debconf priority          
    setting) and makes another attempt at performing the operation.          
  * retry (skip questions) - Immediately attempts the operation again,       

                                  <Ok>

按钮代码如下所示

<table>
    <tr>
        <td><input type="text" name="box1"></td>
        <td><input type="text" name="box2"></td>
    </tr>

    <tr>
        <td><input type="text" name="box3"></td>
        <td><input type="text" name="box4"></td>
    </tr>

    <tr>
        <td><input type="text" name="box5"></td>
        <td><input type="text" name="box6"></td>
    </tr>
</table>

按下按钮后，我希望文本框成为文本标签，你们有什么方法可以解决这个问题？我不介意使用任何类型的代码，php，javascript对我来说是更好的选择。

由于

Answer 1

将click事件处理程序附加到按钮并在回调迭代中，并根据值生成标签。

＆＃13;

http://localhost/in/abc.php?user_id=

＆＃13;

// attach click event handler
document.getElementById('convert').addEventListener('click', function() {
  // get all input element and convert 
  // into array using Array.from or
  // use [].slice.call for older browser
  // and then iterate over them
  Array.from(document.querySelectorAll('table input')).forEach(function(ele) {
    // generate label element
    var label = document.createElement('label');
    // update the html content with input value
    label.innerHTML = ele.value;
    // replace the input element with label
    ele.parentNode.replaceChild(label, ele);
  });
})

＆＃13;

Answer 2

这是select * from ( select min(id) as id, os from os_table group by os union select max(id), os from os_table group by os ) tmp order by os版本。

参考文献：jQuery-replaceWith.

jquery

$('#convert').click(function(){
    $('input').each(function(){
      var value=$(this).val();
      $(this).replaceWith('<label>' + value+'</label>');
    });
});

$('#convert').click(function(){
     $('input').each(function(){
  	 var value=$(this).val();
         $(this).replaceWith('<label>' + value+'</label>');
     });
});

表格中的HTML文本框变为标签

2 个答案: