Передача переменной javascript в таблице html функции javascript

Я пытаюсь передать переменную fn функции myFunc с помощью кнопки. Я новичок в javascript, так или иначе, чтобы это сделать. Я использую таблицу с первым и последним именем, введенным при использовании. Ответ должен быть приветствием. Эта таблица в конечном итоге будет содержать больше строк и станет частью более крупного проекта.Передача переменной javascript в таблице html функции javascript

<html> 
<head> 
<script src="http://code.jquery.com/jquery-1.8.2.js"></script> 
<script language="JavaScript" type="text/javascript"> 
function ajax_post(){ 
    var fn = document.getElementById("first_name").value; 
    var ln = document.getElementById("last_name").value; 

    var table = $("#resulttable"); 

    table.append('<tr><th>First Name</th><th>Last Name</th><th>ADD</th></tr>'); 

    table.append('<tr><td>'+ 
     fn+'</td><td>'+ 
     ln+'</td><td><button onClick="myFunc(fn)">Add</button></td></tr>') 

} 

function myFunc(fname){ 
    var firstName= fname 

document.getElementById("status").innerHTML = "Hello" + firstName; 

} 
</script> 
</head> 
<body> 
<h2>Example</h2> 
Your First Name: <input id="first_name" name="first_name" type="text" /> 
<br /><br /> 
Your Last Name: <input id="last_name" name="last_name" type="text" /> 
<br /><br /> 
<input name="myBtn" type="submit" value="Submit Data" onClick="ajax_post();"> 

<br /><br /> 
<div id="status"></div> 
<br /><br /> 
<table border = "1" id="resulttable"> 
</body> 
</html>

источник

2013-08-16 user2687915

Да, один из способов сделать это было бы так:

table.append('<tr><td>'+ 
     fn+'</td><td>'+ 
     ln+'</td><td><button onClick="myFunc(\"' + fn + '\")">Add</button></td></tr>')

источник

2013-08-16 02:10:54

ли включить JQuery, что 'table.append (...)' в 'table.children ('TBODY'). Присоединять (...). Конец()'? Если нет, в некоторых браузерах это не удастся. –

В частности, как HTML я бы оставил его так, как он есть. Смотрите это: http://jsfiddle.net/98Y28/1/ –

Нет. Вы не понимаете. Вам не нужно вставлять '' в себя. * Предполагается, что существует DOM. Проблема заключается в том, будет ли браузер * понимать *, когда вы попросите его добавить '' непосредственно в конец списка 'childNodes' элемента' table' (и работает ли jQuery!). Обычно это недействительно, но большинство браузеров допускают это (неявно добавляя к списку 'childNodes'' '). Ваш тест не показывает ничего полезного. –

Поскольку ваша таблица будет в конечном итоге включать несколько строк, вы можете использовать шаблон подход:

Working Fiddle for multiple rows

с допуском на входной элемент

<!-- Note the APP.ajax_post change --> 
<input name="myBtn" type="submit" value="Submit Data" onClick="APP.ajax_post();">

сценарий

$(document).load(function() { 
    // Creates a global APP variable that encapsulates all of the logic 
    window.APP = { 

     // Setup a template for later use 
     rowTemplate: $('<tr><td></td><td></td><td><button>Add</button></td></tr>'), 

     ajax_post: function() { 
      var fn = document.getElementById("first_name").value; 
      var ln = document.getElementById("last_name").value; 

      var table = $("#resulttable"); 

      // Don't add a header if it already exists 
      if(table.find('th').length == 0) { 
       table.append('<tr><th>First Name</th><th>Last Name</th><th>ADD</th></tr>'); 
      } 

      // Clone the template 
      var row = APP.rowTemplate.clone(); 

      row.find('td:eq(0)').text(fn); 
      row.find('td:eq(1)').text(ln); 
      row.find('button').on('click', function() { 
       APP.myFunc(fn); 
      }); 

      row.appendTo(table); 
     }, 

     myFunc: function (fname) { 
      var firstName = fname 

      document.getElementById("status").innerHTML = "Hello" + firstName; 

     } 
    } 

});

источник

2013-08-16 03:27:13 dc5

Передача переменной javascript в таблице html функции javascript

ответ

Смежные вопросы